Using the Windows 8 Frame Control

If your read my previous article "{Link to the Article} Improve Your Metro App: Understanding Better Navigation" you probably already know a little about the Frame control. If you didn't see the article, the Frame control provides top-level navigation for your app. In addition, you can add one or more Frame controls to pages within your app. This would allow you to add page navigation within a page. Essentially the Frame Control works much like an iFrame would in an HTML page.

To Embed the Frame control, you will need to add a tag similar to the following to your page.

I've added the BorderBrush and BorderThickness to provide a boundary to the Frame; however, this is not necessary. The Frame itself does not have a visible border without the BorderBrush/Thickness, which can be very useful depending upon your design. Next, you will need to set the page to be displayed first within the Frame, which is accomplished with the Navigate method as shown below.

FrameTest.Navigate(typeof(TestPage));

This method should be placed within the OnNavigatedTo event for the page hosting the frame control. You can also pass an object parameter to the page by providing a second parameter to the Navigate method. When the page containing the Frame Control is displayed, it will then display the desired page within it. As for pages displayed within the Frame Control, navigation is performed the same as it would be for normal pages. In fact, pages displayed within the Frame Control don't know the difference between the main navigation and the embedded frame navigation. Nonetheless, here are the navigation commands to be used for pages.

Pages can access the Frame to perform navigation using the this.Frame reference. As such to navigate to a new page, use the Navigate method as shown below.

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

In this case, TestPage2 will be displayed within the Frame Control and go back from TestPage2 to TestPage use the following statement.

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

If you passed parameters to the page being navigated to, you can retrieve that parameter in the OnNavigatedTo event. The NavigationEventArgs provides a Parameter property, which will provide access to the object passed into the Navigate method.

Conclusion

You may be wondering what you would use the Frame Control for. There are several different uses, which may not be obvious. One common use of the Frame Control is to allow your application to use a single AppBar instead of one per page. To accomplish this you would want to have your top page create an AppBar and use a Frame Control, which encompass most if not all of the page. Then all of your pages for the app would be displayed within the Frame Control. Once you start to look at the Frame Control as a way to provide subpage navigation like an HTML iFrame you will be able to take full advantage of it within your apps.

Top White Papers and Webcasts

When individual departments procure cloud service for their own use, they usually don't consider the hazardous organization-wide implications. Read this paper to learn best practices for setting up an internal, IT-based cloud brokerage function that service the entire organization. Find out how this approach enables you to retain top-down visibility and control of network security and manage the impact of cloud traffic on your WAN.

U.S. companies are desperately trying to recruit and hire skilled software engineers and developers, but there is simply not enough quality talent to go around. Tiempo Development is a nearshore software development company. Our headquarters are in AZ, but we are a pioneer and leader in outsourcing to Mexico, based on our three software development centers there. We have a proven process and we are experts at providing our customers with powerful solutions. We transform ideas into reality.