SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Visual Studio 2008徹底入門(PR)

触れてみようUIデザインツールExpression Blend

Visual Studio 2008徹底入門(6)

  • このエントリーをはてなブックマークに追加

Visual Studio 2008では、インストール直後からWPFアプリケーションの開発が行えます。しかし、Visual Studio 2008でのWPFのUIは実質的にはコントロールの配置ぐらいにしか活用できません。本稿ではWPFのアプリケーションを高度にデザインするツール「Expression Blend」について紹介します。

  • このエントリーをはてなブックマークに追加

はじめに

 Visual Studio 2008(以下、VS 2008)では追加インストールなしで、WPFアプリケーションを作成できます。しかし、本格的なデザインを行うには、Expression Blend(以下、Blend)の利用は不可欠です。

 本稿ではBlendとVS 2008を使ったアプリケーション開発にフォーカスして紹介します。WPF/XAMLに関する詳細は割愛しますので、これらについては、Visual Studio 2008で標準搭載されたWindows Presentation FoundationWPF(Windows Presentation Foundation)+XAML入門 前編WPF(Windows Presentation Foundation)+XAML入門 後編などを参考にしてください。

これまでの記事

  1. 第1回:新しい統合開発環境 Visual Studio 2008ってなんだ!?
  2. 第2回:ここが違う! Visual Studio 2008
  3. 第3回:とことん理解する .NET Framework 3.5
  4. 第4回:Visual Studio 2008とASP.NET 3.5で広がったクライアントサイド開発
  5. 第5回:Visual Studio 2008で標準搭載されたWindows Presentation Foundation

必要な環境

 Visual Studio 2008入門 第1回を参考に、Visual Studio 2008のインストールを行ってください。

本稿で触れる部分

  1. Expression Blendのインストール
  2. Expression Blendについて
  3. Visual Studio 2008のWPFデザインについて
  4. Expression BlendのWPFデザインについて

Expression Blendについて

 Blendの前に、Expressionシリーズについて簡単に説明します。Expressionシリーズは現在以下の4製品から成り立っています

Expressionシリーズ概要
製品名 単体での提供 概要
Expression Web Web標準に準拠したWebサイトをデザインするためのツール
Expression Design × Blend上で活用するためのベクタグラフィックを作成するためのツール
Expression Blend WPFアプリケーションをデザインするためのツール
Expression Media すべてのデジタルファイルを管理する資産管理ツール

 今回紹介するBlendは、Vista世代のユーザーエクスペリエンスを実現するデザインツールです。VSでもWPFフォームのデザイン画面は用意されていますが、各コントロールの配置ぐらいしかできません。より高度なユーザーエクスペリエンスを実現するWPFコントロールの外観やプロパティの変更など、XAMLに関係する部分はBlendを使用する必要があります。

Expression Blendを利用するメリット

 今まで、Windowsフォームで開発してきた方にとって、「VS 2008にはWPFデザイナーがついたからそれで十分じゃないか!」と思う方もいるかもしれません。百聞は一見にしかず。実際にVS 2008のWPFアプリケーションを見比べてみましょう(図1~2)。

図1 VS 2008で作成したWPFフォーム
図1 VS 2008で作成したWPFフォーム
図2 Blendで作成したWPFフォーム
図2 Blendで作成したWPFフォーム

 上記2種類のフォームは紛れもなく同じコントロールを配置しています。しかし、デザイン部分はWindowsフォームでは作成できないようなデザインになっていることが確認できると思います。VS 2008で、確かにWPFのデザイナーは追加されましたが、それは各コントロールを貼り付けて、配置を行う程度の物です。もちろんプロパティ設定もできますが、グラデーションや細かな見た目の設定などは行えません。

 Blendではプロパティの設定、配置はもちろん、アニメーション設定や、フォーム上のデザインを細かく設定できるので、WPFアプリケーションの高度な見た目の実装はBlendで行うことになります。Blendを利用すると嬉しい点はまだあります。それは、デザイナーとプログラマーが同時に作業できるという点です。

 今までは、フォームのデザイン時にコーディング作業を並行して進める事はできませんでした。BlendとVS 2008では、プロジェクト作成後、デザイナーとプログラマーが同一プロジェクトを共有し、デザインとコーディングを同時に行う事ができます。変更があった場合、Blend・VS 2008それぞれが変更箇所を更新してくれるので、安心して開発を進める事ができるのです。

 

