試してみよう: 効果を使用したボタンのスタイル

ユーザーの操作に応じてボタンの外観が変わるようにトリガーのプロパティを設定できるだけでなく、Microsoft Expression Blend では、ボタンの状態ごとに効果を適用することができます。

ボタンに適用する効果を作成するには

1. Expression Blend のアートボードに SimpleButton オブジェクトを描画します。

   ヒント :
   Simple スタイルのコントロールは、[アセット] パネルの [スタイル] カテゴリにある [Simple Styles] に表示されます。一覧からコントロールを選択したら、アートボードに描画できます。

2. [オブジェクトとタイムライン] パネルでボタンを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。SimpleStyles.xaml リソース ディクショナリを変更しない場合は、[テンプレートの編集] ではなく、[コピーして編集] をクリックし、新しいテンプレートを作成してドキュメントに保存します。

   コピーの作成の詳細については、「リソースの作成」を参照してください。

   ヒント :
   テンプレートの編集モードを終了して、ドキュメントのスコープに戻るには、[オブジェクトとタイムライン] パネルのオブジェクト ツリーの上にある [スコープを <オブジェクト名> に戻す] をクリックします。 既存のテンプレートを編集するためにテンプレート編集モードに戻るには、[オブジェクトとタイムライン] パネルでテンプレートを編集するオブジェクトを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。

3. コントロール テンプレートの編集スコープで、Grid オブジェクトの子オブジェクトの Border を削除します。

4. Grid オブジェクトをクリックしてアクティブにし、子オブジェクトを追加できるようにします。

5. グリッドに Rectangle オブジェクトを描画し、[プロパティ] パネルの [ブラシ] で、Fill プロパティを黄色に設定します。

6. Rectangle オブジェクトを右クリックして [順序] をポイントし、[最背面に移動] をクリックして ContentPresenter オブジェクトの後ろ側に動かします。

7. Rectangle オブジェクトの角を丸くします。このためには、四角形の左上隅の外側にある 2 つのハンドルのいずれかの上にポインターを動かすと表示される を使用するか、[プロパティ] パネルの [外観] で、RadiusX プロパティと RadiusY プロパティの値を変更します。

8. [アセット] パネルの [効果] カテゴリで、DropShadowEffect オブジェクトを Rectangle オブジェクトにドラッグします。

   Rectangle オブジェクトの子オブジェクトとして、ドロップ シャドウが追加されます。

9. [オブジェクトとタイムライン] パネルで DropShadowEffect を選択した状態で、効果のプロパティを [プロパティ] パネルで調整します。ShadowDepth プロパティを 20 に設定します。

10. [トリガー] パネルで IsMouseOver = True トリガーをクリックし、トリガーの記録をアクティブにします。[プロパティ] パネルで ShadowDepth プロパティを 25 に設定します。

    [トリガー] パネルの [アクティブな際のプロパティ] に新しい行が追加され、ポインターがボタンの上に来るとボタンのプロパティが変わることを示します。

    ヒント :
    [トリガー] パネルにあるすべてのトリガーとアクションを見るには、ウィンドウのサイズを変更しなければならない場合があります。ウィンドウのサイズを変更するには、マウスを使用します。

11. [トリガー] パネルで IsPressed = True トリガーをクリックし、トリガーの記録をアクティブにします。[プロパティ] パネルで ShadowDepth プロパティを 10 に設定します。

    [トリガー] パネルの [アクティブな際のプロパティ] に新しい行が追加され、アプリケーションの実行中にボタンがクリックされるとボタンのプロパティが変わることを示します。

12. [トリガー] パネルの [既定] をクリックし、トリガーの記録をオフにします。

13. F5 キーを押してアプリケーションをテストし、変更結果を確認します。

関連項目

タスク

WPF コントロールのトリガーの追加と削除

概念

SimpleButton
トリガーを使用した WPF コントロールのビヘイビアーの定義
エフェクトの適用

Copyright ©2011 by Microsoft Corporation. All rights reserved.