WinRT XAML Navigating from Page to Page: How it differs from Windows Phone 7

After getting the Visual Studio 2011 to work with Windows 8 Consumer Preview, I've been trying to get my head around the WinRT / Metro-details. For now, I’ve decided to stay with the XAML-side of things, because that’s the most familiar to me. It’s been interesting to learn how everyday tasks are handled with WinRT when compared to a platform like WP7.

On a side-note: I’m not sure if I should be talking about writing “Metro-style apps” instead of “WinRT-apps”. I suppose time will tell which will become the de facto but personally I like the WinRT more.

Page navigation

Compared to the Windows Phone 7 –platform, navigating between different parts of the application is very similar in WinRT. The WinRT-app can contain multiple pagesand navigating between them requires just a call to a Navigate-method. What’s good is that you don’t have to navigate using the URIs like in WP7 and instead you can just pass in the type of the next page.

this.Frame.Navigate(typeof(BlankPage));

Given that we have created a Blank Application project and added an another BlankPage to it, we can easily navigate from the first page to the next page:

<Grid>
     <Button Content="Navigation" Click="GoForward"/> 
</Grid>

private void GoForward(object sender, RoutedEventArgs e)
{
    this.Frame.Navigate(typeof(AnotherPage));
}

If we run the app, we can see that navigation works. But there’s no way for the user to navigate back.

Navigating back

Navigating back to the previous page is even easier than navigating forward. From the second page we just need to call the GoBack-method:

this.Frame.GoBack();

Passing parameters

In Windows Phone 7, passing parameters between the pages requires that the parameters are added to the query string of the navigated page. In WinRT we can pass objects.The object is passed using the second parameter of the Navigate-method:

this.Frame.Navigate(typeof(AnotherPage), customer);

In the page where we are navigated to we can access the object using NavigationEventArgs.Parameter:

protected override void OnNavigatedTo(NavigationEventArgs e) 
{ 
    var cust = e.Parameter as Customer; 
}

Navigating back multiple pages

Navigating back multiple pages in WinRT is easier than in WP7. We can call the GoBack-method multiple times in a loop. In WP7 this would cause an exception. Given a situation where we add a third page to the app and want it to have “Go Home” –button, we can call the following code which will navigate the user back to the first page:

while (this.Frame.CanGoBack) 
{ 
    this.Frame.GoBack(); 
}

Defining the first page

In WinRT, the application’s start page can be configured through the App.xaml.cs. Replacing the BlankPage with AnotherPage makes our app to start from the second page:

protected override void OnLaunched(LaunchActivatedEventArgs args) 
{ 
    if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) 
    { 
        //TODO: Load state from previously suspended application 
    }

    // Create a Frame to act navigation context and navigate to the first page 
    var rootFrame = new Frame(); 
    rootFrame.Navigate(typeof(AnotherPage));

    // Place the frame in the current Window and ensure that it is active 
    Window.Current.Content = rootFrame; 
    Window.Current.Activate(); 
}

Navigation in MVVM

Here's a separate post which shows one way to do navigation when using MVVM pattern.