Lesson1 WPFの基礎を理解する
第4回 『Hello, Blend !』作成（3）
『Hello, Blend !』の作成も今回で最後になります。残すは、ボタンのクリックで顔マークの切り替えを行えるようにイベント処理を作成するのみになりました。今回はBlendだけでなくVisual Studioを使ったC#プログラムもあり、よりWPF開発らしい内容となっています。それではさっそく前回までに作成した『Hello, Blend !』を開いて、解説をスタートします！
（解説：丹下悠二）
 |
[プロフィール] たんげ・ゆうじ●株式会社セカンドファクトリー インタラクションデベロッパー 武蔵野美術大学造形学部映像学科在籍中にWebデザイン会社にインターンとして参加。デザインとFlashの技術を学ぶ。大学卒業後、UIの開発技術を習 得するため、セカンドファクトリーに入社。現在は同社にてインタラクションデベロッパーとしてWPFを中心とした業務に携わる。 http://www.2ndfactory.com/ |
処理の確認
今回は『Hello, Blend !』へ“顔”マークの追加を行い、“無”ボタンをクリックすることで“顔”マークが無表情となり【図1】、”怒”ボタンのクリックで怒りの表情に変わる処理を追加します【図2】。
【図1】無表情のマーク
【図2】怒りのマーク
“顔”マークの追加
“顔”マークは、「Wingdings」フォントの記号文字を表示するテキストブロックによって表示します。
1．無表情用のテキストブロックを配置します。「ツールボックス」で「TextBlock」を選択【図3】し、「アートボード」内の右上へドラッグ＆ドロップします。
【図3】ツールボックスで「TextBlock」を選択
2．フォントを「Wingdings」にし、フォントサイズを「150」にします。また無表情な記号である「K」を「Text」に設定します【図4】。
【図4】TextBlockのフォントとフォントサイズの設定
3．Gridレイアウト領域に対して中央に表示するように、「TextBlock」のレイアウトを【図5】のように行います。
【図5】TextBlockのレイアウトの設定
4．カラーを好きな色へ変更します。例では灰色に近い色へ設定しています。
5．最後に「TextBlock」の名前を「Muhyojo」に設定します【図6】。
【図6】「TextBlock」の名前設定
6．怒りの表情用テキストブロックも同様の手順で配置します。怒りの表情は「Text」が「L」で、名前を「Ikari」に設定します【図7】。
【図7】無表情と怒りが重なっている状態
7．このままでは、2つの表情が重なっていて意味がわかりません（食いしん坊のような表情に見えます…）ので起動時は無表情を表示し、怒りは非表示にします。怒り用テキストブロックの「Visibility」を「Hidden」へ変更します【図8】。
【図8】TextBlockのVisibilityの設定
8．表情の配置が終わりましたので、保存し実行を確認してください。
ボタンへクリックイベント処理を追加する
2つの表情の表示／非表示をボタンによって切り替えるようにします。“無”ボタンを押すと無表情のテキストブロックを表示し、怒りのテキストブロックを非表示にします。反対に“怒”ボタンを押すと怒りテキストブロックを表示し、無表情テキストブロックを非表示にするようにします。
1．“無”ボタンへクリックイベントを宣言します。「プロパティ」で「イベント」ボタンを押し、イベント一覧を表示します【図9】。
【図9】イベント一覧表示へ切り換え
2．「LeftTopButton」（“無”ボタン）を選択し、イベント一覧の「Click」項目の入力欄をダブルクリックします。Visual Studioが起動しClickイベントハンドラが定義せれたパーシャルクラス（Window1.xaml.cs）が表示されます【図10】。
【図10】Visual Studioでイベントハンドラコードを確認
3．Clickイベントハンドラ内に表情テキストボックスの表示／非表示を行うコードを入力します。
| / 無ボタンがクリックされた時の処理 private void LeftTopButton_Click (object sender, RoutedEventArgs e) { // 怒りテキストブロックを非表示にします。 this.Ikari.Visibility = Visibility.Hidden; // 無表情テキストブロックを表示します。 this.Muhyojo.Visibility = Visibility.Visible; } |
4．入力が終ったらファイルを保存します。
5．Blendへ戻り“怒”ボタンへもClickイベントハンドラを定義します。
| // 怒ボタンがクリックされた時の処理 private void RightBottomButton_Click (object sender, RoutedEventArgs e) { // 無表情テキストブロックを非表示にします。 this.Muhyojo.Visibility = Visibility.Hidden; // 怒りテキストブロックを表示します。 this.Ikari.Visibility = Visibility.Visible; } |
6．うまく動作するか保存・実行を行い、確認しましょう。
いかがですか？ “怒”ボタンと“無”ボタンで表情が切り替わりましたか？ このようにWPF＋Blend（＋Visual Studio）を使うことで、ボタンを押すようなインタラクションを伴ったアプリケーションを直観的な操作で作成できるようになります。ここまでの内容で、Blendを使ったWPF開発の雰囲気をつかんでもらえたのではないでしょうか？
次回からはWPFのアニメーション機能の表現力やFlashとの違いを見ていき、WPFをさらに使いこなせるようにしていきたいと思います。それではみなさん、お楽しみに！
――「Lesson1 WPFの基礎を理解する」は今回で終了です。
Lesson2は10月2日（火）からの掲載開始となります。お楽しみに！
