Windows Phone From Scratch – Navigation

To navigate from one page to another, you can take advantage of the static NavNavigate method on the page’s read-only NavigationService property.  This passes your request to the NavigationService Singleton for your application, and greatly simplifies the navigation syntax.

A Quick Demo

Demos should, in my opinion, be absolutely as simple as humanly possible, to keep the focus on the topic at hand.  In that spirit, we’ll create a new application with just three pages:

  • Main Page
  • Page1
  • Page2

    For each page we’ll adjust the application title and page title, so that the page is self-identifying; e.g.,

    <StackPanel
       x:Name="TitlePanel"
       Grid.Row="0"
       Margin="12,17,0,28">
       <TextBlock
          x:Name="ApplicationTitle"
          Text="Phone Nav"
          Style="{StaticResource PhoneTextNormalStyle}" />
       <TextBlock
          x:Name="PageTitle"
          Text="Page 2"
          Margin="9,-7,0,0"
          Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>

    On MainPage we’ll place two buttons, one saying Page 1 and the other saying Page 2.  We’ll also implement event handlers for each, that use the Navigation service.  Here is the complete code-behind for MainPage,

    using System;
    using System.Windows;
    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 ) );
          }
       }
    }

    Run the application. Clicking Page1 takes you there instantly (we may want to add animation at some point to make the transition less confusing).

    For now, to navigate back, use the back button.

    In the next mini-tutorial we’ll look at the events that are raised during navigation and how you can override them to take greater control of the navigation.

    Share

    About Jesse Liberty

    Jesse Liberty is a Master Consultant for Falafel Software, and has 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 Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
    This entry was posted in Patterns & Skills. Bookmark the permalink.

    4 Responses to Windows Phone From Scratch – Navigation

    1. Sounds like a great application, hope you’ll build it. For this series, it seems a bit too advanced, and I’m already in the middle of another start to finish project with The Full Stack. But still, a cool idea.

    2. Peter Wone says:

      Just to clarify why spoken directions are desirable, this would give you turn-by-turn navigation, useful in a car and vital on a motorcycle. On my bike I cannot use a display type GPS but I -can- listen to directions with my in-helmet bluetooth headset.

    3. Peter Wone says:

      If you really want to impress me, Jessie, walk us through an app that wraps the Maps application (or if we can’t do that then we’ll have to recreate it using the Bing Maps silverlight control) and reads out the waypoint instructions as you approach each waypoint.

      To trigger a total nerdgasm in millions of readers, get Jen Taylor to do the voice (Cortana from Halo).

    4. Pingback: http://links.ginktage.com

    Leave a Reply

    Your email address will not be published.

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>