Added page transitions (closes #70)

- If you add a new page, set the PhneApplicationsPages style to Style="{StaticResource Animated}"
windowsphonehacker · Sep 7, 2013 · cae9426 · cae9426
1 parent ccac90d
commit cae9426
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">