This comes directly from something that I was doing today with Blend. Let’s imagine that I have a UI like this one;

and I have it set such that when my mouse enters the scene, that little grid at the bottom animates in from the bottom and when my mouse leaves the scene it animates out;

I put this together in the simplest way possible. My layout looks like this;

and the sneaky thing is that I have 3 rows rather than 2. That bottom row is set to size 0.

When the mouse leaves the control, I move the content of Grid Row 2 to Grid Row 3 where its height becomes 0 and it disappears.

When the mouse enters the control, I move the content of Grid Row 3 to Grid Row 2 where it has height and appears.

I do that via visual states.

and the only difference between these 2 states is that in one state I have content set to Grid.Row=1 and in the other it’s Grid.Row=2.

Now, I want a nice, smooth transition between these states so I switch on Fluid Layout in Blend 4;

which makes that work for me and I can also set up how long the transition takes, an easing function to apply and any transition to use. I can also preview that in the environment by switching on the preview;

Naturally, to make this then happen on MouseEnter/MouseLeave I just need to use the appropriate GoToStateAction and I have 2 setup on my root control here;

and, as an example, one of those looks like;

and I’m done