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




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

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

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

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

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

よりユーザフレンドリーなアプリケーションの開発へ

作成した動くボタンをクリックしてみます。するとクリック可能な場合と不可能な場合があることがわかります。これは、前ページで作成したボタンは拡大縮小を繰り返すアニメーションを行っているだけでなく、OnClickの効果範囲も同時に拡大縮小させているためなのです。

従来のWindowsフォームでは、ボタンの見た目が拡大縮小してもOnClickの効果範囲は変化しませんでした。しかし、WPFではクリックして反応が得られる範囲をボタンの見た目と連動させることができます。

これを利用すると、例えば画像にスピーカーの写真を使い、リズムに合わせて拡大縮小する「スピーカーボタン」を作ることができます。これは、ボタンの場所がわかりやすくなるだけでなく、その意味も直感的にユーザが理解できるということなのです。

このようなUIが実装可能な点は、ユーザがアプリケーションをより使いやすくなるだけでなく、開発者にとってもオリジナルのアイデアに近い開発ができるというメリットにつながります。これこそがWPFの魅力の1つといえるでしょう。

さらにWPFはレイアウトの考え方が刷新され、よりスケーラブルな配置ができるようになりました。実はWin32をはじめとする従来のアプリケーションでは、レイアウトという概念がほとんどなく、キャンバスのx、y座標上にコントロールを配置していく必要がありました。つまり開発者はウィンドウのサイズ変更とディスプレイのDPI設定を考慮した上で、コントロールを配置する必要があったのです。

一方、WPFの場合はレイアウトを複数の方法で実装可能で、コンテンツに応じたサイズ調整や位置の管理を行うことができます。そこで重要になってくるのが「パネル」という概念です。

図2:WPFにおけるレイアウトの概念
図2:WPFにおけるレイアウトの概念
(画像をクリックすると別ウィンドウに拡大図を表示します)

WPFのレイアウトシステムとパネル

例えば新規にWPFアプリケーションを作成した際、XAMLの中には<Grid>タグが含まれています。Gridはその名の通り、コンポーネントやグラフィックス要素などを行と列で構成された「格子状」に設置していくためのパネルです。パネルには、このほかにも「Canvas」や「DockPanel」「StackPanel」「WrapPanel」などがあります。

これらパネルの挙動を把握するには、実際のアプリケーションを開発してしまうのが早道です。新規プロジェクトを作成したら、ツールバーから「StackPanel」コントロールをドラッグし、デザイナの上にドロップします。すると、Gridの中にStackPanel領域が出現します。ここで、 StackPanel領域に対してButtonコントロールを適当な数(今回は6個)置いてみると、その位置が勝手に決められることに気づきます。

さらに、XAML エディタで「<StackPanel>〜</StackPanel>」までの箇所を「<WrapPanel>〜<WrapPanel>」と書き換え、F5キーを押して実行します。実行状態でアプリケーションのウィンドウのサイズを変更すると、Buttonコントロールの配置が、ウィンドウの大きさに合わせて自動的に調整されることがわかるでしょう。

このようにパネルを使うことで、アプリケーションウィンドウの変更によって表示要素の影響を指定できるのです。さらに、パネルそのものを他のパネル要素としてホストすることが可能なことから、パネルのグループ化や要素の階層構造化にも対応できます。

このようなレイアウトの設計や変更が容易になるというメリットを活用するためには、WPFにおける新しいレイアウトの概念の理解が不可欠です。しかし「柔軟なレイアウトを持つアプリケーションが制作できる」という価値は、非常に高いといえるでしょう。 次のページ


前のページ  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が変える!デジタルワークスタイル像
次世代データアクセステクノロジー
チーム開発ここまできた、個人からチームの生産性向上へ