A Fluid Master Detail Display

Create the Master List

First let's create a databound master detail list.

1. Create a new “Silverlight Application + Website” and name it “FluidMasterDetail”.
2. In the Data panel, click the Create sample data button () and select the New Sample Data… option.
3. In the New Sample Data dialog, hit OK.
4. Select Property1 and change the format to “Name”.
5. Select Property2 and change the type to “Image”, leave the folder blank.
6. Click the Add simple property button () to add Property3.
7. Click and drag the Collection icon () to the LayoutRoot Grid and let go on the left side of the Grid to create a ListBox.
8. Resize the ListBox to 200x464.
9. In the Data panel, click the Details Mode button ().
10. Click and drag Property1 onto the LayoutRoot Grid. Look for the “Create Details View” icon.
11. Resize the new Grid to fill the right side of the screen, around the size of 420x464.
12. Click and drag Property2 into the new Grid and resize the resulting Image control to fill the top half of the Grid.
13. Click and drag Property3 onto the Grid below the Image control, creating a TextBlock.
14. Run the project and notice that when you select an item in the ListBox the detail Grid to the right is updated to show the newly selected item.

We’ve just quickly created some sample data, a ListBox bound to that data and a Grid bound to the Selected Item of the ListBox. Not only are the elements linked during run-time, but using design-time DataContext we get a preview of what the details view will look like. This makes it much easier to design the template that is normally only filled at run-time.

Back to the topic of Fluid UI, when a new selection was made in the ListBox the Grid contents were instantly changed without much indication as to where the data came from.

Let’s change that.

Save Your Place

In order to animate to where the item is going the FluidMoveBehavior needs to know where the item is coming from. If the item itself is not doing any animation, only recording its position than a single-purposed FluidMoveSetTagBehavior can be used. In this case, the items in the master list are not moving, so let’s add a FluidMoveSetTagBehavior to the data template.

1. Right-click the listBox and select the Edit Additional Templates -> Edit Generated Item (ItemTemplate) -> Edit Current option. (Blend created this template based on the Sample Data when the Collection was dragged out to create the ListBox).
2. In the Assets panel, open the Behaviors category and add a FluidMoveSetTagBehavior onto the Image control in the template.
3. Set the Tag property to “DataContext”.

when the items are generated they will each drop a little flag letting the FluidMove system find their location based on DataContext.

Animate to Position

Now its time to animate the details into position based on the position of their original location.

1. Exit template editing mode.
2. Select the Grid with the detail information and add a FluidMoveBehavior from the Assets panel.
3. Change the Duration to half a second (00:00:00.5).
4. Change the EaseX and EaseY to Quadratic InOut.
5. Change the InitialTag property to “DataContext”.
6. Run the project and you will see the details fly into place rather than just appearing.