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();
}
}