Expression Blendのインストール

 Blendは通常価格65,940円となっていますが、VS 2008 Express Editionをインストールすると、Expression Studio(Blend・Web・Design・Mediaが含まれている)アップグレード版を45,990円で購入できます。Blend以外の3製品も含まれての価格なのでお買い得です。

 蛇足ですが、Expression Studioには、VS 2005 Standard Editionも付属されています。購入されるのであれば、ぜひご活用ください。

 Expression Blendの60日間評価版は Microsoft Expression Blend 評価版からダウンロードすることができます。Expression Blendのインストール要件を表1に示します。

表1Expression Blendのインストール要件
OS Microsoft Windows XP SP2、Windows Vista
CPU 1GHz(推奨は2GHz 以上)
メモリ 512MB(推奨は1024MB 以上)
ハードディスク 150MB
GPU DirectXR 9対応(推奨は256MB以上)
ディスプレイ 1024 x 768の解像度と24ビットカラー(推奨は1024 x 1280の解像度と32ビットカラー)

 インストールはウィザードに従って進めるだけです。ここで注意してほしいのは、Blendはバグフィックスの他に、VS 2008と並行して利用する場合の互換性も改善されたSP1もリリースされているということです。

 SP1はMicrosoft Expression Blend Service Pack 1 からダウンロードできます。インストールはダウンロードしたexeファイルをダブルクリックするだけですので、SP1のインストールも忘れずに行いましょう。

Visual Studio 2008のWPFデザインについて

 これからは実際にWPFアプリケーション作成の手順を見ていくことにします。今回はVS 2008でプロジェクトを作成した後で、これをBlendから開きます。

