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

This page applies to WPF projects only

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

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

  1. Expression Blend で、アートボードに SimpleButton オブジェクトを描きます。

    Cc295324.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

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

    Cc295324.alert_tip(JA-JP,Expression.30).gifヒント :

    テンプレートの編集モードを終了してドキュメントのスコープに戻るには、[オブジェクトとタイムライン] パネルのオブジェクト ツリーの上にある [Scope up] Cc295324.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png をクリックします。

    既存のテンプレートを編集するためにテンプレート編集モードに戻るには、[オブジェクトとタイムライン] パネルでテンプレートを編集するオブジェクトを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。

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

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

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

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

  7. [Rectangle] オブジェクトの角を丸くします。このためには、四角形の左上隅の外側にある 2 つのハンドルのいずれかの上にポインターを動かすと表示される Cc295324.8ff4c5e0-3b7f-49d7-97cb-ad373c3a7fe7(JA-JP,Expression.30).png を使用するか、[プロパティ] パネルの [外観で、[RadiusX] プロパティと [RadiusY] プロパティの値を変更します。

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

    [Rectangle] オブジェクトにドロップ シャドウが付き、DropShadowEffect オブジェクトが Rectangle オブジェクトの子オブジェクトになります。

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

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

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

    Cc295324.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

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

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

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

関連項目

タスク

トリガーの追加と削除

概念

SimpleButton

トリガーを使用した WPF コントロールのビヘイビアーの定義

エフェクトの適用

  • Last updated on