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.
if(animated)
AnimateGrids(changeDexter, commGridWidth, mainGridWidth);
else
{
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,
Duration=DURATION
};
Storyboard.SetTarget(commGridAnimation, commGrid);
Storyboard.SetTargetProperty(commGridAnimation,
new PropertyPath(MarginProperty));
Storyboard.SetTarget(mainGridAnimation, mainGrid);
Storyboard.SetTargetProperty(mainGridAnimation,
new PropertyPath(MarginProperty));
sb.Children.Add(commGridAnimation);
sb.Children.Add(mainGridAnimation);
sb.Completed += new EventHandler(postAnimation);
sb.Begin();
}
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
