FluidMoveBehavior, FluidMoveSetTagBehavior, and the data store

You can animate a change in the position of an element by using the FluidMoveBehavior behavior. However, if you are using FluidMoveBehavior by itself, you can animate only a transition between the specific location of an identified item to a new location. By using FluidMoveBehavior together with FluidMoveSetTagBehavior, you can animate a transition from a specified starting point, even if that initial location is specified only by a reference to the data that is displayed in your application.

When you use FluidMoveBehavior with FluidMoveSetTagBehavior, a hidden data store is created to help you access the data that you need, even if it exists in a different scope. Although the data store is hidden from view, it is helpful to understand how the data store functions when you are working with FluidMoveBehavior and FluidMoveSetTagBehavior.

Data tagged by FluidMoveSetTagBehavior, made available for use with FluidMoveBehavior by using a hidden data store

The following example demonstrates how FluidMoveBehavior, FluidMoveSetTagBehavior, and the data store work together to create a smooth transition between a ListBox and a details view of an item in a ListBoxItem when you are using a list-details view of data.

To download the sample project used in this topic, visit the Expression Community Gallery .

FluidMoveBehavior and FluidMoveSetTagBehavior being used to animate the transition between an item in a list and the details view of that item when the item is selected

In this example, the ListBox displays a series of ListBoxItems (the list view), specifically, a list of chairs available for purchase. The list view of the chairs includes a selection of properties assigned to each chair, specifically, the name, the price, and an image.

When a chair is selected in the ListBox, a details view appears. The details view displays the details associated with the individual item selected in the list.

For the purposes of this example, the transition between the selected chair in the list and the chair as it is displayed in the details view will be animated. To enable this transition, the chair in the list has to be identified as the starting point for this animation. This is achieved by tagging the Image object in the ItemTemplate (the template that defines the appearance of the items in the list) with a FluidMoveSetTagBehavior behavior.

If you have downloaded and opened the sample from the Expression Community Gallery , to locate the item template, in the Objects and Timeline panel, right-click listbox, click Edit Additional Templates, click Edit Generated Items (ItemTemplate), and then click Edit Current. Note that FluidMoveSetTagBehavior has been added to the Image object.

FluidMoveSetTagBehavior applied to an Image object

When FluidMoveSetTagBehavior is added to an object, the Common Properties and Tag Properties categories appear in the Properties panel.

FluidMoveSetTagBehavior in the Properties panel

The AppliesTo property is set to Self, because the image itself is the item to which FluidMoveSetTagBehavior is applied.

The Tag property is set to DataContext, because the image is not available outside the item template. The DataContext tag identifies the data this template is bound to, specifically, the data related to the chair.

The FluidMoveSetTagBehavior behavior tags the data (in this case, the image) and puts it in the data store so that FluidMoveBehavior can find it after FluidMoveBehavior is applied.

To see this in action, in the sample project, click ****Return scope to ****. In the Objects and Timeline panel, expand Grid. Note that FluidMoveBehavior has been added to the Grid.

FluidMoveBehavior applied to a Grid

When you add FluidMoveBehavior to an object (in this case, a Grid), the Common Properties, Animation Properties, and Tag Properties categories appear in the Properties panel.

FluidMoveBehavior in the Properties panel

Note that in the Tag Properties category, the InitialTag property is tagged as DataContext. In other words, when this behavior is triggered, it looks for the last location of the DataContext that is registered in the data store (in this case, the Image object in the ItemTemplate for the selected ListBoxItem). The behavior then uses that instance as its origin.

To summarize, the FluidMoveSetTagBehavior behavior tags the object in the template from which you want to start the animation. The data context references the source of the data, and registers it with a hidden data store. By referencing the FluidMoveSetTagBehavior behavior, the FluidMoveBehavior behavior can locate the starting point for the animation and then apply the animation properties that you want to the object tagged by the FluidMoveBehavior behavior. In this example, FluidMoveBehavior was used to make the larger chair (the chair in the details view) appear to grow out of the smaller chair (the chair in the list view).

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.