What is the FluidMove Behavior ?
The FluidMove behavior animates changes caused by layout such as resizing a window or removing some items from a StackPanel. Layout changes by default are sudden with no feedback or life. Any content that is the victim of a layout change simply appears in its new location.
In this Article i will show you how we can work with listbox by using FluidMove Behavior..
View Live: Here
First, launch Expression Blend 3/4 and create a new Silverlight project. For my example, I will be using a Silverlight project
Crete some data to display on listbox, to create data, open “Data” tab, see below image.
Press New Sample Data.., it will opens a popup where you have to enter a name, after this step your default data will be present on Data tab, now if you can see Property 2 there is a small icon , press this button, a dropdown opens in which you can see a default type “Boolean” is there, change it to “Image”. See in the below image.
Now our data is ready to use.Once our data has been created, insert a Listbox control into your LayoutRoot, and select “property1” from Data tab, drag and drop on to our listbox control,with this list of items will be populate on our listbox control.
Now inside data tab, press DetailsMode icon see the below image.
Now Seledt Property2 and drag and drop on to the Layout root exactly beside the listbox control, see the below image.
inside properties tab, you can see the properties of FluidMove Behavior, select easeX and easeY properties to your required easing functions, and in the initial Tag select DataContext, and save. See in the below image.
Now you need to change some properties for listbox item in it’s style. Right click on Listbox go to Edit additional templates, select Edit Generated Items select Edit Current, this step will take you to edit the item template in which our image displays.
Inside the Objects and template select “Image” and inside Assets panel select “FluidMoveSetTagBehavior” and drag and drop on to image, then inside the properties window of FluidMoveSetTagBehavior change SetTagBehavior value to “DataContext”