About Me

reno, NV, United States
As of 2011, I have ten years experience in various technologies as C#, WPF, Java, J2EE, C++. For the past three years, I have been extensively working on various .net and java technologies including but not limited to WPF , C# , WCF and composite application guidance (Prism ).

Friday, February 6, 2009

Flying Grids using margin animation

The idea of doing this is to make the application comfortable for left handed and right handed people equally. We came across this problem when we started development of app for touchscreens. The RH people required the command grid on RHS and LH ppl on left handed respectively. There are two grids, One is a command grid (referred as commGrid) and the other is mainGrid. The mainGrid has a button Swap me! When the button is hit, the main grid and commGrid swap. the main window of the app (window1.xaml) has following grid ( superGrid).

The button_click event handler is as follows...

private void Button_Click(object sender, RoutedEventArgs e)
//calculate commGrid and mainGrid widths
double commGridWidth = commGrid.ActualWidth;
double mainGridWidth = mainGrid.ActualWidth;

//animated is a bool const at app level to check if animation is enabled.
AnimateGrids(changeDexter, commGridWidth, mainGridWidth);
GridChange(commGridWidth, mainGridWidth);
changeDexter(this, EventArgs.Empty);



The most important function where the central logic lies is AnimateGrids. Since Margin does not have a animation by itself, we can use thickness animation. I have two animations, one for each grid.

private void AnimateGrids(EventHandler postAnimation, double commGridWidth, double mainGridWidth)

* If commGrid is right
* commGrid.Margin.Left should move from 0 to -mainGridWidth
* commGrid.Margin.Right should move from 0 to +mainGridWidth
* If commGrid is left
* commGrid.Margin.Left should move from 0 to +mainGridWidth
* commGrid.Margin.Right should move from 0 to -mainGridWidth

Storyboard sb = new Storyboard();

ThicknessAnimation commGridAnimation
= new ThicknessAnimation
From =
new Thickness(0),
To =
new Thickness((isRightHanded ? -1 : 1) * mainGridWidth, 0,
(isRightHanded ? 1 : -1) * mainGridWidth, 0),
AccelerationRatio = 0.2,
FillBehavior = FillBehavior.Stop,
DecelerationRatio = 0.8,
Duration = DURATION

ThicknessAnimation mainGridAnimation
= new ThicknessAnimation
From =
new Thickness(0),
To =
new Thickness((isRightHanded ? 1 : -1)*commGridWidth, 0,
(isRightHanded ? -1 : 1)*commGridWidth, 0),

FillBehavior = FillBehavior.Stop,
AccelerationRatio = 0.2,
DecelerationRatio = 0.8,


Storyboard.SetTarget(commGridAnimation, commGrid);
new PropertyPath(MarginProperty));

Storyboard.SetTarget(mainGridAnimation, mainGrid);
new PropertyPath(MarginProperty));


sb.Completed += new EventHandler(postAnimation);



ChangeDexter is an event handler which is defined as

private void changeDexter(object sender, EventArgs e)
isRightHanded = !isRightHanded;
//Swap columns
Grid.SetColumn(mainGrid, isRightHanded ? 0 : 1);
Grid.SetColumn(commGrid, isRightHanded ? 1 : 0);

//Swap widths
GridLength gl = superGrid.ColumnDefinitions.ElementAt(0).Width;
superGrid.ColumnDefinitions.ElementAt(0).Width = superGrid.ColumnDefinitions.ElementAt(1).Width;
superGrid.ColumnDefinitions.ElementAt(1).Width = gl;


ChangeDexter is called at the end of animation.

Download source code here

Happy coding!
Pradeep Mahdevu


Carole said...

Thanks for this! I'm writing a WPF app that is a puzzle where you swap pieces to solve the image and I wanted to animate the pieces exchanging places. Your example helped me figure it out and it's slick!

Anonymous said...

i can not wait to read far more from you. this is actually terrific site.


Cindy Dy said...

Thank you for this post. Keep it up. Hope to read more post from you guys.



Blogger Syntax Highliter