トリガの追加と削除
.png "このページは WPF プロジェクトにのみ適用されます。")
トリガを使用して、アニメーション タイムラインの開始と停止を行ったり、オブジェクトのプロパティを変更したりできます。トリガには、次の 2 種類があります。
プロパティ トリガ 1 つのプロパティ (IsPressed プロパティなど) の変化によって、別のプロパティが瞬時に変化する、またはアニメーション化されたタイムラインによって徐々に変化するメカニズムです。プロパティ トリガは、コントロールのスタイルまたはテンプレートの中に設定できます。一般的なコントロールの簡易スタイルに対するプロパティ トリガの設定の例については、「簡易スタイル」の「試してみよう」に記載されているトピックを参照してください。
イベント トリガ イベント (マウスの Click イベントなど) によってアニメーション タイムラインがトリガされるメカニズムです。イベント トリガは、アートボード上のオブジェクト、コントロールのスタイルまたはテンプレート、ユーザー コントロール、またはドキュメントのルートに設定できます。一般的なコントロールの簡易スタイルに対するイベント トリガの設定の例については、「簡易スタイル」の「試してみよう」に記載されているトピックを参照してください。
詳細については、「トリガの概要」を参照してください。
.gif "メモ") メモ : |
|---|
トリガは、トリガが操作するアニメーション タイムラインと同じスコープ内に追加されます。たとえば、ボタンがドキュメント内にある場合でも、メイン ドキュメントの編集スコープでボタン用のコントロール テンプレート内のアニメーション タイムラインを開始するトリガを設定することはできません。ただし、アニメーションを開始するコントロール テンプレートと同じコントロール テンプレートの中にトリガを設定できます。これは、ドキュメントに追加されたユーザー コントロールに含まれるアニメーションにも適用されます。 |
プロパティ トリガを追加するには
[オブジェクトとテンプレート] で、スタイルまたはテンプレートを変更するコントロールを選択します。
[オブジェクト] メニューで、次のいずれかの操作を行います。
コントロールのスタイルを編集するには、[スタイルの編集] をポイントし、[コピーの編集] をクリックします。
コントロールのテンプレートを編集するには、[コントロール パーツ (テンプレート) の編集] をポイントし、[コピーの編集] をクリックします。
[スタイル リソースの作成] ダイアログ ボックスが表示されます。
メモ :スタイルとテンプレートの詳細、およびそれらを比較した表については、「コントロールの概要」の「スタイルとテンプレート」のセクションを参照してください。
[OK] をクリックしてダイアログ ボックスを閉じ、スタイルまたはテンプレートを開いて編集します。
メモ :以下の手順は、プロパティ トリガの設定に注目するために大幅に単純化されています。スタイルとテンプレートの違いの詳細については、「コントロールの概要」の「スタイルとテンプレート」のセクションを参照してください。[スタイル リソースの作成] ダイアログ ボックスのオプションの詳細については、「スタイル リソースの作成」と「コントロール テンプレートの作成または編集」を参照してください。
[トリガ] には、IsEnabled=True などのコントロール状態に対してプロパティ トリガが既に設定されている場合があります。トリガに適した状態がない場合は、[プロパティ トリガの追加]
.png "Cc295196.9871399d-14aa-4955-9934-04f33700f273(ja-jp,Expression.10).png")
ボタンをクリックします。既定のプロパティ トリガ (MinWidth = 0) がリストに追加され、編集するために選択されます。同時に、トリガの記録モードにアートボードが移行します。
[次のときにアクティブ化] のドロップダウン矢印をクリックし、トリガをアクティブ化するプロパティと値を変更します。たとえば、CheckBox コントロールのテンプレートを変更する場合は、target-element.IsChecked = true を選択すると、チェック ボックスがクリックされたときにトリガがアクティブ化されます。
次に、トリガがアクティブ化されたときに発生する動作を指定します。
メモ :プロパティを target-element からテンプレート内の要素の名前に変更する場合は、[オブジェクトとタイムライン] で要素を先に選択しておく必要があります。
トリガがアクティブ化されたときにプロパティを変更するには、[オブジェクトとタイムライン] でオブジェクトを選択し、[プロパティ] パネルでプロパティを変更します。この操作が有効なのは、トリガの記録モードに移行しているためです。
プロパティの変更が、[アクティブな際のプロパティ] の下に表示されます。
トリガがアクティブ化されたときにアニメーション タイムラインを制御するには、[アクティブ化する際のアクション] の横にある [新しいアクションの追加]
.png "Cc295196.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.10).png")
ボタンをクリックします。選択できる既存のアニメーション タイムラインがない場合は、[タイムラインが必要です] ダイアログ ボックスが開かれ、新しいタイムラインの作成を確認するメッセージが表示されます。[OK] をクリックし、キーフレームの設定とオブジェクトの変更を行ってアニメーションを作成します。
選択できる既存のアニメーション タイムラインがある場合は、既存のタイムラインと新しいタイムラインを作成するためのオプションを含むドロップダウン リストが表示されます。
[アクティブ化する際のアクション] の下にタイムラインが表示され、[開始] が設定されます。
スタイルまたはテンプレートの編集スコープを終了するには、[上へスコープ]
.png "Cc295196.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.10).png")
ボタンをクリックします。アプリケーションを実行して新しいトリガをテストするには、F5 キーを押します。
.gif "Cc295196.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif")
先頭に戻る
イベント トリガを追加するには
[オブジェクトとタイムライン] で、操作されたときにトリガをアクティブ化するオブジェクトを選択します。たとえば、ユーザーがマウス ポインタをテキスト ボックスに合わせたときにトリガをアクティブ化する場合は、テキスト ボックスを選択します。
[トリガ] で、[イベント トリガの追加]
.png "Cc295196.671c69bb-32e9-4ef9-9837-29403524abd0(ja-jp,Expression.10).png")
ボタンをクリックします。- 既定のトリガ ([Window.Loaded の発生時]) が追加されます。
ドロップダウン矢印をクリックして、トリガをアクティブ化するイベントを変更します。たとえば、ユーザーがマウス ポインタをテキスト ボックスに合わせたときにトリガをアクティブ化する場合は、[Window.Loaded の発生時] を [textBox.MouseMove の発生時] に変更します。
メモ :イベントを Window からテンプレート内の要素の名前に変更する場合は、[オブジェクトとタイムライン] で要素を先に選択しておく必要があります。
トリガがアクティブ化されたときにアニメーション タイムラインを制御するには、[checkBox.MouseMove の発生時] の横にある [新しいアクションの追加]
ボタンをクリックします。選択できる既存のアニメーション タイムラインがない場合は、[タイムラインが必要です] ダイアログ ボックスが開かれ、新しいタイムラインの作成を確認するメッセージが表示されます。[OK] をクリックし、キーフレームの設定とオブジェクトの変更を行ってアニメーションを作成します。
選択できる既存のアニメーション タイムラインがある場合は、既存のタイムラインと新しいタイムラインを作成するためのオプションを含むドロップダウン リストが表示されます。
[checkBox.MouseMove の発生時] の下にタイムラインが表示され、[開始] が設定されます。
アプリケーションを実行して新しいトリガをテストするには、F5 キーを押します。
先頭に戻る
トリガを削除するには
[トリガ] で、削除するトリガを選択します。
メモ :削除するトリガがスタイルまたはコントロール テンプレートの中にある場合は、そのスタイルまたはテンプレートの編集モードに移行していることを確認してください。
[トリガの削除]
.png "Cc295196.d31907a6-867b-4e16-b860-f07c9531fbd7(ja-jp,Expression.10).png")
ボタンをクリックします。リストからトリガが削除されます。
先頭に戻る