FluidMoveBehavior、FluidMoveSetTagBehavior、およびデータ ストア

FluidMoveBehavior ビヘイビアーを使って、要素の位置の変化をアニメーション化できます。 ただし、FluidMoveBehavior を単独で使用する場合は、指定のアイテムの特定位置と新しい位置の間の移行のみをアニメーション化できます。 FluidMoveBehavior を FluidMoveSetTagBehavior と併用することで、初期位置がアプリケーションに表示されるデータを基準として指定されている場合でも、指定の開始点からの移行をアニメーション化できます。

FluidMoveBehavior を FluidMoveSetTagBehavior と併用する場合は、別のスコープにデータがある場合でも、必要なデータにアクセスできるように非表示データ ストアが作成されます。 データ ストアは非表示になりますが、FluidMoveBehavior と FluidMoveSetTagBehavior を使用する際には、データ ストアの機能を理解しておくと便利です。

非表示のデータ ストアにより FluidMoveBehavior で使用可能となる FluidMoveSetTagBehavior のタグ付きデータ

メモ :
データ ストアに値を書き込むには、FluidMoveSetTagBehavior を使用します。 FluidMoveBehavior は、データ ストアのデータの読み取りと書き込みの両方に対応します。

次の例は、FluidMoveBehavior、FluidMoveSetTagBehavior、およびデータ ストアの連携により、データのリスト-詳細ビューの使用時に ListBox と ListBoxItem 内のアイテムの詳細ビューの間のスムーズな切り替わりが行われる様子を示しています。

このトピックで使用されるサンプル プロジェクトをダウンロードするには、「Expression Community Gallery  (Expression コミュニティー ギャラリー)」を参照してください。

FluidMoveBehavior と FluidMoveSetTagBehavior を使用して、特定のアイテムの選択時にリスト内のアイテムとそのアイテムの詳細ビューの間の切り替わりをアニーメーション化する例

ここでは、ListBox により一連の ListBoxItems (リスト ビュー) を表示する具体例として、購入可能な椅子のリストを示しています。 椅子のリスト ビューには、各椅子に割り当てられたプロパティの選択肢として、名前、価格、画像が表示されます。

ListBox で特定の椅子を選択すると、その詳細ビューが表示されます。 詳細ビューには、リストで選択した個別アイテムに関連付けられた詳細が表示されます。

ここでは、リストで選択した椅子と、詳細ビューに表示される椅子の間の切り替わりがアニメーション化される様子を例として示します。 この切り替わりを有効にするには、リストの椅子がアニメーションの開始点として認識される必要があります。 そのためには、ItemTemplate (リスト内のアイテムの外観を定義するテンプレート) において、FluidMoveSetTagBehavior ビヘイビアーにより Image オブジェクトにタグを付ける必要があります。

「Expression Community Gallery (Expression コミュニティー ギャラリー)」からサンプルをダウンロードして開いている場合は、アイテムのテンプレートを見つけるには、[オブジェクトとタイムライン] パネルで [listbox] を右クリックし、[追加テンプレートの編集] 、[生成されたアイテムの編集 (ItemTemplate)]、[現在のテンプレートの編集] の順にクリックします。 [FluidMoveSetTagBehavior] が [イメージ] オブジェクトに追加されたことを確認します。

イメージ オブジェクトに適用された FluidMoveSetTagBehavior

[FluidMoveSetTagBehavior] がオブジェクトに適用されると、[プロパティ] パネルに [共通プロパティ] と [タグ プロパティ] カテゴリが表示されます。

[プロパティ] パネルの FluidMoveSetTagBehavior

イメージ自体が [FluidMoveSetTagBehavior] の適用対象のアイテムであるため、[AppliesTo] プロパティは [Self] に設定されます。

イメージはアイテム テンプレート外では使用できないため、[Tag] プロパティは [DataContext] に設定されます。 DataContext タグは、このテンプレートがバインドされているデータ、ここでは椅子に関連するデータを識別します。

FluidMoveSetTagBehavior ビヘイビアーは、データ (この場合はイメージ) にタグを付けてデータ ストアに配置するため、FluidMoveBehavior の適用後に FluidMoveBehavior がデータを検出できるようになります。

この動作を確認するには、サンプル プロジェクトで [スコープを <オブジェクト名> に戻す] をクリックします。 [オブジェクトとタイムライン] パネルで、[Grid] を展開します。 [FluidMoveBehavior] が [Grid] に追加されていることを確認します。

Grid に適用された FluidMoveBehavior

[FluidMoveBehavior] をオブジェクト (この場合は [Grid]) に追加すると、[プロパティ] パネルに [共通プロパティ]、「アニメーションのプロパティ]、および [タグ プロパティ] のカテゴリが表示されます。

[プロパティ] パネルの FluidMoveBehavior

[タグ プロパティ] カテゴリで、[InitialTag] プロパティが [DataContext] としてタグ付けされていることを確認します。 つまり、このビヘイビアーがトリガーされると、データ ストアに登録されている DataContext の最終位置が検出されます (この場合は、選択した ListBoxItem の ItemTemplate 内の Image オブジェクト)。 そして、このビヘイビアーは、そのインスタンスを原点として使用します。

要約すると、[FluidMoveSetTagBehavior] ビヘイビアーにより、アニメーションの開始点とするテンプレート内のオブジェクトにタグが設定されます。 データ コンテキストは、データのソースを参照し、非表示のデータ ストアに登録します。 [FluidMoveSetTagBehavior] ビヘイビアーを参照することで、[FluidMoveBehavior] ビヘイビアーはアニメーションの開始点を見つけて、[FluidMoveBehavior] ビヘイビアーによりタグ付けされたオブジェクトに適したアニメーションのプロパティを適用することができます。 この例では、[FluidMoveBehavior] を使用して、大きい方の椅子 (詳細ビューの椅子) が小さい方の椅子 (リスト ビューの椅子) から派生して拡大されたかのように表示されます。

Copyright ©2011 by Microsoft Corporation. All rights reserved.