Silverlight Page Flip Navigation

Download source - 548.8 KB

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

21^st July, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Creative Commons Attribution-ShareAlike 2.5 License

About the Authors

Venkatesan Jagadisan

Software Developer
iSOFT

India

Member

Working as a Software Engineer in iSOFT at Chennai, India.

Balaji Ganesaan

Software Developer (Senior)
iSOFT

India

Member

Working as a Senior Software Engineer in iSOFT at Chennai, India.

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

I need Help with public void SwitchToPage(UserControl p) in vb.net

der2201

20:11 8 Aug '11

I friend, I need help, i need create public void SwitchToPage(UserControl p) in vb.net, help me please, my problems is in create this line "currStb.Completed += new EventHandler(currStb_Completed);" in vb.net, not appear this event "Completed" in vb.net, help please !!!
Sign In·View Thread·Permalink

My vote of 2

Michael Eber

7:51 31 Dec '09

two guys to write this weak article? Really?
Sign In·View Thread·Permalink	5.00/5 (1 vote)

My vote of 1

waletzky

16:20 15 Sep '09

A good article doesn't just include code - it includes a description of WHY the code is as it is. What does the plane projection do? Why did you choose it? How about a comment in the code?
Sign In·View Thread·Permalink	4.75/5 (3 votes)

Excellent Article,but one question!

GomathiR

1:06 25 Aug '09

Hi guys, This is an excellent article. It works great. But in my solution, i dont have any Mainpage. I just want to navigate from page1 to page2.when i click a link in page1,rotation happens,but page2 is not loaded. Any suggestion for this ? Gomathi R
Sign In·View Thread·Permalink

Re: Excellent Article,but one question!

kamrajj

3:18 25 Aug '09

whats shown after rotation?? btw r u using c# or vb code. coz my vb code doesnt seems to be working.. dont know what is missing. :(
Sign In·View Thread·Permalink

Re: Excellent Article,but one question!

GomathiR

20:39 25 Aug '09

Hi, I am using c# only. If i click the link Page1 rotates , but Page2 does not appears. Gomathi R
Sign In·View Thread·Permalink

Good work but i dont know what am I missing

kamrajj

0:00 24 Aug '09

Please Please help me out of this.. This seems to be a straight forward thing. It really works great in C#. but since my application is in VB, I tried converting it in VB and it didn't worked as expected. After converting, when I click the buttons the other page simply loads without and flip animation. Any Idea what am I missing out there ???
Sign In·View Thread·Permalink

documentation please

TJDOAD

11:04 12 Aug '09

I am new to this - can someone help me with little description on - how to implement this code.... --TJ
Sign In·View Thread·Permalink	2.00/5 (1 vote)

cool code

forgetuu

17:54 11 Aug '09

thinks.
Sign In·View Thread·Permalink	3.00/5 (1 vote)

My vote of 1

positronvx

22:15 27 Jul '09

bla
Sign In·View Thread·Permalink	1.00/5 (3 votes)

My vote of 1

Michael E. Jones

21:33 27 Jul '09

Sort of lacks substance...
Sign In·View Thread·Permalink

Re: My vote of 1

jasenschmidt

19:29 3 Aug '09

This posting is not really all the valid, if you are going to use the same animation for all the pages. Then you only need to have the MainPage.xaml contain the following:

<UserControl x:Class="SilverlightFlipNavigation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="auto" Height="auto">
    <Grid x:Name="LayoutRoot" Opacity="1"> 
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.167*"/>
            <ColumnDefinition Width="0.681*"/>
        </Grid.ColumnDefinitions>
        <Border BorderBrush="#FF2DA2AC" BorderThickness="3,3,3,3" VerticalAlignment="Stretch" CornerRadius="5,5,5,5" Background="{x:Null}" Margin="0,0,0,0" Opacity="1"/>
        <StackPanel Grid.Column="0" Margin="10,10,10,10" >
            <Button Content="Page 1" Margin="0,10,0,10" Click="Button1_Click"></Button>
            <Button Content="Page 2" Margin="0,10,0,10" Click="Button2_Click"></Button>
            <Button Content="Page 3" Margin="0,10,0,10" Click="Button3_Click"></Button>
            <Button Content="Page 4" Margin="0,10,0,10" Click="Button4_Click"></Button>
        </StackPanel>
 
        <Border Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" BorderBrush="#FF2DA2AC" BorderThickness="3,3,3,3" Background="{x:Null}" CornerRadius="5,5,5,5">
            <Grid x:Name="PageContainer" RenderTransformOrigin="0.212,0.857" Margin="3,3,3,3">
                <Grid.Projection>
                    <PlaneProjection x:Name="PageContainerProjection"/>
                </Grid.Projection>
            </Grid>
        </Border>
    </Grid>
</UserControl>

The other pages would have to have the following:

<UserControl x:Class="SilverlightFlipNavigation.Page3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="Auto" Height="Auto">
	<Grid x:Name="LayoutRoot" Background="Gray">
		<TextBlock Text="Page 3" FontSize="20"></TextBlock>
	</Grid>
</UserControl>

This removes the need to have the PlaneProjection in each of the pages and therefore you can remove the code from each of the the Page{number}.xaml.cs files

The only thing that you would need to change in the current code is the way the resources are accessed before call begin on the animation and that would be to use the MainPage's resources instead of calling CurrentPage and NextPage

example Storyboard stb = NextPage.Resources["StartOfPage"] as Storyboard; becomes Storyboard stb = this.Resources["StartOfPage"] as Storyboard;

My vote of 2

lneir

15:48 27 Jul '09

no documentation
Sign In·View Thread·Permalink

Cool code, not so cool article

blackjack2150

20:43 21 Jul '09

Your code works very nicely and it's just what I was looking for. However you need to add some explanations of the snippets. I still voted 5 for encouragement.
Sign In·View Thread·Permalink	1.00/5 (1 vote)

excellent

arun123@poll

20:23 21 Jul '09

excellent
Sign In·View Thread·Permalink	2.00/5 (1 vote)

My vote of 1

MW_Justin

6:15 21 Jul '09

No article; just a couple snippets of code and a sentence or two.
Sign In·View Thread·Permalink

Re: My vote of 1

Venkatesan Jagadisan

7:18 21 Jul '09

Thanks for your comments. This is our first post in codeproject and we are newbie to silverlight. We will try to do better in future. venki
Sign In·View Thread·Permalink	5.00/5 (1 vote)

My vote of 2

emilio_grv

2:25 21 Jul '09

almost no explanation
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Re: My vote of 2

Balaji Ganesaan

19:02 21 Jul '09

Thanks for your comments, this is our first blog in codeproject. We do our best in the next sequence of blogs.
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Re: My vote of 2

emilio_grv

4:05 1 Jan '10

Balaji Ganesaan wrote: is our first blog in codeproject err... no, it has been posted as "ARTICLE". Blog posts are other things. If that's was your original intention, that's the reasons for all the poor voting. 2 bugs found. > recompile ... 65534 bugs found.
Sign In·View Thread·Permalink	2.00/5 (1 vote)