チュートリアル : Microsoft Expression Blend を使用してボタンを作成する

  • [アーティクル]

更新 : 2007 年 11 月

このチュートリアルでは、WPF のカスタマイズされたボタンを Microsoft Expression Blend を使用して作成する手順について説明します。

Bb613598.alert_caution(ja-jp,VS.90).gif重要 :

Microsoft Expression Blend の具体的な動作は Extensible Application Markup Language (XAML) の生成で、これがコンパイルされ、実行可能プログラムが作成されます。Extensible Application Markup Language (XAML) を直接扱う場合については、Extensible Application Markup Language (XAML) を Blend ではなく Visual Studio を使用して、これと同じアプリケーションを作成する別のチュートリアルが用意されています。詳細については、「チュートリアル : XAML を使用したボタンの作成」を参照してください。

これから作成する、カスタマイズされたボタンを次の図に示します。

ユーザーが作成するカスタマイズされたボタン

図形からボタンへの変換

このチュートリアルの前半では、カスタム ボタンの独自の外観を作成します。作成するには、まず四角形をボタンに変換します。次に、他の図形をボタンのテンプレートに追加し、より複雑な外観のボタンを作成します。ここでは、通常のボタンを使用してカスタマイズします。ボタンには今回は使用しない組み込み機能があるので、カスタム ボタンを作成するには、四角形から始める方が簡単です。

Expression Blend で新しいプロジェクトを作成するには

  1. Expression Blend を起動します ([スタート] をクリックし、[すべてのプログラム]、[Microsoft Expression]、[Microsoft Expression Blend] の順にポイントします)。

  2. 必要に応じて、アプリケーションを最大化します。

  3. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

  4. [標準アプリケーション (.exe)] を選択します。

  5. プロジェクトの名前を「CustomButton」と指定して、[OK] をクリックします。

この時点で、空の WPF プロジェクトができます。F5 キーを押すと、アプリケーションを実行できます。予想どおり、アプリケーションは空のウィンドウのみで構成されていることがわかります。次に、角の丸い四角形を作成し、それをボタンに変換します。

四角形をボタンに変換するには

  1. **ウィンドウの背景プロパティを黒に設定します。**ウィンドウを選択して [プロパティ] タブをクリックし、Background プロパティを Black に設定します。

    ボタンの背景を黒に設定する方法

  2. **大きさがボタンのサイズに近い四角形をウィンドウ上に描画します。**左側のツール パネルで四角形ツールを選択し、ウィンドウ上でドラッグして四角形を描画します。

    四角形を描画する方法

  3. **四角形の四隅を丸めます。**四角形の制御点をドラッグするか、RadiusX プロパティと RadiusY プロパティを直接設定します。RadiusX と RadiusY の値を 20 に設定します。

    四角形の角を丸くする方法

  4. **四角形をボタンに変換します。**四角形を選択します。[ツール] メニューの [ボタンの作成] をクリックします。

    図形をボタンにする方法

  5. **スタイル/テンプレートのスコープを指定します。**次のようなダイアログ ボックスが表示されます。

    [Style リソースの作成] ダイアログ ボックス

    [リソース名 (キー)] で、[すべてに適用] を選択します。これにより、生成されるスタイルとボタン テンプレートが、ボタンであるすべてのオブジェクトに適用されます。[定義元] で、[アプリケーション] を選択します。これにより、生成されるスタイルとボタン テンプレートのスコープが、アプリケーション全体になります。この 2 つのボックスに値を設定すると、ボタンのスタイルとテンプレートはアプリケーション全体に含まれるすべてのボタンに適用され、アプリケーションで作成するボタンには既定でこのテンプレートが使用されます。

ボタン テンプレートの編集

現在、ボタンに変更された四角形があります。このセクションでは、ボタンのテンプレートを変更して、外観をさらにカスタマイズします。

