The FluidMoveSetTagBahvior is a helpful, but scarcely documented, feature that allows you to apply fluid movement between UI elements that share both a visual relationship as well as a data relationship. The most common example of this would be the Master/Details view where you have a list that displays all available items, and a view that displays the details of the selected item. By using the FluidMoveSetTagBehavior and FluidMoveBehavior in Expression Blend, we can make the selected item appear to “fly out” of the list and into the details view.

Here’s how…

In Expression Blend, search for FluidMove (not case sensitive) in the asset panel. Next, drill down into the ItemsTemplate of whatever control you’re using to display your Master list ( standard ListBox in my example). Now, you’ll need to drag that FluidMoveSetTagBehavior from the asset panel down to the UI element in the ItemsTemplate where you want the “fly out” animation to begin. It my example, I applied it to the root container (the StackPanel). Here’s how that looks in Blend…

Next, click the FluidMoveSetTagBehavior that you just dropped, and turn your attention to the Properties panel on the right. The key here is to set the Tag property to DataContext. What this does is register the DataContext object ( in my example, a Person object) to a hidden data store that our corresponding FluidMoveBehavior will use later to execute the animation.

Next, we’ll apply the FluidMoveBehavior to the Details view to enable the “fly out” animation. In the Objects and Timeline panel in Blend, select the UI element in your Details view that will be the end point of the animation. In my example, that’s the root StackPanel of my Details view. Drag the FluidMoveBehavior ( NOT the FluidMoveSetTagBehavior ) down to this UI Element. Here’s how that looks in my sample…

Once again, we need to select the FluidMoveBehavior we just added and go over to the Properties panel on the right. Set the InitialTag property to DataContext. Now, when the DataContext of this UI element changes, the FluidMoveBehavior will check the hidden data store for the last known location of this new DataContext object, which would be the last location of the original StackPanel where we set the FluidMoveSetTagBehavior. Now that we have the FluidMoveBehavior wired up, we need to connect the DataContext of the Details StackPanel to to SelectedItem of the Master ListBox. When the SelectedItem changes, the DataContext of the StackPanel also changes, and triggers the FluidMoveBehavior. If you’re using the MVVM pattern ( which my sample is), you’ll want to do the following….

On your Master ListBox, bind the SelectedItem to the corresponding property on your ViewModel, and set it as a Two-Way binding. Here’s how mine looks…

Now,  bind the target UI element in your Details view to that same property that you just bound the ListBox SelectedItem to.

and……voila!… Fluid Move Demo