試してみよう : ロールオーバー ボタンの作成

  • [アーティクル]

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

ユーザーの操作に応じてボタンの外観を変更することで、ロールオーバー効果をボタン テンプレート内に作成できます。アニメーション タイムラインのトリガまたはプロパティの変更のトリガによってロールオーバー効果を作成する代わりに、次の手順に従って、ボタンの各状態を表す複数のグリッド パネルを作成した後、各グリッド パネルの Visibility プロパティを切り替えることができます。

ボタンにロールオーバー効果を作成するには

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

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

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

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

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

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

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

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

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

  5. [ツール バー] から、[グリッド] コントロール Cc294737.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ja-jp,Expression.10).png を 3 つ、テンプレートの Grid に追加します。ツールボックスの [グリッド] アイコンをダブルクリックし、[オブジェクトとタイムライン] でグリッド コントロールを右クリックし、[自動サイズ設定] をポイントして、[塗りつぶし] をクリックすると、簡単に追加できます。

  6. ContentPresenter 要素を右クリックして [順序] をポイントし、[最前面に移動] をクリックして、ContentPresenter を新しい Grid オブジェクトの前面に重ねます。

  7. [オブジェクトとタイムライン] で、新しいグリッド オブジェクトをそれぞれ右クリックし、[名前変更] をクリックして、「Default」、「Pressed」、「MouseOver」と名前を変更します。

  8. トリガ動作を設定するには、トリガごとにグリッド オブジェクトを 1 つだけ表示する必要があります。たとえば、[組み合わせ] パネルの [トリガ] で [既定] を選択し、Ctrl キーを押したまま Pressed グリッド オブジェクトと MouseOver グリッド オブジェクトをクリックして、これらのオブジェクトを選択します。次に、[プロパティ] パネルの [外観] で、Visibility プロパティを "Hidden" に設定します。

  9. [組み合わせ] パネルの [トリガ] で、IsMouseOver = True をクリックし、Pressed グリッド オブジェクトと Default グリッド オブジェクトを選択します。[プロパティ] パネルの [外観] で、Visibility プロパティを "Hidden" に設定します。

  10. 最後に、[トリガ] で IsPressed = True が選択された状態で、MouseOver グリッド オブジェクトと Default グリッド オブジェクトを選択します。次に、[プロパティ] パネルの [外観] で、Visibility プロパティを "Hidden" に設定します。

  11. これで、さまざまな条件に基づいて表示されるように、それぞれのグリッド オブジェクトをデザインすることができます。描画ツールおよびアニメーション タイムラインを使用すると、ボタンの独自の動作を作成できます。他のグリッド オブジェクトを表示しないで 1 つのグリッド オブジェクトをデザインするには、[オブジェクトとタイムライン] で、他のグリッド オブジェクトの横の [隠す/表示する] Cc294737.3df73f86-a06e-4df8-b696-261c23fac3cc(ja-jp,Expression.10).png ボタンをクリックします。

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

関連項目

概念

SimpleButton