ボタンの外観を変更するためにボタン テンプレートを編集するには

  1. **テンプレートの表示ビューに移動します。**ボタンの外観をさらにカスタマイズするには、ボタン テンプレートを編集する必要があります。このテンプレートは、四角形をボタンに変換したときに作成されました。ボタン テンプレートを編集するには、ボタンを右クリックし、[コントロール パーツ (テンプレート) の編集]、[テンプレートの編集] の順にクリックします。

    テンプレートを編集する方法

    テンプレート エディタでは、ボタンが Rectangle と ContentPresenter に分離されています。ContentPresenter は、ボタン内のコンテンツ (文字列 "Button" など) の表示に使用します。四角形と ContentPresenter はどちらも Grid の内側に配置されます。

    四角形で表したコンポーネント

  2. **テンプレート コンポーネントの名前を変更します。**テンプレート インベントリで四角形を右クリックし、Rectangle 名を "[Rectangle]" から "outerRectangle" に変更し、"[ContentPresenter]" を "myContentPresenter" に変更します。

    テンプレートのコンポーネント名を変更する方法

  3. 中が空洞になるよう (ドーナツのように) 四角形を変更します。[outerRectangle] を選択し、Fill を "Transparent" に設定し、StrokeThickness を 5 に設定します。

    四角形を空にする方法

    次に、Stroke にテンプレートの色を設定します。これを行うには、[ストローク] の横にある小さな白いボックスをクリックし、[CustomExpression] を選択し、ダイアログ ボックスに「{TemplateBinding Background}」と入力します。

    テンプレートの色の使用を設定する方法

  4. **内側の四角形を作成します。**次に、四角形をもう 1 つ作成し ("innerRectangle" という名前を付けます)、それを outerRectangle の内側に対称になるように配置します。このような場合、ズームを使用して編集領域に表示されるボタンを大きくすると、作業しやすくなります。

    Bb613598.alert_note(ja-jp,VS.90).gifメモ :

    作成している四角形は、図のものと外観が異なっている場合があります (角が丸くなっているなど)。

    別の四角形の中に四角形を作成する方法

  5. **ContentPresenter を最前面に移動します。**この時点で、テキスト "Button" が表示されなくなることがあります。これは、innerRectangle が myContentPresenter より前面にあるためです。これを解消するには、myContentPresenter を innerRectangle の下にドラッグします。四角形や myContentPresenter の位置を変更して、次のようにします。

    Bb613598.alert_note(ja-jp,VS.90).gifメモ :

    また、myContentPresenter は、右クリックして [前面へ移動] をクリックすることで、前面に配置することもできます。

    別のボタンの上にボタンを移動する方法

  6. innerRectangle の外観を変更します。RadiusX、RadiusY、および StrokeThickness の値を 20 に設定します。また、Fill をカスタム式 "{TemplateBinding Background}" を使用してテンプレートの背景に設定し、Stroke を "transparent" に設定します。innerRectangle の Fill と Stroke が outerRectangle とは逆になっていることを確認します。

    四角形の外観を変更する方法

  7. **グラス レイヤを前面に追加します。**ボタンの外観変更の最後の手順は、グラス レイヤを前面に追加することです。このグラス レイヤは、3 つ目の四角形です。グラスはボタン全体を覆うため、グラス四角形のサイズは outerRectangle とほとんど同じになります。したがって、この四角形を作成するには、単純に outerRectangle のコピーを作成します。outerRectangle を強調表示し、Ctrl + C と Ctrl + V でコピーを作成します。この新しい四角形の名前を "glassCube" と指定します。

  8. **必要に応じて glassCube 位置を変更します。**glassCube がボタンを覆う位置にない場合は、覆う位置までドラッグします。

  9. **glassCube に outerRectangle とは少しだけ異なる外観を指定します。**glassCube のプロパティを変更します。まず、RadiusX プロパティと RadiusY プロパティを 10 に変更し、StrokeThickness を 2 に変更します。

    glassCube の外観設定

  10. glassCube をグラスのような外観にします。Fill をグラスのような外観にするには、75% 不透明の線形グラデーションを使用し、色は白と透明とをほとんど同じような間隔で 6 回交互に入れ替えます。グラデーション終了位置の設定値は次のようになります。

    • グラデーション終了位置 1: 白、アルファ値 75%

    • グラデーション終了位置 2: 透明

    • グラデーション終了位置 3: 白、アルファ値 75%

    • グラデーション終了位置 4: 透明

    • グラデーション終了位置 5: 白、アルファ値 75%

    • グラデーション終了位置 6: 透明

    これで、"波打つ" グラスの外観になります。

    グラスのような四角形

  11. **グラス レイヤを非表示にします。**グラスのようなレイヤの外観はこれで確認できたので、[プロパティ] パネルの [表示] ペインに移動し、[不透明度] を 0% にして非表示にします。ここから先では、グラス レイヤを操作するのに、プロパティ トリガとイベントを使用します。

    グラス四角形を非表示にする方法