WPFアプリケーションの作成

 VS 2008でWPFアプリケーションを作成します。[ファイル]-[プロジェクトの作成]-[Visual Basic(C#)]-[Windows]-[WPF アプリケーション]を選択し、プロジェクト名を付け、[OK]をクリックします(図3)。

図3 新しいプロジェクトダイアログ
図3 新しいプロジェクトダイアログ

 [ツールボックス]からTextBox/Button/ListBoxコントロールを貼り付けます。

 VS 2008上では前述したように、各コントロールを貼り付けて、配置を行う程度になります(図4)。

図4 VS 2008で作成したWPFフォーム
図4 VS 2008で作成したWPFフォーム

 Buttonコントロールをダブルクリックすると「Windows1.xaml.vb」ファイル上にButton1のクリックイベントが記述されます。この段階でプログラマーはコーディングを進める事ができますが、同時にデザイナーもBlendを利用してフォームをデザインできます。

クリックイベントの記述

 クリックイベントが作成されているので、今回はデザインの前にコードを記述します。サンプルはテキストに入力された値をListBoxコントロールに追加するものなので、コードは以下の2行だけです。

Window1.xaml.vbファイルのクリックイベント
Private Sub Button1_Click(ByVal sender As System.Object, _
  ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
    ListBox1.Items.Add(TextBox1.Text)
    TextBox1.Text = ""
End Sub

 以上で、VS 2008側の作業は終了です。残りはBlendを利用してUIを作成します。

 

Expression Blendチュートリアル

 ここからが本稿の本題、Blendを利用したデザインのチュートリアルです。デザインを行うツールなので、VS 2008とはツールの使い方が異なる点を意識して読んでください。

Expression BlendのGUI

 [ファイル]-[プロジェクトを開く]で、VS 2008で作ったプロジェクトを選択し、[開く]をクリックします。プロジェクトが展開された画面は以下のようになります(図5)。

図5 Blendで開いたWPFフォーム
図5 Blendで開いたWPFフォーム

 Blendの画面は開発者にとって慣れるまで異質なGUIに感じるかと思います。簡単にですが、利用方法について紹介します。図6の番号と照らし合わせてみてください。

図6 Blendで開いたWPFフォーム
図6 Blendで開いたWPFフォーム
表2 Expression Blend全体像
ワークスペース 概要
①ツールボックス アプリケーションのオブジェクトを作成、または管理を行う
②インタラクションパネル アートボード上のオブジェクトの管理とアニメーションタイムラインの作成・管理を行う
③アートボード XAML表示と、フォーム表示を切り替えられるフォームデザイナ
④結果パネル アプリケーションエラーのデバッグ情報を表示
⑤プロジェクト、プロパティ、リソースパネル 現在のプロジェクト管理、各コントロールのプロパティ管理、プロジェクトで使用されているリソースの管理を行う

 各ワークスペースの詳細な情報は、「Expression Blendで始めるWPFアプリケーション(前編)」(@IT)にて詳しく解説されているので、そちらを参考にしてください。

TextBoxを少し加工する

 最初はシンプルに、入力フォームであるTextBoxコントロールを少し加工します。使うのはプロパティパネルだけです。加工前と加工後を先に提示します。

図7 加工前のTextBoxコントロール
図7 加工前のTextBoxコントロール
図8 加工後のTextBoxコントロール
図8 加工後のTextBoxコントロール

 どうですか? ちょっとした設定でWindowsフォームのTextBoxコントロールとだいぶ違う印象を受けたかと思います。今回設定するのは以下の2点です。

  • TextBoxコントロールの配色設定
  • 外観

TextBoxコントロールの配色設定

 配色を変更する前にブラシについて解説します。

ブラシ

 ブラシはオブジェクトの配色設定をするために使用します。基本的なブラシは次のようになっています。

  • 実線色ブラシ(単色のブラシ)
  • グラデーション ブラシ
  • タイル ブラシ
  • ブラシ無し

 なお、グラデーションスライダ上に表示されるグラデーションを設定するためのアイコンを[境界]と呼びます(図9)。

図9 TextBoxコントロールのブラシ設定
図9 TextBoxコントロールのブラシ設定

 それではTextBoxコントロールの配色を行います。アートボードでTextBoxコントロールにフォーカスをあて、プロパティパネルを展開します。[ブラシ]カテゴリで、Background(背景色)・BorderBrush(線色)・Foreground(テキスト色)・OpacityMask(透過マスク色)を設定できます。今回はBackground、Foregroundを以下のように設定します。

 Backgroundはグラデーション ブラシを利用します。グラデーションの設定は以下の通りです。

Backgroundのグラデーション設定
RGB 左の境界 右の境界
R 74 161
G 91 237
B 139 239

 ForegroundはRGBすべて255に設定(白色)します。

外観

 続いて、TextBoxの外観の設定を行います。Opacity設定などもできますが、今回はビットマップ効果のみの設定です。

ビットマップ効果

 ビットマップ効果は、対象のオブジェクトにピクセル処理を実行するために使用します。ビットマップ効果は次のようになっています。

Backgroundのグラデーション設定
ぼかし 焦点がずれているように見える効果
光彩(外側) オブジェクトの外側に表示される光のエフェクト効果
影付き オブジェクトの背後に影を表示
面取り 表面から浮き出すような面を付ける効果
浮き出し 凹凸があるような視覚効果を生む効果

 サンプルで適用するのは[光彩(外側)]です。設定は以下のようになっています。

ビットマップ効果の設定
BitmapEffect 光彩(外側)
GlowColor RGB(0、184、255)
GlowSize 15
Noise 5
Opacity 50

 以上の設定でTextBoxコントロールのデザインは完成です。完成したTextBoxコントロールは図8のようになります。

 

Buttonをデザインする

 WPFではテンプレート機能を利用し、テンプレートを編集することで、既存のコントロールの外観を変更できます。TextBoxコントロールはシンプルな設定だけでしたが、Buttonコントロールは外観の変更やアニメーションを付加してみます。加工前と加工後のButtonコントロールはこのようになります。

図10 加工前のButtonコントロール
図10 加工前のButtonコントロール
図11 加工後のButtonコントロール
図11 加工後のButtonコントロール

 ButtonコントロールらしいButtonコントロールから、大きく変化した星形のButtonコントロールになりました。この星形Buttonコントロールはクリックされると、その場で1回転するアニメーションも付加されています。この項目での作業は以下の2点です。

  • Buttonコントロールのテンプレートを編集
  • アニメーション機能の付加

Buttonコントロールのテンプレートを編集

 Blendでもツールボックスからコントロールを配置した時点では、VS 2008上で張り付けたコントロールと変わらない状態です。ただし、対象のコントロール上で右クリックし[コントロールパーツ(テンプレート)の編集]-[コピーの編集]を選択すると、そのコントロールの既定のテンプレートを確認、編集することができます。

Styleリソースとその管理
 テンプレートの編集の前に、同様のテンプレートのスタイルを他のコントロールでも適用できるように、[Styleリソースの作成]ダイアログが表示されます。ダイアログ上で[リソース名(キー)]と[定義元]を設定でき、リソースパネルで定義されたリソースを確認することができます。
既に作成されたStyleリソースの適用は簡単で、ツールボックスからコントロールを配置した後で、右クリックし[コントロールパーツ(テンプレート)の編集]-[リソースの適用]を選択するだけです。これで、判子を押したように同じスタイルのコントロールが作成できます。

 テンプレートの詳細な情報は、「Expression Blendで始めるWPFアプリケーション(後編)」(@IT)にて詳しく解説されているので、そちらを参考にしてください。

 Buttonコントロールのテンプレートを編集する前に、作業を円滑に進めるための設定をします。アートボードの左下からは表示・グリッドに関する設定が行えます(図12)。

図12 アートボードの設定
図12 アートボードの設定

 以下の設定に変更してください。

  • 400%に拡大
  • グリッドの表示
  • グリッド線への位置合わせオン
  • ガイドへの位置合わせオン

 準備もできたのでテンプレートを編集しましょう。簡単に流れを記します。

  • テンプレート内部の再構築
  • テンプレートの外観を星形にデザイン
  • 星形の配色と文字の配置

テンプレート内部の再構築

 Buttonコントロールにフォーカスをあて、[コントロールパーツ(テンプレート)の編集]-[コピーの編集]を選択します。

 今回は大幅に外見を変えるので、テンプレートの中身(Chorme)を削除します。続いて、ツールボックスから四角形を選択してフォーム上に配置します(図13)。

図13 四角形を配置した図
図13 四角形を配置した図

 この段階で、配置した四角形はオブジェクトです。形を変化させるには、パスを利用する必要があるので、メニューの[オブジェクト]-[パス]-[パスに変換]を選択し、パスに変換します。

テンプレートの外観を星形にデザイン

 パスに変換を行っても4点しかない状態なので、ツールボックスからペンを選択し、星形にするため、点を6つ追加します(図14)。

図14 パスオブジェクトに点の追加
図14 パスオブジェクトに点の追加

 いよいよ、オブジェクトの整形です。ツールボックスの直接選択をクリックし、Pathオブジェクトの点を選択すると、点の位置を変更できるので、グリッド線を利用して図15のように配置させます。

図15 Pathオブジェクトの整形
図15 Pathオブジェクトの整形

 以上の手順で星形に見えるようになりました。

星形の配色と文字の配置

 配色は、TextBox同様にグラデーションブラシを利用します。Fillのグラデーション設定は以下の通りです。

Fillのグラデーション設定
RGB 左の境界 中央の境界 右の境界
R 225 230 222
G 230 246 255
B 189 118 0

 今回は、グラデーション スライドの下部にある[放射状グラデーション]にもチェックをつけます。Strokeはグラデーションブラシを選択し、初期設定(黒→白)のまま利用します。これで、星形Buttonコントロールの外観は完成です。

 このままではテキストが表示されないので、ContentPresenterコントロールを追加します。テンプレートにPathオブジェクトと何か別のコントロールを持たせる場合には、コンテナを使用します。Pathオブジェクト上で右クリックし「グループ化設定」-[Grid]を選択します。続いて、ツールボックスの資産ライブラリからContentPresenterコントロールを選択し、Gridコントロール内に配置します。

Grid/ContentPresenterコントロール
 GridコントロールはWPFアプリケーション上のコンテンツ(コントロール)をGrid形式で正確に配置できるコントロールです。
ContentPresenterコントロールはContentControlから派生するコントロールのコンテンツの書式設定を行うコントロールです。文字表示のほとんどはこのコントロールを利用します。

 文字の大きさはテンプレート側ではなく、Buttonコントロール側で設定します。文字サイズは9で星形内に収まるはずです。

 完成したButtonコントロールは図11のようになります。

アニメーション機能の付加

 機能的に星形Buttonコントロールは完成されていますが、Blendの機能の1つ「アニメーション」を利用して、手早く一回転するアニメーションも付加します。

 星形Buttonコントロールを選択しインタラクションパネルの[トリガ]-[+イベント]を選択し、ドロップダウンから「Button1」と「Click」を選択します(図16)。これで、星形Buttonコントロールがクリックされた時のアニメーションイベントが準備できました。

図16 イベントトリガの追加
図16 イベントトリガの追加

 次に[+]-[新しいアクションの追加]を選択してタイムラインを追加します。初めてタイムラインを追加する場合は、[タイムラインが必要です]というダイアログが表示されるので[OK]をクリックします。既定では「OnClick1」というタイムラインが追加されます。

タイムラインの設定

 タイムラインはアニメーションの時系列を表示するラインです。図17の左下に表示されています。黄色の縦に伸びている線を[タイムライン再生ヘッド]といい、タイムライン上に表示されている白い丸は[キーフレーム]といいます。また、タイムラインの上部に書かれている数字はイベント開始からの時間で、対象のコントロールのプロパティが変化した時にキーフレームが設定されます。

図17 タイムライン設定時の画面
図17 タイムライン設定時の画面

 タイムライン(アニメーション)の記録を行っている間、アートボードは赤線で囲まれていて、アートボードの左上には赤丸と[タイムライン記録オン]と表示されます。タイムラインの記録をオフにするには、[オブジェクトとタイムライン]のドロップダウンから[既定]を選択するか、アートボードの赤丸をクリックします。

 基本的なタイムラインの利用方法は以上です。実際に星形Buttonコントロールに回転させるタイムライン設定を行います。使用するプロパティは[変換]カテゴリの[回転]プロパティです。[タイムライン記録オン]になっているのを確認し、フォーカスをあてて次の設定を行います。

星形Buttonコントロールのタイムライン設定
再生ヘッドの位置 回転プロパティ
0 0
0.5 180
1 360

 以上で、クリック後1秒かけて1回転する星形Buttonコントロールの完成です。

 

ListBoxコントロールを斜めに傾けてみる

 ListBoxコントロールはTextBoxコントロールに近いデザインにします。違うのはテンプレート内にImageコントロールを配置している点と、[変換]カテゴリの[傾き]プロパティを使用している点です。加工前と加工後のListBoxコントロールはこのようになります。

図18 加工前のListBoxコントロール
図18 加工前のListBoxコントロール
図19 加工後のListBoxコントロール
図19 加工後のListBoxコントロール
  • テンプレートにImageコントロールを組み込む
  • コントロールの変換
  • 外観/配色の設定

テンプレートにImageコントロールを組み込む

 ListBoxコントロールにフォーカスをあて、[コントロールパーツ(テンプレート)の編集]-[コピーの編集]を選択します。ScrollViewerコントロール上で右クリックし「グループ化設定」-[グリッド]を選択します。Gridコントロール内に[資産ライブラリ]からImageコントロールを選択して配置します。

ScrollViewerコントロール
 ScrollViewerコントロールはWPFアプリケーション上で、1つだけ子コントロールを持てる、スクロール可能なパネルコントロールです。

 Imageコントロールに表示する画像は[共通プロパティ]カテゴリのSourceプロパティで選択します。この状態では、後から配置したImageコントロールが前面に配置されてしまいます。配置順番を変えるにはImageコントロール上で右クリックし、[順序]-[背面に移動]を選択します。

 以上でListBoxコントロール内に画像を表示できるようになりました。

コントロールの変換

 カスタマイズしたListBoxコントロールを変換します。プロパティパネルの[変換]カテゴリを展開し、[傾き]プロパティを選択します。X軸・Y軸の傾き設定ができるので、それぞれ(5,0)に設定します。

外観/配色の設定

 最後にListBoxコントロールの外観/配色を設定します。Backgroundにグラデーション ブラシを利用します。グラデーションの設定は以下の通りです。

Backgroundのグラデーション設定
RGB 左の境界 右の境界
R 40 118
G 42 179
B 110 208

 BorderBrushは既定のまま、Foregroundは白色に設定します。グラデーションブラシを利用している場合、グラデーションの向きを変更することもできます(図20)。ツールボックスからブラシの変換を選択すると、ブラシ変換矢印がアートボードに表示されます。この矢印の向きを変更するとグラデーションの向きが変わります。今回は斜め下向きに設定しました。

図20 ブラシ変換矢印の設定
図20 ブラシ変換矢印の設定

 以上で、ListBoxコントロールの設定は完了です。

 おまけになりますが、フォームの元となっているGridコントロールにもグラデーションをかけてみましょう。

Backgroundのグラデーション設定
RGB 左の境界 右の境界
R 5 0
G 7 4
B 55 116

 ブラシ変換矢印の向きは右上から左下に変更します。これで、今回Blendで作成するサンプルのデザインは完成です。最初に示した図2のようになったかと思います。

 また、VS 2008側でビジネスロジックも記述しているので、実行すると、以下のように表示されます(図21)。

図21 完成したサンプル
図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についてご紹介します。お楽しみに。

参考文献

 

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2354 2009/04/14 11:19

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング