From cae942657710b9daeb15fbcf82658c493aa9ea97 Mon Sep 17 00:00:00 2001
From: ChrisK91 <ChrisGit@outlook.com>
Date: Sat, 7 Sep 2013 15:47:58 +0200
Subject: [PATCH] Added page transitions (closes #70)

- If you add a new page, set the PhneApplicationsPages style to
Style="{StaticResource Animated}"
---
 SparklrWP/App.xaml               | 31 ++++++++++++++++++++++++++++++-
 SparklrWP/App.xaml.cs            |  7 ++++++-
 SparklrWP/FirstRun.xaml          |  2 +-
 SparklrWP/LoginPage.xaml         |  2 +-
 SparklrWP/NewPostPage.xaml       |  2 +-
 SparklrWP/Pages/About.xaml       |  2 +-
 SparklrWP/Pages/ChatPage.xaml    |  2 +-
 SparklrWP/Pages/DetailsPage.xaml |  2 +-
 SparklrWP/Pages/InboxPage.xaml   |  2 +-
 SparklrWP/Pages/MainPage.xaml    |  2 +-
 SparklrWP/Pages/PinchToZoom.xaml |  2 +-
 SparklrWP/Pages/Profile.xaml     |  2 +-
 SparklrWP/Pages/SearchPage.xaml  |  2 +-
 13 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/SparklrWP/App.xaml b/SparklrWP/App.xaml
index dd827c4..049a3dc 100644
--- a/SparklrWP/App.xaml
+++ b/SparklrWP/App.xaml
@@ -2,7 +2,8 @@
     x:Class="SparklrWP.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:phone="clr-namespace:Microsoft.Phone.Controls.Updated;assembly=Microsoft.Phone"
+    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
+    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls.Updated;assembly=Microsoft.Phone.Controls.Toolkit.Updated"
     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
     xmlns:resources="clr-namespace:AviarySDK.Resources;assembly=AviarySDK">
 
@@ -15,6 +16,34 @@
             </ResourceDictionary.MergedDictionaries>
             <resources:Images x:Key="ImageResources"/>
             <aviary:LocalizedStrings xmlns:aviary="clr-namespace:AviarySDK;assembly=AviarySDK" x:Key="LocalizedStrings" />
+            
+            <Style TargetType="phone:PhoneApplicationPage" x:Key="Animated">
+                <Setter Property="toolkit:TransitionService.NavigationInTransition">
+                    <Setter.Value>
+                        <toolkit:NavigationInTransition>
+                            <toolkit:NavigationInTransition.Backward>
+                                <toolkit:TurnstileTransition Mode="BackwardIn"/>
+                            </toolkit:NavigationInTransition.Backward>
+                            <toolkit:NavigationInTransition.Forward>
+                                <toolkit:TurnstileTransition Mode="ForwardIn"/>
+                            </toolkit:NavigationInTransition.Forward>
+                        </toolkit:NavigationInTransition>
+                    </Setter.Value>
+                </Setter>
+                <Setter Property="toolkit:TransitionService.NavigationOutTransition">
+                    <Setter.Value>
+                        <toolkit:NavigationOutTransition>
+                            <toolkit:NavigationOutTransition.Backward>
+                                <toolkit:TurnstileTransition Mode="BackwardOut"/>
+                            </toolkit:NavigationOutTransition.Backward>
+                            <toolkit:NavigationOutTransition.Forward>
+                                <toolkit:TurnstileTransition Mode="ForwardOut"/>
+                            </toolkit:NavigationOutTransition.Forward>
+                        </toolkit:NavigationOutTransition>
+                    </Setter.Value>
+                </Setter>
+
+            </Style>
         </ResourceDictionary>
     </Application.Resources>
 
diff --git a/SparklrWP/App.xaml.cs b/SparklrWP/App.xaml.cs
index 93bc0dd..457dbf8 100644
--- a/SparklrWP/App.xaml.cs
+++ b/SparklrWP/App.xaml.cs
@@ -8,6 +8,7 @@
 using System.Security.Cryptography;
 using System.Text;
 using System.Windows;
+using System.Windows.Media;
 using System.Windows.Navigation;
 
 namespace SparklrWP
@@ -207,7 +208,11 @@ private void InitializePhoneApplication()
 
             // Create the frame but don't set it as RootVisual yet; this allows the splash
             // screen to remain active until the application is ready to render.
-            RootFrame = new PhoneApplicationFrame();
+            RootFrame = new Microsoft.Phone.Controls.Updated.TransitionFrame()
+                {
+                    Background = new SolidColorBrush(Colors.Transparent)
+                };
+
             RootFrame.Navigated += CompleteInitializePhoneApplication;
             RootFrame.Navigating += RootFrame_Navigating;
             GlobalLoading.Instance.Initialize(RootFrame);
diff --git a/SparklrWP/FirstRun.xaml b/SparklrWP/FirstRun.xaml
index 0cd47d5..7f53148 100644
--- a/SparklrWP/FirstRun.xaml
+++ b/SparklrWP/FirstRun.xaml
@@ -10,7 +10,7 @@
 	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
 	x:Class="SparklrWP.FirstRun"
 	SupportedOrientations="Portrait" Orientation="Portrait"
-	shell:SystemTray.IsVisible="True">
+	shell:SystemTray.IsVisible="True" Style="{StaticResource Animated}">
     <phone:PhoneApplicationPage.Resources>
         <Storyboard x:Name="HelloAni">
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
diff --git a/SparklrWP/LoginPage.xaml b/SparklrWP/LoginPage.xaml
index 5d1650d..12690ca 100644
--- a/SparklrWP/LoginPage.xaml
+++ b/SparklrWP/LoginPage.xaml
@@ -11,7 +11,7 @@
     FontSize="{StaticResource PhoneFontSizeNormal}"
     Foreground="{StaticResource PhoneForegroundBrush}"
     SupportedOrientations="Portrait" Orientation="Portrait"
-    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480">
+    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480" Style="{StaticResource Animated}">
 	<phone:PhoneApplicationPage.Resources>
 		<Storyboard x:Name="Ani1">
 			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetY)" Storyboard.TargetName="ContentPanel">
