Using the FluidMove Behavior - Page
kirupa | 18 November 2009
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.
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:
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
From the Asset Library, drag and drop the
FluidMove behavior onto your buttonContainer
[ 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
AppliesTo property can be two values - Children or
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:
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.
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: