Create a nice Navigation Flip in Silverlight3

1. Add Navigation assembly in the application and import the namespace for the assembly.

xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

2. In this sample,you have to create 4 pages,Page1.xaml,Page2.xaml,Page3.xaml,Page4.xaml under the folder Views.

2. defiine the xaml code

<UserControl x:Class="FlipPages3D.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:navigation="clr-namespace:Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Windows.Controls;assembly=Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Windows.Controls.Navigation" mc:Ig<a href="/tag/nor/" target="_blank" class="keywords">nor</a>able="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot" Background="Black"> <Grid.RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>ns> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="50" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="*" /> </Grid.RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>ns> <StackPanel Orientation="Horizontal" Background="Gray" Grid.Row="0" Grid.Column="0"> <HyperlinkButton Content="Page1" Tag="/Views/Page1.xaml" Background="White" Width="100" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center" Click="HyperlinkButton_Click" /> <HyperlinkButton Content="Page2" Tag="/Views/Page2.xaml" Background="White" Width="100" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center" Click="HyperlinkButton_Click" /> <HyperlinkButton Content="Page3" Tag="/Views/Page3.xaml" Background="White" Width="100" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center" Click="HyperlinkButton_Click" /> <HyperlinkButton Content="Page4" Tag="/Views/Page4.xaml" Background="White" Width="100" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center" Click="HyperlinkButton_Click" /> </StackPanel> <StackPanel Grid.Row="1" Grid.Column="0" Background="Wheat"> <StackPanel.Projection> <PlaneProjection x:Name="mainPanelProjection" /> </StackPanel.Projection> <StackPanel.Resources> <Storyboard x:Name="FlipStart"> <DoubleAnimation From="0" To="90" Duration="00:00:1" Completed="Flip1Half_Completed" Storyboard.TargetName="mainPanelProjection" Storyboard.TargetProperty="RotationY"> </DoubleAnimation> </Storyboard> <Storyboard x:Name="FlipEnd"> <DoubleAnimation From="270" To="360" Duration="00:00:1" Storyboard.TargetName="mainPanelProjection" Storyboard.TargetProperty="RotationY"> <DoubleAnimation.EasingFunction> <BackEase EasingMode="Ea<a href="/tag/SEO/" title="SEO">SEO</a>ut" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </StackPanel.Resources> <navigation:Frame x:Name="MainFrame" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="20" Source="/Views/Page1.xaml" /> </StackPanel> </Grid> </UserControl>

 

3. write the code behind

public partial class MainPage : UserControl { HyperlinkButton menuClicked = null; public MainPage() { InitializeComponent(); } private void HyperlinkButton_Click(object sender,RoutedEventArgs e) { menuClicked = sender as HyperlinkButton; if (MainFrame<a href="/tag/so/" target="_blank" class="keywords">.so</a>urce.ToString() != menuClicked.Tag.ToString()) FlipStart.Begin(); } void Flip1Half_Completed(object sender,EventArgs e) { if (menuClicked != null) MainFrame.Navigate(new Uri(menuClicked.Tag.ToString(),UriKind.Relative)); FlipEnd.Begin(); } }