FluidMoveBehavior, FluidMoveSetTagBehavior y el almacén de datos

Puede animar un cambio de posición de un elemento mediante el comportamiento FluidMoveBehavior . Sin embargo, si está utilizando FluidMoveBehavior , puede animar sólo una transición entre la ubicación específica de un elemento identificado hasta una nueva ubicación. El uso conjunto de FluidMoveBehavior y FluidMoveSetTagBehavior le permite animar una transición desde un punto inicial concreto, aunque dicha ubicación inicial solo se especifique mediante una referencia a los datos que se muestran en la aplicación.

Al utilizar FluidMoveBehavior con FluidMoveSetTagBehavior , se crea un almacén de datos oculto que le permitirá tener acceso a los datos que necesite, incluso si existen en un ámbito diferente. Aunque el almacén de datos está oculto a la vista, resulta útil entender el funcionamiento del almacén de datos cuando se trabaja con FluidMoveBehavior y FluidMoveSetTagBehavior .

Datos etiquetados por FluidMoveSetTagBehavior, disponibles para su uso con FluidMoveBehavior mediante un almacén de datos oculto

[!NOTA]

FluidMoveSetTagBehavior se utiliza para escribir valores en el almacén de datos. FluidMoveBehavior lee y escribe datos en el almacén de datos.

En el siguiente ejemplo se demuestra el funcionamiento conjunto de FluidMoveBehavior , FluidMoveSetTagBehavior y el almacén de datos para crear una transición suave entre un ListBox y una vista de detalles de un elemento en un ListBoxItem cuando se utiliza una vista de datos de detalles de lista.

Para descargar el proyecto de ejemplo utilizado en este tema, visite Expression Community Gallery  (Galería de la comunidad de Expression).

Uso de FluidMoveBehavior y FluidMoveSetTagBehavior para animar la transición entre un elemento de una lista y la vista de detalles de dicho elemento al seleccionarlo

En este ejemplo, ListBox muestra una serie de ListBoxItems (la vista de lista), específicamente, una lista de sillas disponibles para su compra. La vista de lista de las sillas incluye una selección de las propiedades asignadas a cada silla, concretamente, el nombre, el precio y una imagen.

Cuando se selecciona una silla en ListBox, aparece una vista de detalles. La vista de detalles muestra los detalles asociados al elemento individual seleccionado en la lista.

Para el propósito de este ejemplo, se animará la transición entre la silla seleccionada en la lista y la silla tal y como se muestra en la vista de detalles. Para habilitar esta transición, la silla en la lista debe identificarse como el punto inicial de esta animación. Esto se logra mediante el etiquetado del objeto Image en ItemTemplate (la plantilla que define la apariencia de los elementos en la lista) con un comportamiento FluidMoveSetTagBehavior .

Si ha descargado y ha abierto el ejemplo de Expression Community Gallery , si desea buscar la plantilla de elementos, en el panel Objetos y escala de tiempo, haga clic con el botón secundario en listbox, haga clic en Editar plantillas adicionales, a continuación, en Editar elementos generados (ItemTemplate) y, seguidamente, en Editar actual. Tenga en cuenta que FluidMoveSetTagBehavior se ha agregado al objeto Imagen.

FluidMoveSetTagBehavior aplicado a un objeto de imagen

Cuando se ha agregado FluidMoveSetTagBehavior a un objeto, aparecen las categorías Propiedades comunes y Propiedades de etiqueta en el panel Propiedades.

FluidMoveSetTagBehavior en el panel Propiedades

La propiedad AppliesTo se establece en Self porque la imagen en sí es el elemento en el que se aplica FluidMoveSetTagBehavior.

La propiedad Tag se establece en DataContext porque la imagen no está disponible fuera de la plantilla de elementos. La etiqueta DataContext identifica los datos a los que está enlazada esta plantilla, concretamente, los datos relacionados con la silla.

El comportamiento FluidMoveSetTagBehavior etiqueta los datos (en este caso, la imagen) y los coloca en el almacén de datos para que FluidMoveBehavior pueda encontrarlos después de aplicar FluidMoveBehavior .

Para ver esto en acción en el proyecto de ejemplo, haga clic en Devolver ámbito a. En el panel Objetos y escala de tiempo, expanda Grid. Tenga en cuenta que FluidMoveBehavior se ha agregado al objeto Grid.

FluidMoveBehavior aplicado a un objeto Grid

Cuando se agrega FluidMoveBehavior a un objeto (en este caso, Grid), aparecen las categorías Propiedades comunes, Propiedades de animación y Propiedades de etiqueta aparecen en el panel Propiedades.

FluidMoveBehavior en el panel Propiedades

Tenga en cuenta que la propiedad InitialTag está etiquetada como DataContext en la categoría Propiedades de etiqueta. Es decir, cuando se desencadena este comportamiento, busca la última ubicación de DataContext registrada en el almacén de datos (en este caso, el objeto Image de ItemTemplate para el elemento ListBoxItem ). A continuación, el comportamiento utiliza esa instancia como su origen.

Para resumir, el comportamiento FluidMoveSetTagBehavior etiqueta el objeto en la plantilla desde el que se desea iniciar la animación. El contexto de datos hace referencia al origen de los datos y lo registra con un almacén de datos oculto. Al hacer referencia al comportamiento FluidMoveSetTagBehavior, el comportamiento FluidMoveBehavior puede buscar el punto inicial de la animación y luego aplicar las propiedades de animación deseadas al objeto etiquetado con el comportamiento FluidMoveBehavior. En este ejemplo se ha usado FluidMoveBehavior para que parezca que la silla de mayor tamaño (la silla en la vista de detalles) se crea a partir de la silla más pequeña (la silla en la vista de lista).

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.