デブサミ2011のセッションデモ解説 その３
デブサミ2011（Developers Summit 2011）のセッション「【18-D-2】Windowsフォームで大丈夫か？一番良いのを頼む。」のデモ解説その３です。デモ一式はこちらからダウンロードしてください。
この投稿では「WPFのレイアウト機能を使った業務アプリ画面」デモを解説します。
このデモでは、実行ファイルだけでなくそのプロジェクトファイル一式も含まれています。Releaseフォルダにある「WpfLobLayoutPrototype.exe」を実行すると、下の図のような画面を確認できるかと思います。
※ 2011/03/07追記 ※
このデモでは、Expression BlendのSketchFlow機能に含まれる手書き風のコントロールスタイル（SketchStyle）を使用しています。SketchStyleでは「Buxton Sketch」というこれまた手書き風のフォントが使用されますが、このフォントは英数字のみとなっており日本語の文字は含まれていません。そのため、デモではフリーのフォント「あんずもじ」を使用しています。
ダウンロードしたデモプロジェクトには「あんずもじ」のフォントは含まれていません。フォントのダウンロード、および使用条件などの詳細については、下記のリンク先をご参照ください。
※※※※※※※※※※※
このプロトタイプアプリケーションで、下記に挙げる様々なレイアウトの機能を確認することができます。
- (3)の横幅が880ピクセル以上確保された場合に(3)は2列表示となる
- (4)の左端のボタンをクリックすることで隠されていた領域が表示される
- (3)と(4)(5)の高さは通常4対6の比率となっているが間の部分をドラッグすることで比率を変更できる
- (6)を押すと(1)と(2)が非表示となりその分だけ(3)と(5)の領域が広がる
ここでは、最後の「(6)を押すと(1)と(2)が非表示となりその分だけ(3)と(5)の領域が広がる」がどのように実現されているかを解説します。
「WpfLobLayoutPrototype.sln」をExpression Blend 4で開くと、下記のような構造になっています。
「Header」を選択し、［プロパティ］パネルからVisibillityプロパティをCollapsedに設定します。そうすると、「Header」が非表示となりその分だけ「Content」領域が広がることを確認できるかと思います。
これは「Header」を配置している行の高さ（RowDefinitionのHeightプロパティ）がAutoに設定されているためです。Autoはそこに配置されるコンテンツの大きさによって値が決まる設定のため、配置している「Header」がCollapsedに高さが0になると、RowDefinitionの高さも0になります。
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
同様に、「LeftPanel」のVisibillityプロパティをCollapsedにすれば、全画面ボタンを押したときの状態が完成します。
今回取り上げた動きは、実は機能的にはWindowsフォームでも2.0から追加されたTableLayoutPanelコントロールを使用することで実現できます。しかしながら、実際にやってみると基本的にデザイナでしかレイアウトを編集できないことから、階層が深くなるにつれレイアウト作業が困難なものになってくることを実感できるのではないかと思います。XAMLはとっつきづらいと言われますが、このようなケースで比較すると階層構造のレイアウトを編集することが非常にやりやすいと思っていただけるのではないかと思います。
今回のその３はこれでおしまいです。その４では「日本の業務に適したエディット系コントロール」のデモを解説します。
