XAMLブラウザアプリケーション
次に、XAMLブラウザアプリケーションを作成します。
プロジェクトの作成
先ほどと同様にVisual Studio 2005を起動し、新しいプロジェクトを作成します。今度は「XAML Browser Application（WPF）」を選択します。
新しいプロジェクトを作成すると、スタートアップウィンドウとして「Page1.xaml」というXAMLファイルが開かれます。スタンドアロンWindowsアプリケーションでは、XAMLのルート要素はWindow要素でしたが、XAMLブラウザアプリケーションではルート要素はPage要素になります。
今回はグラデーションを使用し、マウスが通過するとグラデーション色が変化するサンプルを作成します。
コントロールの手動配置
XAMLコントロールの配置ですが、ツールボックスからの配置はスタンドアロンWindowsアプリケーションとまったく同じなので、今度は手動でXAMLコードを書いてみることにします。自動生成されたXAMLコードのPage要素以下を書き換えます。
<Grid> <Canvas Name="gradation"> <Ellipse Height="100" Width="200" Margin="100,100,0,0"> <Ellipse.Fill> <LinearGradientBrush StartPoint="0.5,2"> <GradientStop x:Name="gradientStop1" Color="#FFFF0000" Offset="1"/> <GradientStop x:Name="gradientStop2" Color="#FF33FF00" Offset="0"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> </Canvas> </Grid>
これは楕円を描画するEllipse要素のFillプロパティに、グラデーションを使ったブラシであるLinearGradientBrush要素を設定した例です。LinearGradientBrush要素以下の2つのGradientStop要素で指定した色で楕円をグラデーション描画します。いずれもVisual Studio 2005 Extensions for WPFのツールボックスにはないコントロールです。各コントロールの詳細はWindows SDKを参照してください。
手動でXAMLコードを書く際に重要なのは、Name属性です。今回は描画するためのコンテナであるCanvas要素と、グラデーション色を指定するためのGradientStop要素にそれぞれName属性、x:Name属性を指定しています。ここで指定した属性の値が、コードビハインドのソースコードでのコントロール名となります。
対応するクラスが、もともとNameプロパティを持っている要素についてはName属性を使用できますが、対応するクラスがNameプロパティを持たない要素についてはx:Name属性を使用します。この場合はGradientStopクラスにはNameプロパティがないため、x:Name属性を使用しています。なお、「x」はXAMLのXML名前空間に割り当てられた名前空間接頭辞です。
XAMLコードとコードビハインドのソースコードの連携方法確認
ソリューションエクスプローラより「Page1.xaml.cs」を開きます。いったんビルドを行った後、クラス内のメンバ一覧を表示している右上のドロップダウンを開くと、XAMLコードで指定したgradation、gradientStop1、gradientStop2が表示されています。
どういう仕組みになっているのか確認するため、一覧から［gradation］をクリックします。「Page1.g.cs」というファイルが自動的に開かれるはずです。
public partial class Page1 : System.Windows.Controls.Page, System.Windows.Markup.IComponentConnector { internal System.Windows.Controls.Canvas gradation; internal System.Windows.Media.GradientStop gradientStop1; internal System.Windows.Media.GradientStop gradientStop2; ： ：
このクラスはpartialクラスとして定義されており、同様にpartialクラスとして定義されているコードビハインドの「Page1.xaml.cs」と結合してビルドされます。XAMLコードで指定したName属性と同じ名前のコントロールが定義されているので、コードビハインドのソースコードからコントロールを使用することができるわけです。
このファイルはVisual Studio 2005 Extensions for WPFによって自動生成されるので、自分で変更すべきではありません。また、現バージョンのVisual Studio 2005 Extensions for WPFでは、ビルド時にこのファイルを表示していると不具合が発生する可能性があるとのことです。
イベントハンドラの登録
では、「Page1.xaml.cs」にイベントハンドラを登録します。gradationのMouseEnterイベントのイベントハンドラを登録します。先ほどと同様にコンストラクタの末尾に追加し、IntelliSenseを使ってひな型まで生成してください。
this.gradation.MouseEnter += new MouseEventHandler(gradation_MouseEnter);
イベントハンドラ内にはランダムに楕円のグラデーション色を変更するようにコードを記述します。
void gradation_MouseEnter(object sender, MouseEventArgs e) { //ランダムに楕円のグラデーションを変更する Random random = new Random(); byte randomColor1 = (byte)(random.NextDouble() * 256); byte randomColor2 = (byte)(random.NextDouble() * 256); byte randomColor3 = (byte)(random.NextDouble() * 256); this.gradientStop1.Color = Color.FromRgb(randomColor1, randomColor2, randomColor3); this.gradientStop2.Color = Color.FromRgb(randomColor3, randomColor1, randomColor2); }
ここではSystem.Randomクラスで乱数を生成し、GradientStopクラスのColorプロパティにグラデーション色として設定しています。
実行
ここまでできたところで、F5キーを押して実行します。今回はInternet Explorerが起動し、XAMLが読み込まれて楕円が表示されます。
マウスカーソルが楕円上に入るとランダムにグラデーション色が変化します。
XAMLブラウザアプリケーションの制限事項
前述のように、XAMLブラウザアプリケーションはClickOnceアプリケーションとして動作しますので、サンドボックスモデルによる機能制限があります。新しいウィンドウ・ダイアログの表示やローカルファイルへのアクセスなどは基本的に制限されています。ただし、ローカルに配置したものであれば動作する場合もあります。詳細はWindows SDKを参照してください。
