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:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot" Background="Black"> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <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="EaseOut" /> </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.Source.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(); } }