diff --git a/SparklrWP/NewPostPage.xaml b/SparklrWP/NewPostPage.xaml
index 6dd36dc..d54551f 100644
--- a/SparklrWP/NewPostPage.xaml
+++ b/SparklrWP/NewPostPage.xaml
@@ -11,7 +11,7 @@
     Foreground="{StaticResource PhoneForegroundBrush}"
     SupportedOrientations="Portrait" Orientation="Portrait"
     mc:Ignorable="d"
-    shell:SystemTray.IsVisible="True" d:DesignHeight="696" d:DesignWidth="480" Loaded="PhoneApplicationPage_Loaded">
+    shell:SystemTray.IsVisible="True" d:DesignHeight="696" d:DesignWidth="480" Loaded="PhoneApplicationPage_Loaded" Style="{StaticResource Animated}">
 
 
 
diff --git a/SparklrWP/Pages/About.xaml b/SparklrWP/Pages/About.xaml
index d95df6d..848f312 100644
--- a/SparklrWP/Pages/About.xaml
+++ b/SparklrWP/Pages/About.xaml
@@ -11,7 +11,7 @@
     Foreground="{StaticResource PhoneForegroundBrush}"
     SupportedOrientations="Portrait" Orientation="Portrait"
     mc:Ignorable="d"
-    shell:SystemTray.IsVisible="True">
+    shell:SystemTray.IsVisible="True" Style="{StaticResource Animated}">
 
     <!--LayoutRoot è la griglia radice in cui viene inserito tutto il contenuto della pagina-->
     <Grid x:Name="LayoutRoot" Background="#FF454050">
diff --git a/SparklrWP/Pages/ChatPage.xaml b/SparklrWP/Pages/ChatPage.xaml
index 07e195e..12ba8dd 100644
--- a/SparklrWP/Pages/ChatPage.xaml
+++ b/SparklrWP/Pages/ChatPage.xaml
@@ -15,7 +15,7 @@
     
     SupportedOrientations="Portrait" Orientation="Portrait"
     mc:Ignorable="d"
-    shell:SystemTray.IsVisible="True" d:DataContext="{d:DesignData ../SampleData/ChatViewModelSampleData.xaml}">
+    shell:SystemTray.IsVisible="True" d:DataContext="{d:DesignData ../SampleData/ChatViewModelSampleData.xaml}" Style="{StaticResource Animated}">
 
     <Grid x:Name="LayoutRoot" Background="#FF454050">
         <Grid.Resources>
diff --git a/SparklrWP/Pages/DetailsPage.xaml b/SparklrWP/Pages/DetailsPage.xaml
index 1bbc07b..c4473f1 100644
--- a/SparklrWP/Pages/DetailsPage.xaml
+++ b/SparklrWP/Pages/DetailsPage.xaml
@@ -14,7 +14,7 @@
 	FontSize="{StaticResource PhoneFontSizeNormal}"
 	Foreground="{StaticResource PhoneForegroundBrush}"
 	SupportedOrientations="Portrait"  Orientation="Portrait" 
-	shell:SystemTray.IsVisible="True">
+	shell:SystemTray.IsVisible="True" Style="{StaticResource Animated}">
 
     <!--Data context is set to sample data above and first item in sample data collection below and LayoutRoot contains the root grid where all other page content is placed-->
     <Grid x:Name="LayoutRoot" Background="#FF454050">
diff --git a/SparklrWP/Pages/InboxPage.xaml b/SparklrWP/Pages/InboxPage.xaml
index d34c47c..2b7c1c5 100644
--- a/SparklrWP/Pages/InboxPage.xaml
+++ b/SparklrWP/Pages/InboxPage.xaml
@@ -14,7 +14,7 @@
     Foreground="{StaticResource PhoneForegroundBrush}"
     SupportedOrientations="Portrait" Orientation="Portrait"
     mc:Ignorable="d"
-    shell:SystemTray.IsVisible="True" d:DataContext="{d:DesignData ../SampleData/InboxViewModelSampleData.xaml}">
+    shell:SystemTray.IsVisible="True" d:DataContext="{d:DesignData ../SampleData/InboxViewModelSampleData.xaml}" Style="{StaticResource Animated}">
 
     <Grid x:Name="LayoutRoot" Background="#FF454050">
         <Grid.Resources>
diff --git a/SparklrWP/Pages/MainPage.xaml b/SparklrWP/Pages/MainPage.xaml
index 45c7972..094431b 100644
--- a/SparklrWP/Pages/MainPage.xaml
+++ b/SparklrWP/Pages/MainPage.xaml
@@ -15,7 +15,7 @@
     FontSize="{StaticResource PhoneFontSizeNormal}"
     Foreground="{StaticResource PhoneForegroundBrush}"
     SupportedOrientations="Portrait"  Orientation="Portrait"
-    shell:SystemTray.IsVisible="True" Background="#FF454050">
+    shell:SystemTray.IsVisible="True" Background="#FF454050" Style="{StaticResource Animated}">
 	<phone:PhoneApplicationPage.Resources>
 		<Storyboard x:Name="NotificationAppear">
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NotificationPopup">
diff --git a/SparklrWP/Pages/PinchToZoom.xaml b/SparklrWP/Pages/PinchToZoom.xaml
index ef20a18..3173ea0 100644
--- a/SparklrWP/Pages/PinchToZoom.xaml
+++ b/SparklrWP/Pages/PinchToZoom.xaml
@@ -11,7 +11,7 @@
     x:Class="SparklrWP.Pages.PinchToZoom"
     SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
     mc:Ignorable="d"
-    shell:SystemTray.IsVisible="False">
+    shell:SystemTray.IsVisible="False" Style="{StaticResource Animated}">
 	<phone:PhoneApplicationPage.Resources>
 		<Storyboard x:Name="LoadingFinished">
 			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="progressBar">
diff --git a/SparklrWP/Pages/Profile.xaml b/SparklrWP/Pages/Profile.xaml
index 5469469..48815a1 100644
--- a/SparklrWP/Pages/Profile.xaml
+++ b/SparklrWP/Pages/Profile.xaml
@@ -16,7 +16,7 @@
 	Foreground="{StaticResource PhoneForegroundBrush}"
 	SupportedOrientations="Portrait"  Orientation="Portrait"
 	shell:SystemTray.IsVisible="False" Background="Black"
-	d:DataContext="{d:DesignData ../SampleData/UserProfileViewModelSampleData.xaml}"
+	d:DataContext="{d:DesignData ../SampleData/UserProfileViewModelSampleData.xaml}" Style="{StaticResource Animated}"
 	x:Name="ProfilePage">
 	<phone:PhoneApplicationPage.ApplicationBar>
 		<shell:ApplicationBar BackgroundColor="#FF2A2339">
diff --git a/SparklrWP/Pages/SearchPage.xaml b/SparklrWP/Pages/SearchPage.xaml
index c282bd3..c25e6d4 100644
--- a/SparklrWP/Pages/SearchPage.xaml
+++ b/SparklrWP/Pages/SearchPage.xaml
@@ -14,7 +14,7 @@
     FontSize="{StaticResource PhoneFontSizeNormal}"
     Foreground="{StaticResource PhoneForegroundBrush}"
     SupportedOrientations="Portrait" Orientation="Portrait"
-    shell:SystemTray.IsVisible="True" d:DataContext="{d:DesignData ../SampleData/SearchViewModelSampleData.xaml}">
+    shell:SystemTray.IsVisible="True" d:DataContext="{d:DesignData ../SampleData/SearchViewModelSampleData.xaml}" Style="{StaticResource Animated}">
 
 
     <Grid x:Name="LayoutRoot" Background="#FF454050" Loaded="LayoutRoot_Loaded">