WPF コントロールのトリガーの追加と削除

  • [アーティクル]

このページは WPF プロジェクトにのみに適用

トリガー **を使用して、アニメーション タイムラインの開始と停止を行ったり、オブジェクトのプロパティを変更したりできます。トリガーには、次の 2 種類があります。

  • プロパティ トリガー   1 つのプロパティ (IsPressed プロパティなど) の変化によって、別のプロパティが瞬時に変化する、またはアニメーション化されたタイムラインによって徐々に変化するメカニズムです。プロパティ トリガーは、コントロールのスタイルまたはテンプレートの中に設定できます。

    一般的なコントロールの Simple スタイルに対するプロパティ トリガーの設定の例については、「WPF 簡易スタイルのスタイル処理のヒント」に記載されているトピックを参照してください。

  • イベント トリガー イベント (マウスの Click イベントなど) によってアニメーション タイムラインがトリガーされるメカニズムです。イベント トリガーは、アートボード上のオブジェクト、コントロールのスタイルまたはテンプレート、ユーザー コントロール、またはドキュメントのルートに設定できます。

    一般的なコントロールの Simple スタイルに対するイベント トリガーの設定の例については、「WPF 簡易スタイルのスタイル処理のヒント」に記載されているトピックを参照してください。

詳細については、「トリガーを使用した WPF コントロールのビヘイビアーの定義」を参照してください。

Noteメモ :

トリガーは、トリガーが操作するアニメーション タイムラインと同じスコープ内に追加されます。たとえば、ボタンがドキュメント内にある場合でも、メイン ドキュメントの編集スコープではボタン用のコントロール テンプレート内のアニメーション タイムラインを開始するトリガーを設定することができません。ただし、アニメーションを開始するコントロール テンプレートと同じコントロール テンプレートの中にトリガーを設定できます。これは、ドキュメントに追加されたユーザー コントロールに含まれるアニメーションにも適用されます。

プロパティ トリガーを追加するには

  1. [オブジェクトとテンプレート] パネルで、スタイルまたはテンプレートを変更するコントロールを選択します。

  2. [オブジェクト] メニューで、次のいずれかの操作を行います。

    • コントロールのスタイルを編集するには、[スタイルの編集] をポイントし、[コピーの編集] をクリックします。

    • コントロールのテンプレートを編集するには、[テンプレートの編集] をポイントし、[コピーして編集] をクリックします。

    [スタイル リソースの作成] ダイアログ ボックスが表示されます。

    スタイルとテンプレートの詳細、およびそれらを比較した表については、「インタラクティブ コントロールの選択と使用」の「スタイルとテンプレート」を参照してください。

  3. [OK] をクリックしてダイアログ ボックスを閉じ、スタイルまたはテンプレートを開いて編集します。

    Noteメモ :

    以下の手順は、プロパティ トリガーの設定に注目するために大幅に単純化されています。スタイルとテンプレートの違いの詳細については、「インタラクティブ コントロールの選択と使用」の「スタイルとテンプレート」を参照してください。[スタイル リソースの作成] ダイアログ ボックスのオプションの詳細については、「スタイルの作成」および「テンプレートの作成または変更」を参照してください。

  4. [トリガー] パネルには、IsEnabled=True などのコントロール状態に対してプロパティ トリガーが既に設定されている場合があります。トリガーに適した状態がない場合は、[プロパティ トリガーの追加] Cc295196.9871399d-14aa-4955-9934-04f33700f273(ja-jp,Expression.40).png をクリックします。

    既定のプロパティ トリガー (MinWidth=0) がリストに追加され、編集用に選択されます。同時に、トリガーの記録モードにアートボードが移行します。

  5. [次のときにアクティブ化] のドロップダウン矢印をクリックし、トリガーをアクティブ化するプロパティと値を変更します。たとえば、[CheckBox] コントロールのテンプレートを変更する場合は、target-element.IsChecked=true を選択すると、チェック ボックスがクリックされたときにトリガーがアクティブ化されます。

    次に、トリガーがアクティブ化されたときに発生する動作を指定します。

    Noteメモ :

    プロパティを target-element からテンプレート内の要素の名前に変更する場合は、[オブジェクトとタイムライン] パネルで要素を先に選択しておく必要があります。

  6. トリガーがアクティブ化されたときにプロパティを変更するには、[オブジェクトとタイムライン] パネルでオブジェクトを選択し、[プロパティ] パネルでプロパティを変更します。この操作が有効なのは、トリガーの記録モードに移行しているためです。

    プロパティの変更が、[アクティブな際のプロパティ] の下に表示されます。

  7. トリガーがアクティブ化されたときにアニメーション タイムラインを制御するには、[アクティブ化する際のアクション] の横にある [新しいアクションの追加] Cc295196.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png をクリックします。

    • 選択できる既存のアニメーション タイムラインがない場合は、[タイムラインが必要です] ダイアログ ボックスが開き、新しいタイムラインの作成を確認するメッセージが表示されます。[OK] をクリックし、キーフレームの設定とオブジェクトの変更を行ってアニメーションを作成します。

    • 選択できる既存のアニメーション タイムラインがある場合は、既存のタイムラインと新しいタイムラインを作成するためのオプションを含むドロップダウン リストが表示されます。

    [アクティブ化する際のアクション] の下にタイムラインが表示され、[開始] が設定されます。

  8. スタイルまたはテンプレートの編集スコープを終了するには、[スコープを <オブジェクト名> に戻す] Cc295196.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックします。F5 キーを押してアプリケーションを実行し、新しいトリガーをテストします。

