Using Fluid Move Behavior with listbox


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..

Quick view:

View Live: Here

Download Source

Step 1:
First, launch Expression Blend 3/4 and create a new Silverlight project. For my example, I will be using a Silverlight project
Step 2:
Crete some data to display on listbox, to create data, open “Data” tab, see below image.

Data tab

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.

Cahnge Value

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.

Now adjust the image to stretch entire grid, like in the below image.

Now go to assets panel -> select Behaviors -> select FluidMove Behavior drag and drop on to Single image section, see in 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”

now exit from the template and run the application you will see a niche fluid animation.

Advertisements

5 thoughts on “Using Fluid Move Behavior with listbox

  1. I enjoyed your blog. It’s easy to read, the content is good, and your an educated writer unlike most of the blogs I come across when searching on this topic. I will check back in the future and see if you have anymore articles. Thanks for posting this, I appreciate the infomration and the effort you put into your site.

  2. Hi,

    Have you experienced memory leak in FluidMoveBehaviour? Am using it in wpf application and if I add/remove items it is not releasing removed items.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s