トリガの概要
.png "このページは WPF プロジェクトにのみ適用されます。")
.gif "メモ") メモ : |
|---|
トリガは、Microsoft Silverlight 1.0 または Silverlight 2 プロジェクトではサポートされていません。Silverlight 1.0 アプリケーションのすべてのユーザー操作は、イベント ハンドラを使用して実現されます。例については、「Silverlight アプリケーションのストーリーボードを制御するボタンの作成」を参照してください。Silverlight 2 アプリケーションでのユーザー操作は、イベント ハンドラまたは状態を使用して実現できます。詳細については、「ユーザー操作への応答でのステートの変更」を参照してください。 |
アプリケーションの有効期間中、ユーザー インターフェイスのオブジェクトはさまざまな状態に変化します。状態は、ボタンにマウスが置かれた状態やメニュー項目が押された状態など、ユーザー指向の用語で表されます。これら 2 つの例の状態は、それぞれ、UIElement.IsMouseOver プロパティおよび MenuItem.IsPressed プロパティを使用してオブジェクトに実装されます。
しかし、これらのプロパティの値、つまりこれらが表す状態自体はユーザーにはわかりません。IsMouseOver と IsPressed は視覚プロパティではありません。非視覚プロパティの変更を目で確認するには、非視覚プロパティの変化によって、視覚プロパティ (Background や Opacity など) を変更させる必要があります。たとえば、ボタンの上にマウス ポインタを置くと、その前の平坦な表示から曲線の表示になります。またメニュー項目を押すと、背景色が変化します。
状態の変化だけでなく、オブジェクトはイベントも起動します。たとえば、マウス ポインタがボタンの境界を通過すると、MouseEnter イベントと MouseLeave イベントが発生します。イベントにもそれ自身の外観はないため、ユーザーにその変化を示すには、視覚プロパティを変更する必要があります。
トリガ (およびアニメーション タイムライン) は、ドキュメントのルートの中、またはコントロールに適用されるスタイルの中に作成できます。たとえば、ボタンのスタイルを変更して、ボタンが押された状態とマウスが置かれた状態のときにボタンの外観をわずかに変更することができます。このスタイルが適用されたすべてのボタンは、同じように動作します。例については、「試してみよう : ボタンへのアニメーションの追加」を参照してください。
トリガには、次の 2 種類があります。
プロパティ トリガ 1 つのプロパティの変化によって、別のプロパティが瞬時に変化したり、アニメーションが変化したりするメカニズムです。
イベント トリガ イベントによってプロパティのアニメーションが変化するメカニズムです。
次の図は、2 つのプロパティ トリガ IsMouseOver と IsPressed) と 1 つのイベント トリガ (target-element.Loaded) が設定されたトリガ ユーザー インターフェイスを示しています。IsMouseOver プロパティ トリガが選択され、変更されるプロパティ (Border.Background) とトリガされるタイムライン (OnLoaded1) が示されています。
.png "Cc294856.796fe3b0-6e25-43eb-aed6-2ac834fe40e4(ja-jp,Expression.10).png")
トリガの操作の例については、「トリガの追加と削除」と「単純なアニメーションの作成」を参照してください。
.gif "Cc294856.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif")
先頭に戻る
プロパティ トリガ
プロパティ トリガは、トリガの条件と、条件が満たされた後に発生するアクションを定義します。たとえば、"button1 の IsMouseOver プロパティが True" という条件を設定できます。この条件に対して、"button1 の Foreground プロパティを [Red] に設定し、ボタンを大きくする Expand という名前のアニメーションを開始する" というアクションを設定できます。
"Foreground プロパティを [Red] に設定 (前景を赤に設定) する" は、プロパティのセッターと呼ばれるアクションの種類の一例です。セッターは、条件が満たされている間のみ有効です。条件が満たされなくなると、プロパティは元の値に戻ります。"Expand という名前のアニメーションを開始する" は、開始アクションの例です。条件が満たされると、アクションが発生します。条件が満たされなくなると、終了アクションが発生します。アニメーションは、アクションの開始と終了によってのみ制御できます。次の図は、この例のプロパティ トリガのライフ サイクルを示しています。
.png "Cc294856.e82c8455-215e-49da-954f-f1bb73d84af2(ja-jp,Expression.10).png")
このライフ サイクルの始めから終わりまでの間 Foreground プロパティを制御するには、セッターで十分であることに注意してください。ステージ 5 で、Foreground の設定は、自動的に [Black] に戻ります。ただし、開始アクションによって実行されたプロパティのアニメーションは取り消されません。ステージ 5 になっても、ボタンは大きなサイズのままです。これを解決するには、ボタンを小さなサイズに戻す Contract アニメーションをデザインし、終了アクションでこの新しいアニメーションを開始します。
プロパティ トリガは、スタイルまたはテンプレートにのみ定義できます。トリガ全般に言えることですが、トリガは可能な限りテンプレートに用意しておくことをお勧めします。
先頭に戻る
イベント トリガ
イベント トリガでは、トリガ条件と、条件が満たされた後に発生するアクションを定義します。たとえば、"button1 で MouseEnter イベントが起動された場合" という条件を設定できます。この条件に対して、"ボタンを大きくする Expand というアニメーションを開始する" というアクションを設定できます。
この例のアクションは、プロパティ トリガの例で使用した開始アクションと同じです。イベント トリガのライフ サイクルは、プロパティ トリガと同じではありません。イベント トリガは、イベントに応答してアクションを実行します。したがって、イベント トリガには開始アクションと終了アクションはありません。単にアクションを設定します。
ポインタがボタンの境界に入ったときにボタンのサイズを大きくし、ポインタが離れたときに通常のサイズに戻す場合、補完的なサイズ変更アニメーションを実行するイベント トリガのペアを定義する必要があります。イベント トリガは、スタイル、テンプレート、または LayoutRoot に定義できます。
先頭に戻る
プロパティ トリガとイベント トリガの違い
多くの場合、プロパティには、対応するイベントのセットが反映され、プロパティ トリガまたは 2 つのイベント トリガのどちらをデザインするかを決定できます。たとえば、1 つの IsMouseOver プロパティ トリガでも、MouseEnter と MouseLeave のイベント トリガのペアでも同じ効果が得られます。プロパティ トリガは可能な場所で使用します。イベント トリガは、スタイルまたはテンプレートを使用していない場合など、必要な場合に使用します。イベント トリガを使用する必要がある場合は、セッターがないことを補うために、時間 0 でキーフレーム付きのアニメーションのペアを作成できます。
先頭に戻る
トリガとイベント ハンドラ メソッドの違い
トリガで可能なことはすべて、イベント ハンドラを使用して実行できます。さらに、別の要素でのプロパティの設定、新しいドキュメントの読み込み、新しい要素の作成など、他のプログラミング ロジックも追加できます。これは、イベント ハンドラ メソッドが、ドキュメントのコードビハインド ファイルに C# または Microsoft Visual Basic .NET 言語で定義されているためです。詳細については、「イベント処理の概要」を参照してください。
トリガまたはイベント ハンドラ メソッドを使用してフックできるイベントの一覧については、「WPF イベント クイック リファレンス」を参照してください。
先頭に戻る