ListBoxコントロールを斜めに傾けてみる
ListBoxコントロールはTextBoxコントロールに近いデザインにします。違うのはテンプレート内にImageコントロールを配置している点と、［変換］カテゴリの［傾き］プロパティを使用している点です。加工前と加工後のListBoxコントロールはこのようになります。
- テンプレートにImageコントロールを組み込む
- コントロールの変換
- 外観／配色の設定
テンプレートにImageコントロールを組み込む
ListBoxコントロールにフォーカスをあて、［コントロールパーツ（テンプレート）の編集］－［コピーの編集］を選択します。ScrollViewerコントロール上で右クリックし「グループ化設定」－［グリッド］を選択します。Gridコントロール内に［資産ライブラリ］からImageコントロールを選択して配置します。
Imageコントロールに表示する画像は［共通プロパティ］カテゴリのSourceプロパティで選択します。この状態では、後から配置したImageコントロールが前面に配置されてしまいます。配置順番を変えるにはImageコントロール上で右クリックし、［順序］－［背面に移動］を選択します。
以上でListBoxコントロール内に画像を表示できるようになりました。
コントロールの変換
カスタマイズしたListBoxコントロールを変換します。プロパティパネルの［変換］カテゴリを展開し、［傾き］プロパティを選択します。X軸・Y軸の傾き設定ができるので、それぞれ（5,0）に設定します。
外観／配色の設定
最後にListBoxコントロールの外観／配色を設定します。Backgroundにグラデーション ブラシを利用します。グラデーションの設定は以下の通りです。
| RGB | 左の境界 | 右の境界 |
| R | 40 | 118 |
| G | 42 | 179 |
| B | 110 | 208 |
BorderBrushは既定のまま、Foregroundは白色に設定します。グラデーションブラシを利用している場合、グラデーションの向きを変更することもできます（図20）。ツールボックスからブラシの変換を選択すると、ブラシ変換矢印がアートボードに表示されます。この矢印の向きを変更するとグラデーションの向きが変わります。今回は斜め下向きに設定しました。
以上で、ListBoxコントロールの設定は完了です。
おまけになりますが、フォームの元となっているGridコントロールにもグラデーションをかけてみましょう。
| RGB | 左の境界 | 右の境界 |
| R | 5 | 0 |
| G | 7 | 4 |
| B | 55 | 116 |
ブラシ変換矢印の向きは右上から左下に変更します。これで、今回Blendで作成するサンプルのデザインは完成です。最初に示した図2のようになったかと思います。
また、VS 2008側でビジネスロジックも記述しているので、実行すると、以下のように表示されます（図21）。
以上でVS 2008とExpression Blendを利用したWPFアプリケーションサンプルは完成です。実際の開発やデザインもこのように進めていくことができます。
まとめ
今回はVS 2008とBlendを利用したWPF開発の紹介を行いました。今までのWindowsフォームと違い、WPFの特徴を活かすにはBlendの利用は外せません。XAML（UI）に関する実装（アニメーション含む）はBlendで、ビジネスロジックやアプリケーションの管理はVS 2008で行いましょう。
また、Blendはデザイナーだけのツールではありません、微細な手直しやデザイナーの協力が望めない場合は開発者がデザインを行うことになります。Blendの利用に抵抗を感じる方も多いかと思いますが、まずはGUIに慣れる事から始めましょう。
Expression Blendの今後
BlendではWPFアプリケーション開発は行えますが、Silverlightを利用したサイトやアプリケーションは作成できません。今後リリース予定のBlend 2ではSilverlight 1.0のサポートや.NET Framework 3.5対応が正式に行われ、Blend 2.5ではSilverlight 2アプリケーションのサポートも行われるようになる予定です。Silverlightを利用した開発を進めたい方はBlend 2以降を利用しましょう。
次回は、より実用的なサービスの提供が可能となったWCFについてご紹介します。お楽しみに。
参考文献
- Microsoft Expression（英語）
Blend 2以降の情報は現在英語のみです。
- Microsoft Expression（日本語）
Blend1に関する情報は日本語で提供されています。
