試してみよう : ビットマップ効果を使用したボタンの作成

  • [アーティクル]

このページは WPF プロジェクトにのみ適用されます。

Microsoft Expression Blend では、プロパティ トリガを使用し、ユーザー操作に基づいてボタンの外観を変更する以外にも、それぞれの状態にビットマップ効果を適用することができます。

ボタンにビットマップ効果を作成するには

  1. Expression Blend で、アートボード上に SimpleButton を描画します。

    Cc295324.alert_tip(ja-jp,Expression.10).gifヒント :

    簡易スタイルを使用するには、[アセット ライブラリ] Cc295324.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png の [コントロール] タブで [簡易スタイル] をクリックします。一覧から簡易スタイル コントロールを選択したら、アートボード上で描画できます。

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

    Cc295324.alert_tip(ja-jp,Expression.10).gifヒント :

    テンプレートの編集モードを終了し、ドキュメントのスコープに戻るには、[上へスコープ] ボタン Cc295324.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.10).png をクリックします。このボタンは、[組み合わせ] パネルの要素ツリーの上にあります。

    既存テンプレートのテンプレート編集モードに戻るには、[オブジェクトとタイムライン] でテンプレートを編集する要素を右クリックし、[コントロール パーツ (テンプレート) の編集] をクリックし、[テンプレートの編集] をクリックします。

  3. コントロール テンプレートの編集スコープで、Grid の子要素である Border を削除します。

  4. Grid 要素をダブルクリックしてアクティブにし、子要素を追加できるようにします。

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

  6. Rectangle 要素を右クリックして [順序] をポイントし、[最背面に移動] をクリックして ContentPresenter 要素の後ろに重ねます。

  7. マウス ポインタを四角形の左上隅の外側にある 2 つのハンドルのいずれかの上に移動すると表示されるガイド Cc295324.8ff4c5e0-3b7f-49d7-97cb-ad373c3a7fe7(ja-jp,Expression.10).png を使用するか、[プロパティ] パネルの [外観] で RadiusX プロパティと RadiusY プロパティを使用して、"四角形" 要素の角を丸くします。

  8. 四角形を選択した状態で、[プロパティ] パネルの [外観] にある [詳細] セクション Cc295324.81e110f1-4068-4299-957d-0693cea95088(ja-jp,Expression.10).png で、BitmapEffect プロパティを探します。ドロップダウン矢印をクリックし、[ベベル] をクリックします。BevelWidth プロパティの設定は 5 のままにし、目的の効果を得られるように他の傾斜プロパティを変更します。

  9. [組み合わせ] パネルの [トリガ] で、IsMouseOver = True トリガをクリックして、トリガの記録をアクティブにします。[プロパティ] パネルで、もう一度 BitmapEffect プロパティの横のドロップダウン矢印をクリックし、[ベベル] をクリックして、BevelWidth プロパティを 10 に変更します。

    [トリガ] の [アクティブな際のプロパティ] に、マウスがボタン上に移動したときに発生するプロパティの変更を反映する新しい行が表示されます。

    Cc295324.alert_tip(ja-jp,Expression.10).gifヒント :

    [トリガ] のすべてのトリガとアクションを表示するには、[組み合わせ] パネルの各ウィンドウの調整が必要な場合があります。ウィンドウのサイズを変更するには、マウスを使用します。

  10. [組み合わせ] パネルの [トリガ] で [IsPressed = True] トリガをクリックして、トリガの記録をアクティブにした後、[プロパティ] パネルで BitmapEffect プロパティの横のドロップダウン矢印を再度クリックし、[ベベル] をクリックした後、BevelWidth プロパティを 2 に変更します。

    [トリガ] の [アクティブな際のプロパティ] に、マウスがボタンをクリックしたときに発生するプロパティの変更を反映する新しい行が表示されます。

  11. [組み合わせ] パネルの [トリガ] で [既定] をクリックして、トリガの記録をオフにします。

  12. アプリケーションを実行して (F5)、効果を確認してください。

    Cc295324.alert_tip(ja-jp,Expression.10).gifヒント :

    ビットマップ効果は、ハードウェア アクセラレータが適用されません。このため、明示的に設定した値を使用することをお勧めします。イベント トリガおよびアニメーション タイムラインを使用して値をアニメーション化することはお勧めしません。

関連項目

概念

SimpleButton

トリガの追加と削除

トリガの概要

オブジェクトへのビットマップ効果の追加