ダウンロード サンプルファイル (1.2 MB)
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のようになります。
この記事は参考になりましたか？
- この記事の著者
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
WINGSプロジェクト りばてぃ／FUJIKO／ナオキ（リバティ, フジコ, ナオキ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社
この記事は参考になりましたか？
この記事をシェア
