Click here to Skip to main content
15,880,608 members
Search within:


Articles / Web Development / XHTML
 
Article

Silverlight Page Flip Navigation

,
Rate me:
Please Sign up or sign in to vote.
3.14/5 (20 votes)
21 Jul 2009CC (ASA 2.5) 93.2K   3.1K   34   20
It describes page to page navigation with flip animation in Silverlight

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:

XML
<Grid.Projection>
   <PlaneProjection x:Name="Projection"/>
</Grid.Projection>

And in the code base, add a double animation storyboard to flip the page: 

C#
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:

C#
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

License

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


Written By
Venkatesan Jagadisan
Software Developer iSOFT
India India
Working as a Software Engineer in iSOFT at Chennai, India.

Written By
Balaji Ganesaan
Software Developer (Senior) iSOFT
India India
Working as a Senior Software Engineer in iSOFT at Chennai, India.

Comments and Discussions

 
View All ThreadsFirst Prev Next
GeneralMy vote of 1 Pin
Michael E. Jones27-Jul-09 21:33
Michael E. Jones27-Jul-09 21:33 
GeneralRe: My vote of 1 Pin
jasenschmidt3-Aug-09 19:29
jasenschmidt3-Aug-09 19:29 
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;
Last Visit: 31-Dec-99 18:00     Last Update: 18-Apr-24 0:41Refresh1

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 21 Jul 2009

Article Copyright 2009 by Venkatesan Jagadisan, Balaji Ganesaan
Everything else Copyright © CodeProject, 1999-2024

Web03 2.8:2024-04-02:1