FluidMoveBehavior, FluidMoveSetTagBehavior et le magasin de données

Vous pouvez animer un changement de position d’un élément à l’aide du comportement FluidMoveBehavior . Toutefois, si vous utilisez l’objet FluidMoveBehavior en lui-même, vous pouvez animer uniquement une transition entre l’emplacement spécifique d’un élément identifié vers un nouvel emplacement. En utilisant FluidMoveBehavior conjointement avec FluidMoveSetTagBehavior , vous pouvez animer une transition à partir d’un point de départ indiqué, même si cet emplacement initial est uniquement spécifié par une référence aux données affichées dans votre application.

Lorsque vous utilisez FluidMoveBehavior avec FluidMoveSetTagBehavior , un magasin de données masqué est créé pour vous aider à accéder aux données requises, même s’il existe dans une autre étendue. Bien que le magasin de données soit masqué, il est utile de comprendre le fonctionnement du magasin de données lorsque vous utilisez FluidMoveBehavior et FluidMoveSetTagBehavior .

Données marquées par FluidMoveSetTagBehavior, mis à disposition pour être utilisé avec FluidMoveBehavior à l’aide d’un magasin de données masqué

Remarque :
FluidMoveSetTagBehavior est utilisé pour écrire des valeurs dans le magasin de données. FluidMoveBehavior lit et écrit des données dans le magasin de données.

L’exemple suivant illustre comment FluidMoveBehavior , FluidMoveSetTagBehavior , et le magasin de données fonctionnent conjointement pour créer une transition en douceur entre un objet ListBox et un mode Détails d’un élément dans un objet ListBoxItem lorsque vous utilisez un mode de données liste-détails.

Pour télécharger l’exemple de projet utilisé dans cette rubrique, visitez la Galerie de la Communauté Expression .

FluidMoveBehavior et FluidMoveSetTagBehavior utilisés pour animer la transition entre un élément dans une liste et le mode Détails de l’élément lorsque ce dernier est sélectionné

Dans cet exemple, l’objet ListBox affiche une série de ListBoxItems (mode Liste), en particulier, une liste de chaises disponibles à l’achat. Le mode Liste des chaises comprend une sélection de propriétés attribuées à chaque chaise, en particulier, le nom, le prix et une image.

Lorsqu’une chaise est sélectionnée dans l’objet ListBox, un mode Détails s’affiche. La vue Détails affiche les détails associés à l’élément sélectionné individuellement dans la liste.

Pour illustrer cet exemple, la transition entre la chaise sélectionnée dans la liste et la chaise telle qu’elle est affichée en mode Détails sera animée. Pour activer cette transition, la chaise dans la liste doit être identifiée comme le point de départ de cette animation. Pour cela, balisez l’objet Image dans ItemTemplate (le modèle qui définit l’apparence des éléments dans la liste) avec un comportement FluidMoveSetTagBehavior .

Si vous avez téléchargé et ouvert l’exemple dans la Galerie de la Communauté Expression , pour rechercher le modèle de l’élément, dans le panneau Objets et chronologie, cliquez avec le bouton droit sur listbox, cliquez sur Modifier les modèles associés, sur Modifier les éléments générés (ItemTemplate), puis sur Modifier l’élément actuel. Notez que FluidMoveSetTagBehavior a été ajouté à l’objet Image.

FluidMoveSetTagBehavior appliqué à un objet Image

Lors de l’ajout de FluidMoveSetTagBehavior à un objet, les catégories Propriétés communes et Propriétés de la balise s’affichent dans le panneau Propriétés.

FluidMoveSetTagBehavior dans le panneau Propriétés

La propriété AppliesTo a la valeur Self, car l’image elle-même est l’élément auquel FluidMoveSetTagBehavior est appliqué.

La propriété Tag a la valeur DataContext, car l’image n’est pas disponible en dehors du modèle d’élément. La balise DataContext identifie les données auxquelles ce modèle est lié, en particulier, les données liées à la chaise.

Le comportement FluidMoveSetTagBehavior balise les données (dans ce cas, l’image) et les place dans le magasin de données afin que FluidMoveBehavior puisse les trouver après l’application de FluidMoveBehavior .

Pour ce faire, dans l’exemple de projet, cliquez sur ****Rétablir l’étendue à ****. Dans le panneau Objets et chronologie, développez Grille. Notez que FluidMoveBehavior a été ajouté à l’objet Grille.

FluidMoveBehavior appliqué à une grille

Lorsque vous ajoutez FluidMoveBehavior à un objet (dans ce cas, Grille), les catégories Propriétés communes, Propriétés de l’animation, et Propriétés de la balise s’affichent dans le panneau Propriétés.

FluidMoveBehavior dans le panneau Propriétés

Notez que dans la catégorie Propriétés de la balise, la propriété InitialTag est marquée comme DataContext. En d’autres termes, lors du déclenchement de ce comportement, ce dernier recherche le dernier emplacement de l’objet DataContext enregistré dans le magasin de données (dans ce cas, l’objet Image dans ItemTemplate pour l’objet ListBoxItem sélectionné). Le comportement utilise ensuite cette instance en tant que son origine.

Pour résumer, le comportement FluidMoveSetTagBehavior balise l’objet dans le modèle à partir duquel vous souhaitez démarrer l’animation. Le contexte de données fait référence à la source de données et l’enregistre avec un magasin de données masqué. En référençant le comportement FluidMoveSetTagBehavior, le comportement FluidMoveBehavior peut rechercher le point de départ de l'animation puis appliquer les propriétés de l’animation souhaitées à l’objet balisé par le comportement FluidMoveBehavior. Cet exemple illustre l’utilisation de FluidMoveBehavior pour donner l’illusion que la grande chaise (celle en mode Détails) se transforme à partir de la plus petite (celle en mode Liste).

Copyright © 2011 Microsoft Corporation. Tous droits réservés.