■ Microsoft Expression Blend を使用してボタンを作成する ■
此のチュートリアルでは、WPF のカスタマイズされたボタンを Microsoft Expression Blend を使用し て作成する手順に付いて説明する。
※ Microsoft Expression Blend の具体的な動作は Extensible Application Markup Language（XAML） の生成で、此れがコンパイルされ、実行可能プログラムが作成される。Extensible Application Markup Language（XAML）を直接扱う場合に付いては、Extensible Application Markup Language （XAML）を Blend ではなく Visual Studio を使用して、此れと同じアプリケーションを作成する 別のチュートリアルが用意されて居る。詳細に付いては、「チュートリアル : XAML を使用したボタ ンの作成」を参照され度い。 此れから作成する、カスタマイズされたボタンを次の図に示す。 ■ 図形からボタンへの変換 此のチュートリアルの前半では、カスタムボタンの独自の外観を作成する。作成するには、先ず四角形 をボタンに変換する。次に、他の図形をボタンのテンプレートに追加し、更に複雑な外観のボタンを作 成する。此処では、通常のボタンを使用してカスタマイズする。ボタンには今回は使用しない組み込み 機能が有るので、カスタムボタンを作成するには、四角形から始める方が簡単です。 Expression Blend で新しいプロジェクトを作成するには
１．Expression Blend を起動する（[スタート] をクリックし、[すべてのプログラム]、[Microsoft Expression]、[Microsoft Expression Blend] の順にポイントする）。
２．必要に応じて、アプリケーションを最大化する。
W
３．[ファイル] メニューの [新しいプロジェクト] をクリックする。 ４．[標準アプリケーション (.exe)] を選択する。 ５．プロジェクトの名前を「CustomButton」と指定して、[OK] をクリックする。 此の時点で、空のWPF プロジェクトが出来る。F5 キーを押すと、アプリケーションを実行出来る。予 想通り、アプリケーションは空のウィンドウ而巳で構成されて居る事が解る。次に、角の丸い四角形を 作成し、其れをボタンに変換する。 四角形をボタンに変換するには １．ウィンドウの背景プロパティ を黒に設定する。ウィンドウ を 選 択 し て [プロパティ ] タ ブ を ク リ ッ ク し 、 Background プロパティを Black に設定する。 ２．大きさがボタンのサイズに近い四角形をウィ ンドウ上に描画する。左側のツールパネルで 四角形ツールを選択し、ウィンドウ上でドラ ッグして四角形を描画する。
３．四角形の四隅を丸める。四角 形の制御点をドラッグするか、 RadiusX プ ロ パ テ ィ と RadiusY プロパティを直接 設 定 す る 。 RadiusX と RadiusY の値を 20 に設定す る。 ４．四角形をボタンに変換する。四角形を選択する。 [ツール] メニューの [ボタンの作成] をクリ ックする。 ５．スタイル/テンプレートのスコープ を指定する。次の様なダイアログ ボックスが表示される。
[リソース名 (キー)] で、[総てに適用] を選択する。此れに依り、生成されるスタイルとボタンテ ンプレートが、ボタンで有る総てのオブジェクトに適用される。[定義元] で、[アプリケーション] を 選択する。此れに依り、生成されるスタイルとボタンテンプレートのスコープが、アプリケーショ ン全体に成る。此の2 つのボックスに値を設定すると、ボタンのスタイルとテンプレートはアプリ ケーション全体に含まれる総てのボタンに適用され、アプリケーションで作成するボタンには既定 で此のテンプレートが使用される。 ■ ボタンテンプレートの編集 現在、ボタンに変更された四角形が有る。此のセクションでは、ボタンのテンプレートを変更して、外 観を更にカスタマイズする。 ボタンの外観を変更するためにボタンテンプレートを編集するには １．テンプレートの表示ビューに移動する。 ボタンの外観を更にカスタマイズする には、ボタンテンプレートを編集する必 要が有る。此のテンプレートは、四角形 をボタンに変換した時に作成された。ボ タンテンプレートを編集するには、ボタ ンを右クリックし、[コントロールパーツ （テンプレート）の編集]、[テンプレー トの編集] の順にクリックする。 テンプレートエディタでは、ボタンが Rectangle と ContentPresenter に分離されて居る。 ContentPresenter は、ボタン内のコンテンツ（文字列 "Button" 等）の表示に使用する。四角形 とContentPresenter は孰れも Grid の内側に配置される。
２．テンプレートコンポーネン トの名前を変更する。テン プレートインベントリで 四角形を右クリックし、 Rectangle 名 を "[Rectangle]" か ら "outerRectangle" に 変 更 し 、"[ContentPresenter]" を "myContentPresenter" に変更する。 ３．中が空洞に成る様（ドー ナツの様に）四角形を変 更する。 [outerRectangle] を 選 択 し 、 Fill を "Transparent" に設定し、 StrokeThickness を 5 に 設定する。 次に、Stroke にテンプレートの色を設定する。此れを行うには、[ストローク] の横に有る小さな 白 い ボ ッ ク ス を ク リ ッ ク し 、[CustomExpression] を 選 択 し 、 ダ イ ア ロ グ ボ ッ ク ス に 「{TemplateBinding Background}」と入力する。
４．内側の四角形を作成する。次に、 四 角 形 を 今 1 つ 作 成 し （"innerRectangle" と 謂 う 名 前 を 付 け る ）、 其 れ を outerRectangle の内側に対称 に成る様に配置する。此の様な 場合、ズームを使用して編集領 域に表示されるボタンを大きく すると、作業し易く成る。 ※ 作成して居る四角形は、図の物と 外観が異なって居る場合が有る （(角が丸く成って居る等)。 ５．ContentPresenter を最前面に移動す る。此の時点で、テキスト "Button" が表示されなく成る事が有る。此れは、 innerRectangle が myContentPresenter より前面に有 る為で有る。此れを解消するには、 myContentPresenter を innerRectangle の下にドラッグする。 四角形や myContentPresenter の位 置を変更して、次の様にする。 ※ 亦、myContentPresenter は、右クリ ックして [前面へ移動] をクリックす る事で、前面に配置する事も出来る。
６．innerRectangle の外観を変更 する。RadiusX、RadiusY、 及びStrokeThickness の値を 20 に設定する。 亦 、 Fill を カ ス タ ム 式 "{TemplateBinding Background}" を使用してテ ンプレートの背景に設定し、 Stroke を "transparent" に 設定する。innerRectangle の Fill と Stroke が outerRectangle とは逆に成 って居る事を確認する。 ７．グラスレイヤーを前面に追加する。ボタンの外観変更の最後の手順は、グラスレイヤーを前面に追 加する事で有る。此のグラスレイヤーは、3 つ目の四角形で有る。グラスはボタン全体を覆う為、 グラス四角形のサイズはouterRectangle と殆ど同じに成る。従って、此の四角形を作成するには、 単純にouterRectangle のコピーを作成する。outerRectangle を強調表示し、Ctrl + C と Ctrl + V でコピーを作成する。此の新しい四角形の名前を "glassCube" と指定する。 ８．必要に応じてglassCube 位置を変更する。glassCube がボタンを覆う位置にない場合は、覆う位置 迄ドラッグする。 ９．glassCube に outerRectangle とは少しだけ異なる外観 を指定する。glassCube のプロパティを変更する。先 ず、RadiusX プロパティと RadiusY プロパティを 10 に変更し、StrokeThickness を 2 に変更する。 Ａ．glassCube をグラスの様な外観にする。Fill をグラスの様な外観にするには、75%不透明の線形グ ラデーションを使用し、色は白と透明とを殆ど同じ様な間隔で6 回交互に入れ替える。グラデーシ ョン終了位置の設定値は次の様に成る。 ・グラデーション終了位置1：白、アルファ値 75% ・グラデーション終了位置2：透明 ・グラデーション終了位置3：白、アルファ値 75% ・グラデーション終了位置4：透明 ・グラデーション終了位置5：白、アルファ値 75% ・グラデーション終了位置6：透明
此れで、"波打つ" グラスの外観に成る。 Ｂ．グラスレイヤーを非表示にする。グラスの様なレイヤーの外観は此れで確認出来たので、[プロパテ ィ] パネルの [表示] ペインに移動し、[不透明度] を 0%にして非表示にする。此処から先では、グ ラスレイヤーを操作するのに、プロパティ トリガーとイベントを使用する。 ■ ボタン動作のカスタマイズ 此の時点で、ボタンのプレゼンテーション（外観）はテンプレートの変更に依ってカスタマイズされて 居るが、マウスオーバーに依る外観の変化、フォーカスの受け取り、クリック等のユーザー操作に対し て、通常のボタンの様な反応はしない。次の2 つの手順で、斯うした動作をカスタムボタンに組み込む 方法を説明する。先ず、簡単なプロパティトリガーを使用し、其の後にイベントトリガーやアニメーシ ョンを追加する。 プロパティトリガーを設定するには １．新しいプロパティトリガーを作成する。[glassCube] が選択された状態で、[トリガー] パネルで [+ プロパティ] をクリックする（次の手順の下の図を参照され度い）。此れに依り、既定のプロパティ トリガーを持つプロパティトリガーが作成される。
２．IsMouseOver をトリガーに依って 使用されるプロパティにする。プロ パティをIsMouseOver に変更する。 此れに依り、IsMouseOver プロパ ティがtrue に成る（ユーザーがマ ウスでボタンをポイントする）と、 プロパティトリガーがアクティブ に成る。 ３．IsMouseOver で glassCube の不透明度 100%をトリガ ーする。[トリガー記録オン] と表示されて居る事を確認 する （前の図を参 照）。此れ は、記録がオ ンの間 に glassCube のプロパティ値に行われる所有る変更が、 IsMouseOver が true の場合に実行されるアクションに 成る事を意味する。記録中に、glassCube の Opacity を 100%に変更する。 此れで、最初のプロパティトリガー が作成された。エディターの [トリ ガー] パネルに、Opacity が 100%に 変更された事が記録された事を確認 する。 F5 キーを押してアプリケーションを実行し、マウスポインタをボタンに合わせたり、ボタンから 離したりする。ボタンにマウスポインタを合わせるとグラスレイヤーが現れ、離すと消える事を確 認する。
４．IsMouseOver でストローク値の変 更をトリガーする。他のアクショ ンを IsMouseOver トリガーと関 連付けて観る事にする。記録が続 行 さ れ て 居 る 間 、 選 択 を glassCube から outerRectangle に 切り替える。次に、outerRectangle の Stroke を カ ス タ ム 式 "{DynamicResource {x:Static SystemColors.HighlightBrushKe y}}" に設定する。此れに依り、 Stroke が、ボタンに依って使用さ れる通常の強調表示色に設定され る。F5 キーを押し、マウスをボタ ンに合わせた時の効果を確認する。 ５．IsMouseOver で暈やけたテキスト をトリガーする。 IsMouseOver プロパティトリガー にアクションを今 1 つ追加する。 グラスがボタンを覆った時に、ボ タンのコンテンツが少し暈やける 様にする。此れを行うには、暈し の BitmapEffect を ContentPresenter （myContentPresenter）に適用す る。 ※ BitmapEffect を検索する前の状態に [プロパティ] パネルを戻すには、[検索] ボックスのテキ ストをクリアする。 此処迄の段階では、プロパティトリガーに幾つかのアクションを関連付けて、マウスポインタがボ タン領域に出入りした時の強調表示動作を作成した。今1 つの一般的なボタン動作は、フォーカス が有る時（クリックされた後等）の強調表示で有る。此の様な動作を追加するには、IsFocused プ ロパティに別のプロパティトリガーを追加する。 ６．IsFocused のプロパティトリガーを作成する。IsMouseOver の場合と同じ手順で (此のセクション の最初の手順を参照)、IsFocused プロパティにプロパティトリガーをもう 1 つ作成する。[トリガ ー記録オン]の間、次のアクションをトリガーに追加する。
・glassCube の Opacity を 100%にする。
・outerRectangle の Stroke を次のカスタム値に設定する。
"{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
此のチュートリアルの最後の手順として、ボタンにアニメーションを追加する。ボタンのアニメーショ ンはイベントに依りトリガーされる。具体的にはMouseEnter イベントと Click イベントで有る。 イベントトリガーとアニメーションを使用して対話機能を追加するには １．MouseEnter イベントトリガーを作成 する。新しいイベントトリガーを追加 し、トリガーで使用するイベントとし てMouseEnter を選択する。 ２．アニメーションタイムラ インを作成する。次に、 アニメーションタイムラ インを MouseEnter イベ ントに関連付ける。
[OK] をクリックして新しいタイムライ ンを作成すると、[タイムラインパネル] が表示され、"Timeline recording is on" がデザインパネルに表示される。此れは、 タイムラインでのプロパティ変更の記録 を開始出来る事を示して居る（プロパティ 変更のアニメーション化）。 ※ 此の表示を見る為に、場合に依っては ウィンドウやパネルの表示サイズを大 きくする必要が有る。 ３．キーフレームを作成する。 アニメーションを作成す るには、アニメーション 化するオブジェクトを選 択し、タイムライン上に2 つ以上のキーフレームを 作成する。然して、夫々 のキーフレームに付いて、 アニメーションで補間す る間隔を示すプロパティ 値を設定する。次の図は、 キーフレームの作成過程 を示して居る。
４．此のキーフレームでglassCube を縮小する。2 番 目 の キ ー フ レ ー ム が 選 択 さ れ た 状 態 で 、 glassCube のサイズを [サイズ変換] を使用して 元の大きさの90%に縮小する。 F5 キーを押してアプリケーションを実行する。マウスポインタをボタンに合わせる。ボタン上の グラスレイヤーが縮小する事を確認する。 ５．イベントトリガーを今1 つ作成し、別のアニメーションを関連付ける。アニメーションを今 1 つ追 加する。前のイベントトリガーアニメーションを作成する為に使用した方法と似た手順を使用する。 ① 新しいイベントトリガーを Click イベントを使用して作成する。 ② 新しいタイムライン Click イベントに関連付ける。 ① 此のタイムラインに 2 つのキーフレームを作成する。位置は夫々0.0 秒と 0.3 秒で有る。 ② 0.3 秒の位置のキーフレームが強調表示された状態で、[回転角度] を 360°に設定する。 F5 キーを押してアプリケーションを実行する。ボタンをクリックする。グラスレイヤーが回転す る事を確認する。
■ 纏め 此れで、カスタマイズされたボタンが完成さ れた。此れには、アプリケーションに存在す る総てのボタンに適用されるボタンテンプ レートを使用した。テンプレートを編集モー ドの儘にして（次の図を参照）他にもボタン を作成すると、作成されるボタンの動作と外 観が、既定のボタンではなくカスタムボタン に似て居る事を確認出来る。 F5 キーを押してアプリケーションを実行する。ボタンをクリックして、孰れも動作が同じで有る事を 確認する。 前 の 手 順 に 於 い て 、 テ ン プ レ ー ト の カ ス タ マ イ ズ 中 に 、 innerRectangle の Fill プロパティと outerRectangle の Stroke プ ロ パ テ ィ を 、 テ ン プ レ ー ト の 背 景 （{TemplateBinding Background}）に設定した。此の為、個々のボタンの背景色を 設定すると、設定した背景が個々のプロパティで使用される。 此処で、背景を変更して観る。次の図では、異なるグラデーシ ョンが使用されて居る。従って、テンプレートはボタンの様な コントロールの全体的なカスタマイズには便利だが、テンプレ ートを使用したコントロール同士で外観が異なる様に変更する 事は引き続き可能で有る。
ボタンテンプレートをカスタマイズする過程で、Microsoft Expression Blend で次の事を行う方法を学 んだ。 ・コントロールの外観をカスタマイズする。 ・プロパティトリガーを設定する。プロパティトリガーは、コントロールに限らず殆どのオブジェクト でも使用でき、非常に便利で有る。 ・イベントトリガーを設定する。イベントトリガーは、コントロールに限らず殆どのオブジェクトでも 使用でき、非常に便利で有る。 ・アニメーションを作成する。 ・其の他：グラデーションの作成、BitmapEffects の追加、変換の使用、オブジェクトの基本プロパテ ィの設定。 http://msdn.microsoft.com/ja-jp/library/bb613598(v=vs.110).aspx http://msdn.microsoft.com/ja-jp/library/ee649089(v=vs.110).aspx
