Windows 8 Metro Style Apps - Implementing Navigation with XAML

09 November 2011

The current Windows 8 developer preview contains pre-built templates for developing Metro style apps with XAML. Unfortunately, these templates do not include demonstration of  how to provide an easy way to afford navigation across your application.

Luckily, we have the trusty Frame and Page classes from the original implementation of the Silverlight Navigation Framework which we can use to implement navigation.

It is also worth pointing out that currently usage of a back stack and implementation of a navigation framework appears entirely optional. This stands in contrast to Windows Phone where all pages/views form part of a back stack which is navigated via a back button.

Even as we show how to implement a navigation framework below, it’s therefore up the application to provide the necessary UI elements to afford navigation capability within a Windows 8 Metro app.

So, let’s start by creating a blank C#XAML project, i call mine XamlStart (this is the top ‘Application’ template under C# in Visual Studio 2011 Express).

Within the main LayoutRoot Grid of MainPage.xaml add the Frame element and contents as below. You can see here that the Source attribute is pointing to the fully qualified type name of a Page which we will shortly create. This will be the default Page that loads when the application launches.

<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
    <Frame x:Name="RootFrame" Source="XamlStart.Views.HomeView">
        <Frame.ContentTransitions>
            <TransitionCollection>
                <EntranceThemeTransition FromHorizontalOffset="200" />
            </TransitionCollection>
        </Frame.ContentTransitions>
    </Frame>
</Grid>

Now create a Views folder on the root of your application and add a new User Control in there called HomeView.xaml.

Use the following xaml for HomeView, note how we set it as a Page and not as a standard UserControl. There is also a button declared for testing the navigation out.

<Page x:Class="XamlStart.Views.HomeView"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel>
        <TextBlock Text="Home View" FontSize="50"/>
        <Button x:Name="AboutUs" Content="About Us"  Click="About_Click"  />
    </StackPanel>
</Page>

Then within the code behind of the HomeView page use the following code. Note how the Frame.Navigate method uses the fully qualified class name of the Page to which the controlling Frame (declared on MainPage.xaml) should navigate.

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlStart.Views
{
    public sealed partial class HomeView
    {
        public HomeView()
        {
            InitializeComponent();
        }

        void About_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(AboutView).FullName);
        }
    }
}

Then within the Views folder add a new User Control in there called HomeView.xaml.

Use the following xaml for AboutView, note how we set it as a Page and not as a standard UserControl. There is a button declared for testing the navigation back to the Home Page.

<Page x:Class="XamlStart.Views.AboutView"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel>
        <TextBlock Text="About Us" FontSize="50"/>
        <Button x:Name="GoBack" Content="Go Back"  Click="Back_Click"  />
    </StackPanel>
</Page>

Then within the code behind of the AboutView page use the following code. Note how the Frame.GoBack() method can be used to automatically go back to the previous page.

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlStart.Views
{
    public sealed partial class AboutView
    {
        public AboutView()
        {
            InitializeComponent();
        }

        void Back_Click(object sender, RoutedEventArgs e)
        {
            Frame.GoBack();
        }
    }
}

If you run this app, you will see you can easily navigate back and forth between the home and about us pages with the active Frame declared on MainPage.xaml.

I hope that the xaml templates are updated in future to have the navigation approach built in, but rest assured it’s pretty straightforward to get the navigation working as you would be used to in a standard Silverlight app.

 

See also Layout and Orientation Management with XAML.

Want to get started?

We would love to help with your next app or game, please do get in touch.