TOPシステム開発> 第4回:WPFで作るWindowsアプリケーション (1/3)




今こそ聞きたいVisual Studio 2008の基礎の基礎

今こそ聞きたいVisual Studio 2008の基礎の基礎

第4回:WPFで作るWindowsアプリケーション

著者:マイクロソフト 馬田 隆明

公開日:2008/02/26(火)

Windows Presentation Foundationで作るWindowsアプリケーション

最終回となる今回は、現在のアプリケーション開発で求められる「表現力」を実現するVisual Studioの仕組みについて、サンプルアプリケーションの開発を通して解説します。

その仕組みが、.NET Framework 3.0から搭載された「Windows Presentation Foundation(以下、WPF)」です。WPFにはさまざまなプレゼンテーション技術が統合され、高度な表現力を提供しています。

今回のサンプル開発では「Visual C# 2008 Express Edition」または「Visual Studio 2008 Professional Edition 90日評価版」を使用します。

WPF開発の特長として「Windowsフォームと同様のスタイルで開発できる」という点があげられます。では「ファイル → 新しいプロジェクト」と選択し、「WPFアプリケーション」を新規作成します。

すると、見慣れたデザイナとともに、HTMLのようなテキストが表示されます。これがWFPで利用する、XMLベースの宣言型言語「XAML(eXtensible Application Markup Language)」です。WPFでは、このXAMLを利用してユーザインターフェース(以下、UI)を記述します。

まずButtonコントロールをドラッグして、デザイナの画面にドロップします。ドロップ後にButtonをダブルクリックすると、これまでと同様にC#のコード画面が出現します。button1_Click のイベントハンドラの中にリスト1のコードを追加し、F5キーを押して実行後にボタンをクリックすると「Hello World!」と書かれたダイアログを表示します。

このように、WPFを使えば、Windowsフォームのアプリケーションと同様の手法で開発可能となり、従来の開発で培ってきた知識を活かすことができます。

リスト1:Hello Worldを表示させるコード
MessageBox.Show(“Hello World!”);

リスト2:ボタンに画像を埋め込むコード
<Image Source="sample.jpg" />

リスト3:ボタンのアニメーション
<Button Margin="70,70,70,70" Name="button1" Click="button1_Click">
<Image Source="sample.jpg" />
<Button.Triggers>
 <EventTrigger RoutedEvent="Page.Loaded">
  <BeginStoryboard>
   <Storyboard RepeatBehavior="Forever" AutoReverse="True">
    <DoubleAnimation
     Storyboard.TargetName="button1"
     Storyboard.TargetProperty="Height"
     From="0" To="100" BeginTime="0:0:0" Duration="0:0:0.2" />
    <DoubleAnimation
     Storyboard.TargetName="button1"
     Storyboard.TargetProperty="Width"
     From="0" To="100" BeginTime="0:0:0" Duration="0:0:0.2" />
   </Storyboard>
  </BeginStoryboard>
 </EventTrigger>
</Button.Triggers>
</Button>

図1:ボタンのアニメーション
図1:ボタンのアニメーション
(画像をクリックすると別ウィンドウに拡大図を表示します)

さらに高度なインターフェースを実装

さらにWPFでは、ほとんどすべての要素を他の要素のホストとして使用できます。ここでは例としてボタンの中に画像を配置してみます。「sample.jpg」というファイル名の適当な画像を用意し、ソリューションエクスプローラのプロジェクトにドロップして登録します。

続いてXAMLエディタの「<Button>」と「</Button>」の間にリスト2のコードを記述し、実行します。すると、ボタンの中にsample.jpgの画像が埋め込まれていることを確認できます。もちろんボタンをクリックすると「Hello World!」ダイアログを表示します。

WPFとWindowsフォームの違いは、例えば「ボタンにアニメーションを加える場合」など、より高度なインターフェースを実装した際に明らかになります。リスト2の内容をリスト3のように書き換えることで、ボタンがアニメーションします。

この例ではButtonの初期配置を画面の端からそれぞれ70ピクセルの場所に設定しました。続く<EventTrigger>ではアニメーションを開始するタイミング(Page.Loaded)を、<StoryBoard>は無限の繰り返し(RepeatBehavior="forever")を、指定しています。

さらにアニメーションの内容を<DoubleAnimation>タグの中に記述しています。StoryBoardのターゲットとするコントロール名(StoryBoard.TargetName)として「button1」を、ターゲットとするプロパティ(StoryBoard.TargetProperty)にHeightとWidthを指定しました。

このコードを実行すると、拡大と縮小を繰り返すボタンが表示されます。従来はイベントハンドラなどを利用し、コード中からコールバックしていた部分をXAMLのみで記述し、UIを独立させています。

今回はXAMLを直接記述しましたが、プロパティウィンドウから設定/変更を行うことができます。実際には「プロパティウィンドウで大まかな設定を行い、細かい設定はXAMLで記述する」というスタイルが効率的です。 次のページ


1   2  3  次のページ


マイクロソフト株式会社 馬田 隆明
著者プロフィール
マイクロソフト株式会社  馬田 隆明
2007年、マイクロソフト株式会社に入社。Visual StudioプロダクトマネージャとしてVisual StudioやPopflyのマーケティングに携わる。両製品を通して、開発者層の拡大と最新技術の普及に尽力する。


この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。

INDEX
第4回:WPFで作るWindowsアプリケーション
Windows Presentation Foundationで作るWindowsアプリケーション
  よりユーザフレンドリーなアプリケーションの開発へ
  統一されたメディアの扱い方
今こそ聞きたいVisual Studio 2008の基礎の基礎
第1回 再発見Visual Studioの魅力
第2回 4つのアプリケーションを開発してみる
第3回 Webアプリケーション開発と簡単Ajax化
第4回 WPFで作るWindowsアプリケーション
関連記事
Visual Studio 2008が変える!デジタルワークスタイル像
次世代データアクセステクノロジー
チーム開発ここまできた、個人からチームの生産性向上へ