イベント トリガーを追加するには

  1. [オブジェクトとタイムライン] パネルで、操作されたときにトリガーをアクティブ化するオブジェクトを選択します。たとえば、ユーザーがポインターをテキスト ボックスに合わせたときにトリガーをアクティブ化する場合は、テキスト ボックスを選択します。

  2. [トリガー] パネルで、[イベント トリガーの追加] Cc295196.671c69bb-32e9-4ef9-9837-29403524abd0(ja-jp,Expression.40).png をクリックします。

    • 既定のトリガーが追加されます (When Window.Loaded is raised)。

  3. ドロップダウン矢印をクリックして、トリガーをアクティブ化するイベントを変更します。たとえば、ユーザーがポインターをテキスト ボックスに合わせたときにトリガーをアクティブ化する場合は、When Window.Loaded is raised を When textBox.MouseMove is raised に変更します。

    Noteメモ :

    イベントを Window からテンプレート内の要素の名前に変更する場合は、[オブジェクトとタイムライン] パネルで要素を先に選択しておく必要があります。

  4. トリガーがアクティブ化されたときにアニメーション タイムラインを制御するには、When checkBox.MouseMove is raised の横にある [新しいアクションの追加] Cc295196.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png をクリックします。

    • 選択できる既存のアニメーション タイムラインがない場合は、[タイムラインが必要です] ダイアログ ボックスが開き、新しいタイムラインの作成を確認するメッセージが表示されます。[OK] をクリックし、キーフレームの設定とオブジェクトの変更を行ってアニメーションを作成します。

    • 選択できる既存のアニメーション タイムラインがある場合は、既存のタイムラインと新しいタイムラインを作成するためのオプションを含むドロップダウン リストが表示されます。

    When checkBox.MouseMove is raised の下にタイムラインが表示され、Begin に設定されます。

  5. F5 キーを押してアプリケーションを実行し、新しいトリガーをテストします。

トリガーを削除するには

  1. [トリガー] パネルで、削除するトリガーを選択します。

    Noteメモ :

    削除するトリガーがスタイルまたはコントロール テンプレートの中にある場合は、そのスタイルまたはテンプレートの編集モードに移行していることを確認してください。

  2. [トリガーの削除] Cc295196.d31907a6-867b-4e16-b860-f07c9531fbd7(ja-jp,Expression.40).png をクリックします。

  3. リストからトリガーが削除されます。

Copyright ©2011 by Microsoft Corporation. All rights reserved.