Create the Master List
First let's create a databound master detail list.
- Create a new “Silverlight Application + Website” and name it “FluidMasterDetail”.
- In the Data panel, click the Create sample data button () and select the New Sample Data…
- In the New Sample Data dialog, hit OK.
- Select Property1 and change the format to “Name”.
- Select Property2 and change the type to “Image”, leave the folder blank.
- Click the Add simple property button () to add Property3.
- Click and drag the Collection icon () to the LayoutRoot Grid and let
go on the left side of the Grid to create a ListBox.
- Resize the ListBox to 200x464.
- In the Data panel, click the Details Mode button ().
- Click and drag Property1 onto the LayoutRoot Grid. Look for the
“Create Details View” icon.
- Resize the new Grid to fill the right side of the screen, around the size of 420x464.
- Click and drag Property2 into the new Grid and resize the resulting Image
control to fill the top half of the Grid.
- Click and drag Property3 onto the Grid below the Image control, creating
- 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
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.
- 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).
- In the Assets panel, open the Behaviors category and add a FluidMoveSetTagBehavior
onto the Image control in the template.
- 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.
- Exit template editing mode.
- Select the Grid with the detail information and add a FluidMoveBehavior from the
- Change the Duration to half a second (00:00:00.5).
- Change the EaseX and EaseY to Quadratic InOut.
- Change the InitialTag property to “DataContext”.
- Run the project and you will see the details fly into place rather than just appearing.