Improve Your Metro App: Understanding Better Navigation

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

If you are new to the world of building Windows 8 Metro UI apps, then you will probably be a little lost when it comes to navigation. You may have started off by creating a new project using either Grid and/or Split app. From these templates, you can see there is quite a bit included to allow for selecting items, viewing details as well as navigating to the previous page. While this functionality may seem complex, it is in fact far simpler than it may appear. To get started we can use the Grid App template and start dissecting the App.xaml.cs source file, which is used to startup the application.

Within the App.xaml.cs source code we will take a look at the source within the OnLaunched method. There is quite a bit within this method dealing with navigation as well as state and lifecycle management of the app. For this article we will skip over the state management code. The first line we care about creates a Frame object known as rootFrame.

var rootFrame = new Frame();

This object will serve as the heart of navigation within the app. Simply put, the frame allows you to send the user to different pages within your app. The first page you want to present to the user is specified as follows:

rootFrame.Navigate(typeof(ItemsPage), "AllGroups")

This statement calls the Navigate method and passes along the first page to be displayed, ItemsPage as well as a parameter to be sent to the page. In this case shown here, the parameter is a string; however, it could just as well be any object. Before we get out of the OnLaunched method, there are two additional statements that we need to cover as shown below.

Window.Current.Content = rootFrame;
Window.Current.Activate();

These two statements set the Current Window’s Content to the rootFrame created previously and activate the windows to display and bring it to the foreground. Since we now have ItemsPage being displayed, we need to take a look at how the parameter object passes in from the Navigate method called above. Within the Itemspage.xaml.cs class, you will probably look at the LoadState method and think you are on the right track, which is actually only partially true. In fact, the page inherits from the LayoutAwarePage, which is provided by the template. As such we actually need to dig into the base class to find the actual method, which is OnNavigateTo. This method’s one parameter provides access to the parameter passed in as e.Parameter property. If you intend to use the base class for your pages, then you will want to override the LoadState method, but I wanted to make sure you understood the actual origins.

As you play around with the app, you will probably notice the large left arrow in the upper left that is used to backup a page. If you look in the XAML for one of the pages you will see the back button is just that, a button. Effectively, it is displayed if the Frame’s CanGoBack property is true and once clicked the LayoutAwarePage’s GoBack method is called by the click event, which in turns calls this.Frame.GoBack();, which in turns causes the Frame to shift back to the previously displayed page.

Conclusion

As you can see the the navigation components of a Windows 8 Metro UI app is in fact quite easy to understand and utilize. You will probably find navigation will be one of the simpler components of your app since you can easily move from one page to another.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read