ボタン動作のカスタマイズ

この時点で、ボタンのプレゼンテーションはテンプレートの変更によってカスタマイズされていますが、マウスオーバーによる外観の変化、フォーカスの受け取り、クリックなどのユーザー操作に対して、通常のボタンのような反応はしません。次の 2 つの手順で、こうした動作をカスタム ボタンに組み込む方法を説明します。まず、簡単なプロパティ トリガを使用し、その後にイベント トリガやアニメーションを追加します。

プロパティ トリガを設定するには

  1. 新しいプロパティ トリガを作成します。[glassCube] が選択された状態で、[トリガ] パネルで [+ プロパティ] をクリックします (次の手順の下の図を参照してください)。これにより、既定のプロパティ トリガを持つプロパティ トリガが作成されます。

  2. **IsMouseOver をトリガによって使用されるプロパティにします。**プロパティを IsMouseOver に変更します。これにより、IsMouseOver プロパティが true になる (ユーザーがマウスでボタンをポイントする) と、プロパティ トリガがアクティブになります。

    プロパティでトリガを設定する方法

  3. IsMouseOver で glassCube の不透明度 100% をトリガします。[トリガ記録オン] と表示されていることを確認します (前の図を参照)。これは、記録がオンの間に glassCube のプロパティ値に行われるあらゆる変更が、IsMouseOver が true の場合に実行されるアクションになることを意味します。記録中に、glassCube の Opacity を 100% に変更します。

    ボタンの不透明度を設定する方法

    これで、最初のプロパティ トリガが作成されました。エディタの [トリガ] パネルに、Opacity が 100% に変更されたことが記録されたことを確認します。

    [トリガ] パネル

    F5 キーを押してアプリケーションを実行し、マウス ポインタをボタンに合わせたり、ボタンから離したりします。ボタンにマウス ポインタを合わせるとグラス レイヤが現れ、離すと消えることを確認します。

  4. **IsMouseOver でストローク値の変更をトリガします。**他のアクションを IsMouseOver トリガと関連付けてみましょう。記録が続行されている間、選択を glassCube から outerRectangle に切り替えます。次に、outerRectangle の Stroke をカスタム式 "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" に設定します。これにより、Stroke が、ボタンによって使用される通常の強調表示色に設定されます。F5 キーを押し、マウスをボタンに合わせたときの効果を確認します。

    ストロークを強調表示色に設定する方法

  5. IsMouseOver でぼやけたテキストをトリガします。IsMouseOver プロパティ トリガにアクションをもう 1 つ追加します。グラスがボタンを覆ったときに、ボタンのコンテンツが少しぼやけるようにします。これを行うには、ぼかしの BitmapEffect を ContentPresenter (myContentPresenter) に適用します。

    ボタンの内容をぼかす方法

    Bb613598.alert_note(ja-jp,VS.90).gifメモ :

    BitmapEffect を検索する前の状態に [プロパティ] パネルを戻すには、[検索] ボックスのテキストをクリアします。

    ここまでの段階では、プロパティ トリガにいくつかのアクションを関連付けて、マウス ポインタがボタン領域に出入りしたときの強調表示動作を作成しました。もう 1 つの一般的なボタン動作は、フォーカスがあるとき (クリックされた後など) の強調表示です。このような動作を追加するには、IsFocused プロパティに別のプロパティ トリガを追加します。

  6. IsFocused のプロパティ トリガを作成します。IsMouseOver の場合と同じ手順で (このセクションの最初の手順を参照)、IsFocused プロパティにプロパティ トリガをもう 1 つ作成します。[トリガ記録オン] の間、次のアクションをトリガに追加します。

    • glassCube の Opacity を 100% にする。

    • outerRectangle の Stroke をカスタム値 "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" に設定する。

このチュートリアルの最後の手順として、ボタンにアニメーションを追加します。ボタンのアニメーションはイベントによりトリガされます。具体的には MouseEnter イベントと Click イベントです。

