Expression Blendチュートリアル
ここからが本稿の本題、Blendを利用したデザインのチュートリアルです。デザインを行うツールなので、VS 2008とはツールの使い方が異なる点を意識して読んでください。
Expression BlendのGUI
［ファイル］－［プロジェクトを開く］で、VS 2008で作ったプロジェクトを選択し、［開く］をクリックします。プロジェクトが展開された画面は以下のようになります（図5）。
Blendの画面は開発者にとって慣れるまで異質なGUIに感じるかと思います。簡単にですが、利用方法について紹介します。図6の番号と照らし合わせてみてください。
| ワークスペース | 概要 |
| ①ツールボックス | アプリケーションのオブジェクトを作成、または管理を行う |
| ②インタラクションパネル | アートボード上のオブジェクトの管理とアニメーションタイムラインの作成・管理を行う |
| ③アートボード | XAML表示と、フォーム表示を切り替えられるフォームデザイナ |
| ④結果パネル | アプリケーションエラーのデバッグ情報を表示 |
| ⑤プロジェクト、プロパティ、リソースパネル | 現在のプロジェクト管理、各コントロールのプロパティ管理、プロジェクトで使用されているリソースの管理を行う |
各ワークスペースの詳細な情報は、「Expression Blendで始めるWPFアプリケーション（前編）」（＠IT）にて詳しく解説されているので、そちらを参考にしてください。
TextBoxを少し加工する
最初はシンプルに、入力フォームであるTextBoxコントロールを少し加工します。使うのはプロパティパネルだけです。加工前と加工後を先に提示します。
どうですか？ ちょっとした設定でWindowsフォームのTextBoxコントロールとだいぶ違う印象を受けたかと思います。今回設定するのは以下の2点です。
- TextBoxコントロールの配色設定
- 外観
TextBoxコントロールの配色設定
配色を変更する前にブラシについて解説します。
ブラシ
ブラシはオブジェクトの配色設定をするために使用します。基本的なブラシは次のようになっています。
- 実線色ブラシ（単色のブラシ）
- グラデーション ブラシ
- タイル ブラシ
- ブラシ無し
なお、グラデーションスライダ上に表示されるグラデーションを設定するためのアイコンを［境界］と呼びます（図9）。
それではTextBoxコントロールの配色を行います。アートボードでTextBoxコントロールにフォーカスをあて、プロパティパネルを展開します。［ブラシ］カテゴリで、Background（背景色）・BorderBrush（線色）・Foreground（テキスト色）・OpacityMask（透過マスク色）を設定できます。今回はBackground、Foregroundを以下のように設定します。
Backgroundはグラデーション ブラシを利用します。グラデーションの設定は以下の通りです。
| RGB | 左の境界 | 右の境界 |
| R | 74 | 161 |
| G | 91 | 237 |
| B | 139 | 239 |
ForegroundはRGBすべて255に設定（白色）します。
外観
続いて、TextBoxの外観の設定を行います。Opacity設定などもできますが、今回はビットマップ効果のみの設定です。
ビットマップ効果
ビットマップ効果は、対象のオブジェクトにピクセル処理を実行するために使用します。ビットマップ効果は次のようになっています。
| ぼかし | 焦点がずれているように見える効果 |
| 光彩（外側） | オブジェクトの外側に表示される光のエフェクト効果 |
| 影付き | オブジェクトの背後に影を表示 |
| 面取り | 表面から浮き出すような面を付ける効果 |
| 浮き出し | 凹凸があるような視覚効果を生む効果 |
サンプルで適用するのは［光彩（外側）］です。設定は以下のようになっています。
| BitmapEffect | 光彩（外側） |
| GlowColor | RGB（0、184、255） |
| GlowSize | 15 |
| Noise | 5 |
| Opacity | 50 |
以上の設定でTextBoxコントロールのデザインは完成です。完成したTextBoxコントロールは図8のようになります。
