Silverlight FluidMoveBehavior

Recently, I discovered something convenient that Silverlight has to offer by default. Well, actually, it’s Blend who’s offering it in it’s Microsoft.Expression.Interactions assembly. It’s the FluidMoveBehavior!
What this basically does is animating a change in the position of an element. One of the most clear examples for this is within a WrapPanel. The code is just as easy as the following:

<ListBox>           
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <Toolkit:WrapPanel Orientation="Horizontal">
                <Interactivity:Interaction.Behaviors>
                    <Interactions:FluidMoveBehavior AppliesTo="Children" Duration="00:00:00.250">
                        <Interactions:FluidMoveBehavior.EaseX>
                            <PowerEase EasingMode="EaseIn" Power="5"/>
                         </Interactions:FluidMoveBehavior.EaseX>
                     </Interactions:FluidMoveBehavior>
                 </Interactivity:Interaction.Behaviors>
            </Toolkit:WrapPanel>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Voila! That’s it. Now all actions on the children in the ListBox are animated, so when you remove one, all the items that follow will move fluently into the free space. And when changing the size , all the items slide nicely to their new position. I suggest that you never let the duration be too long, but a little animation can make your application just a bit sexier. And as you can see, you don’t need to do a lot of effort for it.

And there is even more! When you use the FluidMoveSetTagBehavior, you can animate a transition on an element from a starting point, to somewhere outside your starting location. You can find a good explanation and example at MSDN.

Hopefully this little tip helps you make your applications a bit more fluid! I certainly found it very useful.