イベント トリガとアニメーションを使用して動作を改良するには

  1. **MouseEnter イベント トリガを作成します。**新しいイベント トリガを追加し、トリガで使用するイベントとして MouseEnter を選択します。

    MouseEnter イベント トリガを作成する方法

  2. **アニメーション タイムラインを作成します。**次に、アニメーション タイムラインを MouseEnter イベントに関連付けます。

    アニメーション タイムラインをイベントに追加する方法

    [OK] をクリックして新しいタイムラインを作成すると、[タイムライン パネル] が表示され、"Timeline recording is on" がデザイン パネルに表示されます。これは、タイムラインでのプロパティ変更の記録を開始できることを示しています (プロパティ変更のアニメーション化)。

    Bb613598.alert_note(ja-jp,VS.90).gifメモ :

    この表示を見るために、場合によってはウィンドウやパネルの表示サイズを大きくする必要があります。

    タイムライン パネル

  3. **キーフレームを作成します。**アニメーションを作成するには、アニメーション化するオブジェクトを選択し、タイムライン上に 2 つ以上のキーフレームを作成します。そして、それぞれのキーフレームについて、アニメーションで補間する間隔を示すプロパティ値を設定します。次の図は、キーフレームの作成過程を示しています。

    キーフレームを作成する方法

  4. **このキーフレームで glassCube を縮小します。**2 番目のキーフレームが選択された状態で、glassCube のサイズを [サイズ変換] を使用して元の大きさの 90% に縮小します。

    ボタンのサイズを縮小する方法

    F5 キーを押してアプリケーションを実行します。マウス ポインタをボタンに合わせます。ボタン上のグラス レイヤが縮小することを確認します。

  5. **イベント トリガをもう 1 つ作成し、別のアニメーションを関連付けます。**アニメーションをもう 1 つ追加します。前のイベント トリガ アニメーションを作成するために使用した方法と似た手順を使用します。

    1. 新しいイベント トリガを Click イベントを使用して作成します。

    2. 新しいタイムライン Click イベントに関連付けます。

    新しいタイムラインを作成する方法

    1. このタイムラインに 2 つのキーフレームを作成します。位置はそれぞれ 0.0 秒と 0.3 秒です。

    2. 0.3 秒の位置のキーフレームが強調表示された状態で、[回転角度] を 360° に設定します。

    回転変換を作成する方法

    1. F5 キーを押してアプリケーションを実行します。ボタンをクリックします。グラス レイヤが回転することを確認します。

まとめ

これで、カスタマイズされたボタンが完成されました。これには、アプリケーションに存在するすべてのボタンに適用されるボタン テンプレートを使用しました。テンプレートを編集モードのままにして (次の図を参照) 他にもボタンを作成すると、作成されるボタンの動作と外観が、既定のボタンではなくカスタム ボタンに似ていることを確認できます。

カスタム ボタン テンプレート同じテンプレートを使用する複数のボタン

F5 キーを押してアプリケーションを実行します。ボタンをクリックして、どれも動作が同じであることを確認します。

前の手順において、テンプレートのカスタマイズ中に、innerRectangle の Fill プロパティと outerRectangle の Stroke プロパティを、テンプレートの背景 ({TemplateBinding Background}) に設定しました。このため、個々のボタンの背景色を設定すると、設定した背景が個々のプロパティで使用されます。ここで、背景を変更してみます。次の図では、異なるグラデーションが使用されています。したがって、テンプレートはボタンのようなコントロールの全体的なカスタマイズには便利ですが、テンプレートを使用したコントロールどうしで外観が異なるように変更することは引き続き可能です。

外観が異なる同じテンプレートを含むボタン

ボタン テンプレートをカスタマイズする過程で、Microsoft Expression Blend で次のことを行う方法を学びました。

  • コントロールの外観をカスタマイズする。

  • プロパティ トリガを設定する。プロパティ トリガは、コントロールに限らずほとんどのオブジェクトでも使用でき、非常に便利です。

  • イベント トリガを設定する。イベント トリガは、コントロールに限らずほとんどのオブジェクトでも使用でき、非常に便利です。

  • アニメーションを作成する。

  • その他 : グラデーションの作成、BitmapEffects の追加、変換の使用、オブジェクトの基本プロパティの設定。

参照

処理手順

チュートリアル : XAML を使用したボタンの作成

概念

スタイルとテンプレート

アニメーションの概要

純色およびグラデーションによる塗りつぶしの概要

ビットマップ効果の概要