トリガーを使用した WPF コントロールのビヘイビアーの定義

アプリケーションの有効期間中、ユーザー インターフェイスのオブジェクトはさまざまな状態に変化します。状態は、ボタンにマウスが置かれた状態やメニュー項目が押された状態など、ユーザー指向の用語で表されます。これら 2 つの例の状態は、それぞれ、UIElement.IsMouseOver プロパティおよび MenuItem.IsPressed プロパティを使用してオブジェクトに実装されます。

しかし、これらのプロパティの値、つまりこれらが表す状態自体はユーザーにはわかりません。IsMouseOver と IsPressed は視覚プロパティではありません。非視覚プロパティの変更を目で確認するには、非視覚プロパティの変化によって、視覚プロパティ (Background や Opacity など) を変更させる必要があります。たとえば、ボタンの上にマウス ポインターを置くと、その前の平坦な表示から曲線の表示になります。またメニュー項目を押すと、背景色が変化します。

状態の変化だけでなく、オブジェクトはイベントも発生させます。たとえば、マウス ポインターがボタンの境界を通過すると、MouseEnter イベントと MouseLeave イベントが発生します。イベントにもそれ自身の外観はないため、ユーザーにその変化を示すには、視覚プロパティを変更する必要があります。

トリガー (およびアニメーション タイムライン) は、ドキュメントのルートの中、またはコントロールに適用されるスタイルの中に作成できます。たとえば、ボタンのスタイルを変更して、ボタンが押された状態とマウスが置かれた状態のときにボタンの外観をわずかに変更することができます。このスタイルが適用されたすべてのボタンは、同じように動作します。例については、「試してみよう: ボタンへのアニメーションの追加」を参照してください。

トリガーには、次の 2 種類があります。

• プロパティ トリガー   1 つのプロパティの変化によって、別のプロパティが瞬時に変化したり、アニメーションが変化したりするメカニズムです。

• イベント トリガー   イベントによってプロパティのアニメーションが変化するメカニズムです。

次の図は、2 つのプロパティ トリガー (IsMouseOver と IsPressed) および 1 つのイベント トリガー (target-element.Loaded) が設定されたトリガー ユーザー インターフェイスを示しています。IsMouseOver プロパティ トリガーが選択され、変更されたプロパティ (Border.Background) およびトリガーされたタイムライン (OnLoaded1) が表示されています。

トリガーの操作の例については、「WPF コントロールのトリガーの追加と削除」と「単純なアニメーションの作成」を参照してください。

プロパティ トリガー

プロパティ トリガーは、トリガーの条件と、条件が満たされた後に発生するアクションを定義します。たとえば、"button1 の IsMouseOver プロパティが True" という条件を設定します。この条件に対して、"button1 の Foreground プロパティを [Red] に設定し、ボタンを大きくする Expand という名前のアニメーションを開始する" というアクションを設定できます。

"Foreground プロパティを [Red] に設定 (前景を赤に設定) する" は、プロパティ setterと呼ばれるアクションの種類の一例です。setter は、条件が満たされている間のみ有効です。条件が満たされなくなると、プロパティは元の値に戻ります。"Expand という名前のアニメーションを開始する" は、開始アクションの例です。条件が満たされると、アクションが発生します。条件が満たされなくなると、終了アクションが発生します。アニメーションは、アクションの開始と終了によってのみ制御できます。次の図は、この例のプロパティ トリガーのライフ サイクルを示しています。

このライフ サイクルの始めから終わりまでの間 Foreground プロパティを制御するには、setter で十分であることに注意してください。ステージ 5 で、Foreground の設定は、自動的に [Black] に戻ります。ただし、開始アクションによって実行されたプロパティのアニメーションは取り消されません。ステージ 5 になっても、ボタンは大きなサイズのままです。これを解決するには、ボタンを小さなサイズに戻す Contract アニメーションをデザインし、終了アクションでこの新しいアニメーションを開始します。

プロパティ トリガーは、スタイルまたはテンプレートにのみ定義できます。トリガー全般に言えることですが、トリガーは可能な限りテンプレートに用意しておくことをお勧めします。

イベント トリガー

イベント トリガーでは、トリガー条件と、条件が満たされた後に発生するアクションを定義します。たとえば、"button1 で MouseEnter イベントが発生した場合" という条件を設定できます。この条件に対して、"ボタンを大きくする Expand というアニメーションを開始する" というアクションを設定できます。

この例のアクションは、プロパティ トリガーの例で使用した開始アクションと同じです。イベント トリガーのライフ サイクルは、プロパティ トリガーと同じではありません。イベント トリガーは、イベントに応答してアクションを実行します。したがって、イベント トリガーには開始アクションと終了アクションはありません。単にアクションを設定します。

ポインターがボタンの境界に入ったときにボタンのサイズを大きくし、ポインターが離れたときに通常のサイズに戻す場合、補完的なサイズ変更アニメーションを実行するイベント トリガーのペアを定義する必要があります。イベント トリガーは、スタイル、テンプレート、または LayoutRoot に定義できます。

プロパティ トリガーとイベント トリガーの違い

多くの場合、プロパティには、対応するイベントのセットが反映され、プロパティ トリガーまたは 2 つのイベント トリガーのどちらをデザインするかを決定できます。たとえば、1 つの IsMouseOver プロパティ トリガーでも、MouseEnter と MouseLeave のイベント トリガーのペアでも同じ効果が得られます。プロパティ トリガーは可能な場所で使用します。イベント トリガーは、スタイルまたはテンプレートを使用していない場合など、必要な場合に使用します。イベント トリガーを使用する必要がある場合は、setter がないことを補うために、時間 0 でキーフレーム付きのアニメーションのペアを作成できます。

トリガーとイベント ハンドラー メソッドの違い

トリガーで可能なことはすべて、イベント ハンドラーを使用して実行できます。さらに、別の要素でのプロパティの設定、新しいドキュメントの読み込み、新しい要素の作成など、他のプログラミング ロジックも追加できます。これは、イベント ハンドラー メソッドが、ドキュメントの分離コード ファイルに C# または Microsoft Visual Basic .NET 言語で定義されているためです。詳細については、「イベントに応答するコードを記述」を参照してください。

トリガーまたはイベント ハンドラー メソッドを使用してフックできるイベントの一覧については、「コントロール、プロパティ、およびイベント リファレンス」を参照してください。

関連項目

タスク

ストーリーボードの実行タイミングの制御

Copyright ©2011 by Microsoft Corporation. All rights reserved.