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

  • [アーティクル]

Cc294737.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(ja-jp,Expression.40).png

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

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

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

    tip noteヒント :

    Simple スタイルのコントロールは、[アセット] パネルCc294737.0d8b8d29-1af9-418f-8741-be3097d76eab(ja-jp,Expression.40).pngの [スタイル] カテゴリにある [Simple Styles] に表示されます。一覧からコントロールを選択したら、アートボードに描画できます。

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

    コピーの作成の詳細については、「テンプレートの作成または変更」を参照してください。

    tip noteヒント :

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

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

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

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

  5. [ツール] パネルから Grid コントロール Cc294737.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ja-jp,Expression.40).png を 3 つ、テンプレートの ルート Grid オブジェクトに追加します。新しい 3 つの Grid オブジェクトが親の Grid オブジェクトの幅いっぱいに広がるようにするには、[オブジェクト] メニューの [自動サイズ設定] をポイントして、Fill をクリックします。

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

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

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

  9. [トリガー] パネルで IsMouseOver = True をクリックし、Pressed と Default の Grid オブジェクトを選択し、[プロパティ] パネルの [外観] で Visibility プロパティを Hidden に設定します。MouseOver Grid オブジェクトを選択し、Visibility プロパティを Visible に設定します。

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

  11. これで、[トリガー] パネルで選択したさまざまな条件に基づいて表示されるように、それぞれの [Grid] オブジェクトをデザインすることができます。

    描画ツールとアニメーション タイムラインを使用して、ボタンの独自の動作を作成します。

    詳細については、「オブジェクトの描画」および「アニメーション オブジェクト」を参照してください。

    [Grid] オブジェクトをデザインするときに、他の [Grid] オブジェクトが表示されないようにするには、[オブジェクトとタイムライン] パネルで、他の [Grid] オブジェクトの横にある [隠す/表示] Cc294737.3df73f86-a06e-4df8-b696-261c23fac3cc(ja-jp,Expression.40).png をクリックします。

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

関連項目

概念

SimpleButton

Copyright ©2011 by Microsoft Corporation. All rights reserved.