Using the FluidMove Behavior - Page 4
       by kirupa  |  18 November 2009

In the previous page, we finished using the FluidMove behavior on the resizing example that you spent a few pages working on. While resizing is one scenario, another scenario that FluidMove is really useful for is when you are adding and removing children to something like a StackPanel or ListBox.

Because the basics of how to use the FluidMove behavior will not change, I am going to be more brief and provide you with source code up front instead of having you re-create an example from scratch like you did in the previous three pages.

Adding/Removing Children Example
This example will be more of a deconstruction as opposed to a full out "follow-along" steps, so go ahead and download a sample project by clicking the link below:

Download Adding/Removing Children Example

Once you have downloaded the above files, extract them and open the solution in Blend. Your project will look as follows:

[ this does look a bit colorful! ]

As always, let's first build and run your application to see what it does. The Add button adds more colorful rectangles to your application. The Remove button does the exact opposite where it removes colorful rectangles from the application. Pretty simple.

Currently, the adding and removing of these rectangles is pretty boring. It just happens with no real visual cue as to what exactly is happening. Don't worry, the FluidMove behavior will save the day...again.

From the Asset Library, drag and drop the FluidMove behavior onto your buttonContainer StackPanel object:

[ add the behavior to your StackPanel ]

After you drop the FluidMove behavior, it will be selected for you as well. In the Properties Inspector, just like before, change the AppliesTo property to Children. If you test your application now, notice that adding or removing rectangles involves a slight transition. You can even tweak the duration and easing functions (in Silverlight) to make your animation better if you so choose.

This example emphasizes a point I made on the first page. I stated that the FluidMove behavior intercepts layout changes and creates a transition between the starting and ending points of some element. A layout change doesn't always have to be about resizing. Removing elements from a control that stacks or wraps its children is another case, and that is what this example showed.

AppliesTo: Children or Self
In both of the examples you've fiddled with in this tutorial, you set the AppliesTo property to Children. AppliesTo does not always have to be Children, though. It could also be Self:

[ the AppliesTo property can be two values - Children or Self ]

The reason I always had you select Children is because we placed the FluidMove behavior on layout panels whose children we were manipulating. If you only want a single element to exhibit FluidMove powers, you would place your behavior on just that single element. The only variation from before is that, for the AppliesTo property, you will select Self instead of Children.

Download a small example that higlights AppliesTo: Self being set on the FluidMove behavior:

Download AppliesTo: Self Example

Open this project and run it in your browser. Resize your browser window and notice how the single rectangle animates in to its new position.

Conclusion
The FluidMove behavior is one of my favorite behaviors because it makes a series of common tasks that directly or indirectly affect layout just a bit more fun and engaging with minimal additional effort. I have provided the source files for all of the examples from this and the previous pages below:

Download Resize/Wrap on Button Click Example Download Resize/Wrap Example Download Adding/Removing Children Example Download AppliesTo: Self Example

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

1 | 2 | 3 | 4