Using FluidMoveBehavior to animate grid coordinates in Silverlight

At the Chicago .toolbox event last week, @thejeanious asked how she could easily animate an object between grid row and columns.

l originally answered with something like “I would use a Canvas and figure out the XY positioning…”, but after she explained she was working on a game where the grid seemed to be a natural fit, we came up with a different solution – the new FluidMoveBehavior that comes with Expression Blend 4.

I’ve been explaining the concept of Fluid UI, as a means to animate discrete properties.  The first example that comes to mind is the Visibility property of an element.  Its either Visible or Collapsed, there is no way to interpolate between the two values. When you change the Visibility property between different VisualStates and check the “Use Fluid UI” button, rather than instantly disappearing, Fluid UI will animate the opacity and scale transform to provide a visual transition between the discrete values.

This type of behavior works with Grid Row and Column positioning as well. If you attach the FluidMoveBehavior to a Grid and set AppliesTo to “Children”, and then at run-time change the Grid Row and Column properties of an element, the item will animate to its new position.

I’ve created a quick sample that demonstrates this behavior.

Run the Fluid Checkerboard

  • Click a rectangle and the ball will animate to that rectangle’s position in the grid
  • The cursor keys are also hooked up to move the ball

Download the source code

—–

The beauty of this sample is that shows by quickly applying the FluidMoveBehavior I can animate the position of an element (with easing) writing very little code.

7 thoughts on “Using FluidMoveBehavior to animate grid coordinates in Silverlight

  1. hi adam,

    I am new to silverlight4 and ms blend4 so can you please tell me how should i start with, i am a webdesigner i used to work in flash but now suddenly my company has told us to learn silverlight but i am getting it difficult in understanding coz its not same as flash. Please help me.

    you can email me at ramsem08@gmail.com the answers.

    Thanks,
    Ram

  2. hi adam,

    I am new to silverlight4 and ms blend4 so can you please tell me how should i start with, i am a webdesigner i used to work in flash but now suddenly my company has told us to learn silverlight but i am getting it difficult in understanding coz its not same as flash. Please help me. I am a front end designer and have no knowledge of coding.

    you can email me at ramsem08@gmail.com the answers.

Leave a Reply