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

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

次の図は、作成するカスタマイズされたボタンを示しています。

図形をボタンに変換する

このチュートリアルの最初の部分では、カスタム ボタンのカスタム外観を作成します。 これを行うには、まず四角形をボタンに変換します。 次に、ボタンのテンプレートに図形を追加し、より複雑な見た目のボタンを作成します。 通常のボタンから始めてカスタマイズしてみませんか? ボタンには組み込みの機能があるため、必要ありません。カスタム ボタンの場合は、四角形から始める方が簡単です。

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. スタイル/テンプレートのスコープを指定します。 次のようなダイアログ ボックスが表示されます。

   

   [リソース名 (キー)] で、[すべてに適用] を選択します。 これにより、結果のスタイルとボタン テンプレートが、ボタンであるすべてのオブジェクトに適用されます。 定義でアプリケーションを選択します。 これにより、結果のスタイルとボタン テンプレートにアプリケーション全体のスコープが設定されます。 これら 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. 内側の四角形を作成します。 次に、別の四角形 ("innerRectangle" という名前) を作成し、 外側のRectangle の内側に対称的に配置します。 この種の作業では、編集領域でボタンを大きくするためにズームする必要があります。

   注

   四角形は、図の四角形とは異なる場合があります (たとえば、角が丸い場合があります)。

   

5. ContentPresenter を一番上に移動します。 この時点で、"Button" というテキストが表示されなくなる可能性があります。 その場合は、 innerRectangle が myContentPresenter の上にあるためです。 これを修正するには、innerRectangle の下に myContentPresenter をドラッグします。 四角形と myContentPresenter の 位置を次のように変更します。

   注

   または、 myContentPresenter を右クリックして [進む] を押して上に配置することもできます。

   

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

   

7. 上にガラスレイヤーを追加します。 ボタンの外観をカスタマイズする最後の部分は、上部にガラスレイヤーを追加します。 このガラス層は、3 番目の四角形で構成されます。 ガラスはボタン全体を覆うため、ガラスの四角形は 外側のRectangleと寸法が似ています。 したがって、 外側のRectangleのコピーを作成するだけで、四角形を作成します。 outerRectangle を強調表示し、Ctrl + C および Ctrl + V キーを使用してコピーを作成します。 この新しい四角形に "glassCube" という名前を付けます。

8. 必要に応じて glassCube の位置を変更します。glassCube がボタン全体を覆う位置にまだ配置されていない場合は、その位置にドラッグします。

9. glassCube に outerRectangle とは少し異なる形状を与えます。glassCube のプロパティを変更します。 まず、 RadiusX プロパティと RadiusY プロパティを 10 に、 StrokeThickness を 2 に変更します。

   

10. glassCube をガラスのように見せてみましょう。 75% 不透明な線形グラデーションを使用して、 Fill をガラスのような外観に設定し、約等間隔の間隔で 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されたときに実行されるアクションになります。 記録中に Opacity のを 100%に変更します。

   

   これで、最初のプロパティ トリガーが作成されました。 エディターの [トリガー] パネル に、100%に変更されている Opacity が記録されていることに注意してください。

   

   F5 キーを押してアプリケーションを実行し、マウス ポインターをボタンの上下に移動します。 ボタンの上にマウスを置くとガラスレイヤーが表示され、ポインターが離れると消えます。

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

   

5. IsMouseOver は、ぼやけたテキストをトリガーします。IsMouseOver プロパティ トリガーにもう 1 つのアクションを関連付けましょう。 ガラスが上に表示されたときに、ボタンの内容が少しぼやけて表示されるようにします。 これを行うには、ぼかし BitmapEffect を ContentPresenter (myContentPresenter) に適用します。

   

   注

   の検索を行う前のプロパティ BitmapEffectに戻すには、[検索] ボックスからテキストをクリアします。

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

6. IsFocused のプロパティ トリガーを作成します。IsMouseOverの場合と同じ手順を使用して (このセクションの最初の手順を参照)、IsFocused プロパティの別のプロパティ トリガーを作成します。 トリガーの記録がオンになっている間に、トリガーに次のアクションを追加します。

   • glassCube は 100%の Opacity を取得します。

   • outerRectangle は、"{DynamicResource {x:Static SystemColors.HighlightBrushKey}} Stroke カスタム式の値を取得します。

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

イベント トリガーとアニメーションを使用して対話機能を追加するには

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

   

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

   

   [OK] を押して新しいタイムラインを作成すると、タイムライン パネルが表示され、デザイン パネルに [タイムラインの記録がオン] と表示されます。 つまり、タイムラインでプロパティの変更の記録を開始できます (プロパティの変更をアニメーション化します)。

   注

   表示を表示するには、ウィンドウやパネルのサイズを変更する必要がある場合があります。

   

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

   

4. このキーフレームで glassCube を縮小します。2 番目のキーフレームを選択した状態で、Size Transform を使用して glassCube のサイズをフルサイズの 90% に縮小します。

   

   F5 キーを押してアプリケーションを実行します。 ボタンの上にマウス ポインターを移動します。 ボタンの上にガラスレイヤーが縮小していることに注意してください。

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

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

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

      

   3. このタイムラインでは、2 つのキーフレームを作成します。1 つは 0.0 秒、もう 1 つは 0.3 秒です。

   4. キーフレームが 0.3 秒で強調表示されている状態で、[ 回転変換角度 ] を 360 度に設定します。

      

   5. F5 キーを押してアプリケーションを実行します。 ボタンをクリックします。 ガラス層が回転していることに注意してください。

結論

カスタマイズされたボタンが完了しました。 これは、アプリケーション内のすべてのボタンに適用されたボタン テンプレートを使用して行いました。 テンプレート編集モードを終了し (次の図を参照)、さらにボタンを作成すると、既定のボタンのように表示されるのではなく、カスタム ボタンのように表示され、動作することがわかります。

F5 キーを押してアプリケーションを実行します。 ボタンをクリックすると、すべてが同じように動作します。

テンプレートのカスタマイズ中に、Fill の プロパティと Stroke プロパティ outerRectangle をテンプレートの背景 ({TemplateBinding Background}) に設定することに注意してください。 このため、個々のボタンの背景色を設定すると、設定した背景がそれぞれのプロパティに使用されます。 今すぐ背景を変更してみてください。 次の図では、さまざまなグラデーションが使用されています。 そのため、テンプレートはボタンなどのコントロールの全体的なカスタマイズに役立ちますが、テンプレートを含むコントロールは、互いに異なる外観に変更できます。

結論として、ボタン テンプレートをカスタマイズするプロセスでは、Microsoft Expression Blend で次の操作を行う方法を学習しました。

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

• プロパティ トリガーを設定します。 プロパティ トリガーは、コントロールだけでなく、ほとんどのオブジェクトで使用できるため、非常に便利です。

• イベント トリガーを設定します。 イベント トリガーは、コントロールだけでなく、ほとんどのオブジェクトで使用できるため、非常に便利です。

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

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

こちらも参照ください

• XAML を使用してボタンを作成する
• スタイリングとテンプレート作成
• アニメーションの概要
• 単色とグラデーションを用いた描画の概要
• ビットマップ効果の概要