CodeZine(コードジン)

特集ページ一覧

WPF(Windows Presentation Foundation)+XAML入門 後編

Vista時代のプログラミングモデル .NET Framework 3.0入門(2)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/02/05 00:00
目次

XAMLブラウザアプリケーション

 次に、XAMLブラウザアプリケーションを作成します。

プロジェクトの作成

 先ほどと同様にVisual Studio 2005を起動し、新しいプロジェクトを作成します。今度は「XAML Browser Application(WPF)」を選択します。

 新しいプロジェクトを作成すると、スタートアップウィンドウとして「Page1.xaml」というXAMLファイルが開かれます。スタンドアロンWindowsアプリケーションでは、XAMLのルート要素はWindow要素でしたが、XAMLブラウザアプリケーションではルート要素はPage要素になります。

 今回はグラデーションを使用し、マウスが通過するとグラデーション色が変化するサンプルを作成します。

コントロールの手動配置

 XAMLコントロールの配置ですが、ツールボックスからの配置はスタンドアロンWindowsアプリケーションとまったく同じなので、今度は手動でXAMLコードを書いてみることにします。自動生成されたXAMLコードのPage要素以下を書き換えます。

Page1.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」というファイルが自動的に開かれるはずです。

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を使ってひな型まで生成してください。

Page1.xaml.cs イベントハンドラ登録
this.gradation.MouseEnter 
  += new MouseEventHandler(gradation_MouseEnter);

 イベントハンドラ内にはランダムに楕円のグラデーション色を変更するようにコードを記述します。

Page1.xaml.cs ランダムグラデーション色変更コード
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ブラウザアプリケーション実行結果

 マウスカーソルが楕円上に入るとランダムにグラデーション色が変化します。

グラデーション色変更結果
グラデーション色変更結果

XAMLブラウザアプリケーションの制限事項

 前述のように、XAMLブラウザアプリケーションはClickOnceアプリケーションとして動作しますので、サンドボックスモデルによる機能制限があります。新しいウィンドウ・ダイアログの表示やローカルファイルへのアクセスなどは基本的に制限されています。ただし、ローカルに配置したものであれば動作する場合もあります。詳細はWindows SDKを参照してください。

ドキュメントの整備状況
 詳細はWindows SDKを参照してください、と繰り返していますが、日本語ドキュメントはあまり整備されていないのが現状です。Visual Studio 2005 Extensions for WPFはベータ版ですが、.NET Framework 3.0は既に正式リリースされたソフトウェアですので、早急な日本語ドキュメント整備が期待されます。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Vista時代のプログラミングモデル .NET Framework 3.0入門

著者プロフィール

  • WINGSプロジェクト 土井 毅(ドイ ツヨシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5