すぐに使えるWPF／SilverlightのUI開発パターン Windowsエクスプローラ型アプリケーション グレープシティ株式会社　八巻 雄哉 2012/01/12
Page1 Page2 Page3

■フッタ部分の作成

●Gridコントロールの配置と設定

ツールボックスからGridコントロールをベース・レイアウトのGridコントロールの3行目にドラッグ＆ドロップする。

Gridコントロールを右クリックし、コンテキスト・メニューから［レイアウトのリセット］−［すべて］を選択する。

マウス・カーソルを横方向のグリッド・レール上に持っていき、適当な位置で（1回）クリックし、Gridコントロールに2つの<ColumnDefinition>要素（＝列定義）を作成する。

［プロパティ］ウィンドウで、Gridコントロールに対して次のプロパティを設定する。

プロパティ	値
Background	#FFF1F5FB

［プロパティ］ウィンドウで、DataContextプロパティの値部分をクリックして［データ バインディング ビルダー］を表示し、次のように設定する。

項目	値
ソース	DataContext - MainViewModel
パス	SelectedFile

●Imageコントロールの配置と設定

　コンテンツ部分のImageコントロールと同様、Borderコントロールを使ってドロップ・シャドウを適用する。

ツールボックスでBorderコントロールを選択した後に、Gridコントロールの1列目にそこに収まる任意の大きさで配置する（ツールボックスから直接、ドラッグ＆ドロップしてしまうと、Borderコントロールの既定のサイズが1列目の高さよりも広いため2列目にまたがって配置されてしまうので注意してほしい）。

Borderコントロールを右クリックし、コンテキスト・メニューから［レイアウトのリセット］−［すべて］を選択する。

ツールボックスからImageコントロールをBorderコントロールの内側にドラッグ＆ドロップする。

Imageコントロールを右クリックし、コンテキスト・メニューから［レイアウトのリセット］−［すべて］を選択する。

［プロパティ］ウィンドウで、Imageコントロールに対して次のプロパティを設定する。

プロパティ	値
Stretch	Uniform
MinHeight	40
MaxWidth	238

［プロパティ］ウィンドウで、Sourceプロパティの左の列の端にある［プロパティ マーカー］をクリックし、メニューを表示する。そのメニューの［データ バインドの適用］をクリックして［データ バインディング ビルダー］を表示し、次のように設定する。

項目	値
ソース	DataContext - File
パス	Name

［ドキュメント アウトライン］ウィンドウを使って、先ほど配置したBorderコントロールを選択する。

［プロパティ］ウィンドウで、Borderコントロールに対して次のプロパティを設定する。

プロパティ	値
Margin	20,6,20,7
Background	#FFF1F5FB
VerticalAlignment	Center
HorizontalAlignment	Center

［プロパティ］ウィンドウで、BorderBrushプロパティの左の列の端にある［プロパティ マーカー］をクリックし、表示されるメニューから［値のリセット］を選択する。

［プロパティ］ウィンドウで、BorderThicknessプロパティの左の列の端にある［プロパティ マーカー］をクリックし、表示されるメニューから［値のリセット］を選択する。

XAMLビューで、BorderタグにEffectプロパティへのドロップ・シャドウ効果を追加する。

<Border.Effect>   <DropShadowEffect Color="Gray" Direction="-45" Opacity="0.5" ShadowDepth="2" /> </Border.Effect>

<Border>タグの中に記述するドロップ・シャドウ効果の設定のXAMLコード

フッタ部分のGridコントロールを選択し、グリッド・レールの1列目部分にマウス・カーソルを持っていき、サイズ変更バーを表示させる。

サイズ変更バーにある3つのボタンのうち、自動をクリックする。

サイズ変更バーの一番右のボタンが［自動］ボタン

●WrapPanelコントロールの配置と設定

　フッタ部分に表示されるファイルの各種情報は、WrapPanelコントロールを用いて配置する。Silverlightの場合、標準ではWrapPanelコントロールが存在しないが、Silverlight Toolkitをインストールすることで利用可能だ。

• Silverlight Toolkit

ツールボックスからWrapPanelコントロールをフッタ部分のGridコントロールの2列目にドラッグ＆ドロップする。

WrapPanelコントロールを右クリックし、コンテキスト・メニューから［レイアウトのリセット］−［すべて］を選択する。

［プロパティ］ウィンドウで、WrapPanelコントロールに対して次のプロパティを設定する。

プロパティ	値
Orientation	Vertical

○TextBlockコントロールなどのWrapPanelコントロールへの配置と設定

ツールボックスからTextBlockコントロールをWrapPanelにドラッグ＆ドロップする。

