Navigation in Windows Phone 7 Application

I’ve recently started playing with Windows Phone 7 Developer Tools and one of the first thing I asked myself is “How To Link Between Views?!”. I researched the web and found 3 ways to handle navigation: Static Links, Routes and Navigation Service.

First of all, to build a Windows Phone 7 Application you will need to download and install the this. You will also need to have a basic understanding of Silverlight/XAML.

1. First things first, lets create a new Project.

2. Then I created a few pages in a folder I created and named Views (You could call this folder whatever you want…)

3. This is what my Solution Explorer looks like now.

4. To create Static Links, add some Hyperlink to the ContentGrid of MainPage.xaml and give them the NavigateUri property with the path to the page you want to navigate to.


    
    
    

5. Now if you run the application using the Windows Phone 7 Emulator and click one of the Hyperlink you created you should see the content of that page. In my case the only thing I changed is the Page Title..

6. Lets try to do the same thing with the Navigation Service. Open App.xaml and add the following code in

    
        
            
            
            
        
    

7. We now need to tell the Application to use this UriMapper. This is very simple, open App.xaml.cs and add RootFrame.UriMapper = Resources["UriMapper"] as UriMapper; at the end of the constructor. It should look like this:

public App()
{
    // Global handler for uncaught exceptions. 
    // Note that exceptions thrown by ApplicationBarItem.Click will not get caught here.
    UnhandledException += Application_UnhandledException;

    // Standard Silverlight initialization
    InitializeComponent();

    // Phone-specific initialization
    InitializePhoneApplication();

    RootFrame.UriMapper = Resources["UriMapper"] as UriMapper;
}

8. Once this is done, add a button on the MainPage.xaml.


    
    
    
< B utton Content="Go To Page 3" Height="72" HorizontalAlignment="Left" Margin="21,291,0,0" Name="button1" VerticalAlignment="Top" Width="246" Click="button1_Click" />

9. Double click on the button you just added to give it a Click Event. This should create button1_Click method in MaiPage.xaml.cs. Put the following line of code in the method:

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Page3", UriKind.Relative));
}

10. NavigationService also provides you metods like GoBack() to go back to the previous page. If you want to try this, you could add a button a Page3.xaml much like we did for step 9 and put this code in Page3.xaml.cs:

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.GoBack();
}

I know I skipped the second option, Routes. I’ll write about it in another post! I think the most important navigation feature in a Windows Phone 7 application is the NavigationService!

This entry was posted on Thursday, August 12th, 2010 at 1:27 pm and is filed under Windows Phone 7. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

6 Responses to “Navigation in Windows Phone 7 Application”

Catto August 13th, 2010 at 9:28 am

Very Nice Post. MIKE!

Thx 4 the info,
Catto

Hasan August 15th, 2010 at 6:44 am

Nice post man :) Looking for new posts too.

One question please: What is the plug-in you use with wordpress to show the code?

Ben McCormack August 22nd, 2010 at 3:54 pm

This write-up is great. I’m having trouble implementing it because I don’t know the namespaces to use (in XAML or code-behind) in order to make the navigation service available. I read that the beta tools moved around the Navigation controls. Could you let us know what we need to include so that we can use ?

Thanks!

Mike August 23rd, 2010 at 9:24 am

@Ben,

You should have a look at Resharper or it’s free alternative Code Rush Xpress. These software would help you greatly for namespaces (they do way more then just that…).

Otherwise, you need to add xmlns:nav=”clr-namespace:System.Windows.Navigation;assembly=Microsoft.Phone” in App.xaml. The other files don’t need anything.

Peter March 23rd, 2012 at 7:20 pm

Can someone please tell me how to remove the line from under hyperlinks?

Leave a Reply