Windows Phone From Scratch – Navigation II

In the previous WPFS we covered the basics of Navigation and the in the one before NavigationAnimationthat we covered the fundamentals of animationLet’s combine these two ideas to create a better navigation experience.

When we move from page 1 to page 2, a small amount of animation can make the experience more interesting and less confusing for the user.  For example, rather than having the first page be replaced instantly by the second page, we can animate the first page off and then have the second page revealed “behind” the first.

To accomplish this, make a copy of the original Navigation program and name the new copy PhoneNav2.  Open the project in Blend.

Animation and Storyboards

Our goal is to create a storyboard that animates the contents of the page up and off, and then to trigger that storyboard using the Page 1 button.  To begin, navigate to NewStopryboardMainPage.xaml and click on the plus sign that indicates  New Storyboard, on the Objects and Timeline (see figure)

Name the new storyboard HidePage and place the timeline marker at 1/2 second.  Click on LayoutRoot (the root grid for the page) and in the properties window scroll down to and open the Transform panel.  Click on the first transform (Translate) and set the x value to –500 and the y value to –800.  The grid will move to the upper left-hand corner, just above the phone and out of sight. 

Technically, a translate transform is used to translate from one coordinate system to another, but the net effect is to “move” the layoutroot to new coordinates relative to the phone page.

Press the play button in the animation timeline to see the animation as it will be shown when the storyboard is run.  You see the page “fly” off to the upper left.

Click on the red recording button to turn off recording this storyboard.

Wiring the Storyboard to the Button

Save all the files and then click on the projects tab, right-click on solution and choose Edit in Visual Studio – which will cause VS to open to this project.  Open MainPage.xaml.cs and note that you already have event handlers for the Page1 and Page2 click events. 

When you press the Page1 button the Navigate static method is called, as explained in the previous mini-tutorial. At that point an event is fired that you are free to override: OnNavigatingFrom

Overriding OnNavigatingFrom

In your override you’ll first call the base method, and then you’ll stash away the URL  that you are to navigate to in a new private member variable, and then you’ll cancel the navigation. 

With navigation cancelled you can call your storyboard’s begin method to cause the storyboard to run.   

This will hide the page but you need notification of when the storyboard ends, so open the MainPage.xaml file and locate the start of the storyboard, and add a name for a method to be called when the Storyboard completes:

 <phone:PhoneApplicationPage.Resources>
    <Storyboard
       x:Name="HidePage" Completed="HidePageCompleted">

Return to MainPage.xaml.cs where you can now implement the HidePageCompleted method, whose job it is to pick up the saved URL and navigate to that page.    For completeness and context, here is the entire MainPage.xaml.cs – the new material is all in the bottom half of the file:

using System;
using System.Windows;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;

namespace PhoneNav
{
   public partial class MainPage : PhoneApplicationPage
   {
      public MainPage()
      {
         InitializeComponent();
         Page1.Click += Page1_Click;
         Page2.Click += Page2_Click;
      }

      void Page2_Click( object sender, RoutedEventArgs e )
      {
         NavigationService.Navigate( 
            new Uri( "/Page2.xaml", UriKind.Relative ) );
      }

      void Page1_Click( object sender, RoutedEventArgs e )
      {
         NavigationService.Navigate( 
            new Uri( "/Page1.xaml", UriKind.Relative ) );
      }

      public Uri UriToNavigateTo { get; set; }

      protected override void OnNavigatingFrom( 
         NavigatingCancelEventArgs e )
      {
         base.OnNavigatingFrom( e );

         if ( UriToNavigateTo == null )
         {
            e.Cancel = true;
            UriToNavigateTo = e.Uri;
            HidePage.Begin();
         }
         else
         {
            UriToNavigateTo = null;
         }
      }

      private void HidePageCompleted( 
         object sender, EventArgs e )
      {
         NavigationService.Navigate( UriToNavigateTo );
      }
   }
}

 

Once the HidePageCompleted method runs you will again be navigating to the new URI, but this time you’ll enter the else clause of the OnNavigatingFrom which will erase the stored URI and, since it doesn’t cancel the navigation, you’ll then navigate to the new page.

The complete source for this example is available here.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Patterns & Skills. Bookmark the permalink.

One Response to Windows Phone From Scratch – Navigation II

  1. J says:

    This example causes the back button to be handled incorrectly. The back button will show the correct page, but the animation never gets canceled, so it appears blank.

Leave a Reply

Your email address will not be published.