TextBlockコントロールを右クリックし、コンテキスト・メニューから［レイアウトのリセット］−［すべて］を選択する。

［プロパティ］ウィンドウで、TextBlockコントロールに対して次のプロパティを設定する。

プロパティ	値
Margin	0,4,0,0
FontSize	13.3333333333333

［プロパティ］ウィンドウで、Textプロパティの左の列の端にある［プロパティ マーカー］をクリックし、メニューを表示する。そのメニューの［データ バインドの適用］をクリックして［データ バインディング ビルダー］を表示し、次のように設定する。

項目	値
ソース	DataContext - File
パス	Name

ツールボックスからTextBlockコントロールをWrapPanelコントロールにドラッグ＆ドロップする。

TextBlockコントロールを右クリックし、コンテキスト・メニューから［レイアウトのリセット］−［すべて］を選択する。

［プロパティ］ウィンドウで、TextBlockコントロールに対して次のプロパティを設定する。

プロパティ	値
Foreground	#FF5A6779

［プロパティ］ウィンドウで、Textプロパティの左の列の端にある［プロパティ マーカー］をクリックし、メニューを表示する。そのメニューの［データ バインドの適用］をクリックして［データ バインディング ビルダー］を表示し、次のように設定する。

項目	値
ソース	DataContext - File
パス	Type

ツールボックスからStackPanelコントロールをWrapPanelコントロールにドラッグ＆ドロップする。

ツールボックスからTextBlockコントロールをStackPanelコントロールにドラッグ＆ドロップする。

TextBlockコントロールを右クリックし、コンテキスト・メニューから［レイアウトのリセット］−［すべて］を選択する。

［プロパティ］ウィンドウで、TextBlockコントロールに対して次のプロパティを設定する。

プロパティ	値
Text	撮影日時:

［プロパティ］ウィンドウで、Styleプロパティの値部分をクリックして［リソース ピッカー］を表示し、その［ローカル］リソースの中から「label1」を選択する。

［リソース ピッカー］の表示例

ツールボックスからTextBlockコントロールをStackPanelコントロールにドラッグ＆ドロップする。

TextBlockコントロールを右クリックし、コンテキスト・メニューから［レイアウトのリセット］−［すべて］を選択する。

［プロパティ］ウィンドウで、Textプロパティの左の列の端にある［プロパティ マーカー］をクリックし、メニューを表示する。そのメニューの［データ バインドの適用］をクリックして［データ バインディング ビルダー］を表示し、次のように設定する。

項目	値
ソース	DataContext - File
パス	CreateDate

［プロパティ］ウィンドウで、Styleプロパティの値部分をクリックして［リソース ピッカー］を表示し、その［ローカル］リソースの中から「label2」を選択する。

StackPanelコントロールを右クリックし、コンテキスト・メニューから［レイアウトのリセット］−［すべて］を選択する。

［プロパティ］ウィンドウで、StackPanelコントロールに対して次のプロパティを設定する。

プロパティ	値
Orientation	Horizontal

からまでの手順を次に挙げる部分のみを変えて、3回繰り返す。

からまでの手順で設定した値	撮影日時:
1回目	大きさ:
2回目	サイズ:
3回目	作成日時:

からまでの手順で設定した値	CreateDate
1回目	ImageSize
2回目	Size
3回目	CreateDate

●GridSplitterコントロールの配置と設定

ツールボックスからGridSplitterコントロールをベース・レイアウトであるGridコントロールの3行目よりさらに下の領域外にドラッグ＆ドロップする（単純に3行目にドロップしてしまうとWrapPanelコントロールの中に配置されてしまうため）。

GridSplitterコントロールを右クリックし、コンテキスト・メニューから［レイアウトのリセット］−［すべて］を選択する。

［プロパティ］ウィンドウで、GridSplitterに対して次のプロパティを設定する。

プロパティ	値
VerticalAlignment	Top
HorizontalAlignment	Stretch
Height	1.3
Background	#FFCCD9EA
IsTabStop	False

　以上でコーディングは完了だ。ソリューション全体をビルドし直して実行すると、完成画面のように実行される（これと同じように実行されない場合は、どこかで手順を間違えているので、もう一度、丁寧に作り直してみてほしい。参考までに完成したXAMLファイルをダウンロードできるようにしておく：WPF版／Silverlight版）。

■

　次回は、再利用可能なUIパターンとして「ウィザード」の基本的な作り方を紹介する予定だ。

INDEX
	すぐに使えるWPF／SilverlightのUI開発パターン
	Windowsエクスプローラ型アプリケーション
	1．ヘッダ部分の作成
	2．コンテンツ部分の作成
	3．フッタ部分の作成

「すぐに使えるWPF／SilverlightのUI開発パターン」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）