Markup for navigation transition animations

image_pdfimage_print
   
  

<Window x:Class="AnimateNavigateTransitions.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimateNavigateTransitions" Height="300" Width="300">
  <Window.Resources>
    <Storyboard x:Key="transitionAnimation" TargetName="transitionPlaceholder">
      <DoubleAnimation Storyboard.TargetProperty="Opacity"
                       From="1" To="0" DecelerationRatio="1"
                       Duration="0:0:0.4" />
    </Storyboard>
  </Window.Resources>

  <StackPanel>
    <Frame Name="mainFrame" Source="Page1.xaml" />
    <Canvas Name="transitionPlaceholder" IsHitTestVisible="False" />
  </StackPanel>
</Window>
//File:Window.xaml.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Navigation;
using System.Windows.Media.Animation;


namespace AnimateNavigateTransitions
{
    public partial class Window1 : System.Windows.Window
    {
        VisualBrush lastPageBrush;
        public Window1()
        {
            InitializeComponent();
            mainFrame.Navigating += new System.Windows.Navigation.NavigatingCancelEventHandler(mainFrame_Navigating);
            mainFrame.Navigated += new NavigatedEventHandler(mainFrame_Navigated);
        }
        void mainFrame_Navigating(object sender, NavigatingCancelEventArgs e)
        {
            Page lastPage = mainFrame.Content as Page;
            if (lastPage == null){
                lastPageBrush = null;
               return;
            }
            lastPageBrush = new VisualBrush(lastPage);
            lastPageBrush.Viewbox = new Rect(0, 0, lastPage.ActualWidth,lastPage.ActualHeight);
            lastPageBrush.ViewboxUnits = BrushMappingMode.Absolute;
            lastPageBrush.Stretch = Stretch.None;

            Point pageOffset = lastPage.TransformToVisual(this).Transform(new Point());
            transitionPlaceholder.Margin = new Thickness(pageOffset.X, pageOffset.Y,0, 0);
        }
        void mainFrame_Navigated(object sender, NavigationEventArgs e)
        {
            if (lastPageBrush == null){
               return ;
            }    
            transitionPlaceholder.Background = lastPageBrush;
            lastPageBrush = null;
            Storyboard sb = (Storyboard) FindResource("transitionAnimation");
            sb.Begin(this);
        }
    }
}