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.

This entry was posted in Client Technologies, Tutorials and tagged . Bookmark the permalink.

7 Responses to Using FluidMoveBehavior to animate grid coordinates in Silverlight

  1. Raghuraman says:

    Excellent Post !!! Thx for Sharing !!! The Demo is Ultra Cool !!! Wish you had put even more Checkers on the Board !!!

  2. This totally rocks…

  3. Pingback: Dew Drop – May 14, 2010 | Alvin Ashcraft's Morning Dew

  4. Pingback: Silverlight on Android is a giant Maybe

  5. ram says:

    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

  6. ram says:

    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.

  7. Shawpnendu says:

    Nice use of expression blend. Thanks a lot.

Leave a Reply