第2回　『Hello, Blend !』作成（1）

2007.8.18 SAT

Lesson1　WPFの基礎を理解する

前回はWPFについての解説やExpression Blend（以下、Blend）のインストールなどを中心に説明しました。いよいよ今回からはBlendを使った開発を行っていきます。まずは、WPF開発の雰囲気をつかんでもらうため、3回にわたりWPFを使った簡単なアプリケーション『Hello, Blend !』の作成を行います。1回目となる今回はプロジェクトの作成から、ブラシ機能を使った背景色の設定までを見ていきます。

（解説：安野俊幸）

[プロフィール]
やすの・としゆき●株式会社セカンドファクトリー
エクスペリエンスアーキテクト
中学時代にQuick Cに出会い、その後J2EEを使ったWebシステム開発に携わっていたが、ユーザーインターフェイスの重要性に気づきセカンドファクトリーへ参加。現在はWPFを使った開発に従事しつつ、（趣味で）OSXのCocoaを勉強中。
http://www.2ndfactory.com/

『Hello, Blend !』プロジェクトの作成

Blendの起動

Blendを起動します。Windows Vistaを使っている人はVisual StudioをBlendから起動できるように管理者権限で起動します。Blendアイコンを右クリックして表示されるコンテクストメニューで、「管理者として実行(A)…」を選択し【図1】、起動します。Windows XPの場合は普通に起動してください。

【図1】Windows Vistaで、Blendアイコンの右クリックにより表示されるコンテキストメニュー

プロジェクトの作成

Blendが起動すると【図2】のようなポップアップが表示されますので、「プロジェクト」－「新しいプロジェクト(N)…」を選択します。

【図2】Blend起動時に表示されるポップアップ

「プロジェクトの新規作成」パネルで、以下の項目Windows Vistaで、を入力し「OK」を選択します【図3】。

【図3】プロジェクトの作成ダイアログ

プロジェクトの種類：標準アプリケーション(.exe）
名前：Hello, Blend
場所：任意（例ではC:\に作成しました）
言語：Visual C#

プロジェクトの作成に成功すると、【図4】のような画面が表示されます。

【図4】Blendの全体画面

この画面の構成の概要については【図5】を見てください。さらに細かい内容についてはBlendのヘルプを参照してください。慣れるまではパネルが多く迷うかもしれませんが、気合いと根性で乗り切っていきましょう！

【図5】Blendの構成概要

これから作る『Hello, Blend !』とは？

『Hello, Blend !』【図6】では、背景にオレンジ色から緑色へ変化しているグラデーションを敷いてます。画面上に配置されている“無”ボタンを押すと「無表情顔」が右上に表示され、“怒”ボタンを押すと顔が「怒り顔」へ変化するようにします。

また、【図6】、【図7】のように、ウィンドウのサイズを変えたときに、“無”ボタンと顔の大きさは変わらず、“怒”ボタンの大きさがウィンドウのサイズに合わせ伸縮するようにします。

【図6】“怒”ボタンが大きい状態

【図7】“怒”ボタンが小さい状態

ウィンドウのタイトルを設定する

それでは、作成を開始しましょう。まずウィンドウタイトルを「Hello, Blend !」に変更します。

1．「オブジェクトとタイムライン」で「Window」を選択します【図8】。

【図8】「オブジェクトとタイムライン」での「Window」を選択

2．「プロパティ」の「共通プロパティ」－「Title」の値を「Hello, Blend !」へ変更します【図9】。

【図9】ウィンドウの「Title」の設定

※「プロパティ」には多くの項目がありますので、編集したい項目名が予めわかっている場合には、「種類」の下にある「検索」で検索すると便利です。

背景を設定する

ウィンドウの背景色にオレンジ色から緑色へのグラデーションを設定します。

1．「オブジェクトとタイムライン」で「Window」を選択します。

2．パーツの色設定には、「背景色(Background）」、「枠色(BorderBrush)」、「前景色(Foreground)」、「透明マスク(OpacityMask)」の4つがあります（一部のパーツでは前景色がないなどの違いがあります）。今回は背景色へグラデーションブラシを設定します。「プロパティ」－「ブラシ」の「Background」を選択し、つづいて「グラデーションブラシ」を選択します【図10】。

3．グラデーションの両端の色を設定します。例では左側を緑色に、右側をオレンジ色にしています【図10】。

【図10】グラデーションブラシの設定

4．グラデーションを反時計回り方向へ回転します。ツールボックスから「ブラシの変換(B)」を選択する【図11】と、矢印のマークが表示されますので、このマークを動かしてグラデーションを傾けま【図12】。

←【図11】ツールボックスのブラシの変換

↑【図12】ブラシの変換によるグラデーションの回転

5．以上で画面タイトルと背景の設定がおわりましたので、保存し動作を確認します。ツールバーの「ファイル(F)」－「保存」で保存します（またはショートカット［ctl］＋［s］で保存します）。

6．続いてツールバーの「プロジェクト（P）」－「プロジェクトのビルド（B）」でビルドを行います（または［ｃｔｌ］＋［shift］＋［b］）。画面下の「結果」の「出力」パネルにビルド結果が出力されます。「出力」には”ビルドは正常に完了しました。”といった意味のメッセージが表示されます【図13】。もしエラーが表示され自力で修正が不可能な場合は、残念ですがプロジェクトの作成からリスタートしてください。