Introduction
This article describes how to navigate between pages with flip animation in Silverlight.
Using the Code
The flip animation can be done with the help of PlaneProjection from the namespace System.Windows.Media. You must use the below code snippet in all the XAML pages that needs the flip animation:
<Grid.Projection>
<PlaneProjection x:Name="Projection"/>
</Grid.Projection>
And in the code base, add a double animation storyboard to flip the page:
DoubleAnimation daY1 = new DoubleAnimation { From = 0.00, To = 90.00 };
Storyboard.SetTargetName(daY1, "Projection");
Storyboard.SetTargetProperty(daY1, new PropertyPath("RotationX"));
stb1.Children.Add(daY1);
this.Resources.Add("EndOfPage", stb1);
Storyboard stb = new Storyboard();
stb.Duration = new Duration(TimeSpan.FromSeconds(1));
stb.SpeedRatio = 3;
DoubleAnimation daY = new DoubleAnimation { From = -90.00, To = 0.00 };
Storyboard.SetTargetName(daY, "Projection");
Storyboard.SetTargetProperty(daY, new PropertyPath("RotationX"));
stb.Children.Add(daY);
this.Resources.Add("StartOfPage", stb);
And use this method to navigate from page to page:
public void SwitchToPage(UserControl p)
{
NextPage = p;
if (CurrentPage != p)
{
Storyboard currStb = CurrentPage.Resources["EndOfPage"] as Storyboard;
currStb.Completed += new EventHandler(currStb_Completed);
currStb.Begin();
}
}
History
- 21st July, 2009: Initial post
Submit an article or tip
Post your Blog
News 
Suggestion 
Joke 
Rant 
Admin 
