次の方法で共有

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

  • [アーティクル]

Cc294737.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(JA-JP,Expression.30).png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連項目

概念

SimpleButton