Lesson1 WPFの基礎を理解する
第3回 『Hello, Blend !』作成（2）
前回は『Hello, Blend !』用のプロジェクト作成とグラデーションブラシを使った背景の設定を行いました。今回はレイアウトパネルとボタンの配置を行い、よりアプリケーションらしくしていきます。前回作成したHelloBlendプロジェクトを開き、続きを開始しましょう！
（解説：杉下高仁）
 |
[プロフィール] すぎした・たかひと●株式会社セカンドファクトリー リーダー／インタラクションデベロッパー 1980年生まれ。2001年に福島工業高等専門学校 電工学科を卒業し、セカンドファクトリーに就職。学生時代に出会ったFlashがきっかけで、Flash開発者としてスタート。不思議な縁で、NHKの働 く若者にクローズアップする番組（あしたをつかめ 平成若者仕事図鑑）に出演した経験有り。使いやすさと、気持ちがよい動きを持ち合わせたアプリケーションを作ることを信念として、日々開発に携わってい る。 http://www.2ndfactory.com/ |
Gridパネルを配置する
まず「Gridパネル」と呼ばれるレイアウトパネルの設定を行います。Gridパネルはパーツをグリッド状に配置したいときに使用します。おそらくWPFで一番使われるレイアウトパネルではないでしょうか。
HTMLに馴染みがある人はTableタグを想像してください。今回はGridパネルを使いウィンドウを4分割します。左上は縦横幅を固定にし、右上・左下はそれぞれ縦幅・横幅を固定にします。右下の領域は縦横幅ともに可変にし、ウィンドウサイズの大きさに合わせ伸縮するようにします【図1】。
【図1】ウィンドウサイズが変わると長さが変わるラインが橙色の線、変わらないラインが青色の線で示した
1．「オブジェクトとタイムライン」で「LayoutRoot」を選択し、「プロパティ」の「種類」が「Grid」になっていることを確認します【図2】。
【図2】Gridパネルであることを確認
※もしGridパネル以外だった場合は、「LayoutRoot」のコンテキストメニューで、「レイアウトの種類の変更」－「Grid」を行い、Gridパネルへ変更してください。
2．Gridパネルに4つの領域を設定します。「オブジェクトとタイムライン」で「LayoutRoot」を選択し、Gridパネルを編集状態にします。
3．アートボードの「Layout」の上に表示されているガイドライン上へマウスカーソルを重ねると、垂直方向へオレンジ色の区切り線が表示されるので、区切り線を真ん中あたりに設定します【図3】。 一度設定してから位置をずらしたい場合は、白矢印のマウスカーソルを区切り線に重ねるとマウスカーソルが移動カーソルに変わるので、その状態で区切り線を動かしてください。
↑【図3】垂直方向のオレンジ色の区切り線を真ん中あたりに設定
←【図4】ツールボックスの選択内容カーソル
※区切り線が表示されない場合は、選択内容（V）カーソルがツールボックスで選択されているか確認しください【図4】。
4．同様に、アートボードの「Layout」の左側のガイドライン上へマウスカーソルを重ね、水平方向の区切り線を真ん中あたりに設定します。これで「LayoutRoot」Gridパネルへ4つの領域が設定されました【図5】。
【図5】区切り線によってグリッドが4分割された状態
5．次に左上の縦・横幅がウィンドウサイズに連動しないように固定します。「LayoutRoot」が選択状態であることを確認し、アートボードの「LayoutRoot」の左上の「レイアウトモード」ボタンをクリックし、グリッドレイアウトモードへ変更します【図6】。
【図6】グリッドレイアウトモードとなり、鍵マークが表示されている
グリッドレイアウトモードになると、グリッド領域の縦・横幅の固定状態を表す鍵のマークが表示されます。鍵マークが施錠されている辺は固定となり、解錠されている場合は可変を表します。ここでは、【図6】のように左上の領域の横幅・縦幅を固定しそれ以外を解錠します。
6．これでGirdパネルの設定が終了したので、保存し動作を確認してください。
7．ツールバーの「プロジェクト（P）」－「プロジェクトのビルド（B）」でビルドを行います（または［ctl］＋［shift］＋［b］）。画面下の「結果」の「出力」パネルへビルド結果が出力されます。
8．ツールバーの「プロジェクト」－「プロジェクトのテスト」で実行します。この段階では、まだGridパネルへボタンを配置していないので、何も起こりません。
ボタンを配置する
いよいよ目に見えるパーツ、「ボタン」を配置します。左上のボタンから配置していきましょう。
1．「ツールボックス」からボタンアイコンを選択し【図7】、アートボード上の「LayoutRoot」の左上に配置します【図8】。
←【図7】ツールボックスからボタンを選択する
↑【図8】LayoutRootの左上領域へボタンを配置した状態
2．ボタンを左上の領域いっぱいの大きさにするため、ボタンのレイアウトを調整します。ボタンを選択し、「プロパティ」の「レイアウト」を【図9】と同じになるように設定し、上下左右のマージンを「0」にします。
【図9】ボタンのレイアウトパネル
3．ボタンの名前を「LeftTopButton」へ変更し【図10】、ラベル(Content)を「無」へ書き直します【図11】。
【図10】“無”ボタンの名前設定
【図11】“無”ボタンのラベルの設定
4．このままですとラベルの文字サイズが小さいので、文字サイズを72pxへ変更します【図12】。
【図12】“無”ボタンのフォント設定
5．最後にラベルの色を設定します。ボタンの「前景色(Foreground)」を【図13】のように設定します。
【図13】“無”ボタンのラベル色の設定
6．同様の手順で右下にもボタンを配置します。このボタンのラベルには「怒」を前景色には赤色を設定し、名前を「RigthBottomButton」にします。
7．以上のボタンの配置は終わりですので、ビルドと実行を行い確認してみましょう。ウィンドウのサイズを変更すると、“無”ボタンのサイズは固定で、“怒”ボタンのサイズが連動して拡縮しているのがわかると思います【図14】。【図1】で示したような動きになっているかも確認してみてください。
【図14】 “無”ボタンのサイズは固定で、ウィンドウのサイズに応じて“怒”ボタンのサイズが可変となっているのを確認しよう
いかがでしたか？ コードを一行も書くことなく画面を作成可能なことが理解できたかと思います。次回は、ボタンのクリックによって顔マークが無表情になったり怒ったりする実装を追加していきます。お楽しみ！
次回につづく
