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.



Related Articles

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Java developers know that testing code changes can be a huge pain, and waiting for an application to redeploy after a code fix can take an eternity. Wouldn't it be great if you could see your code changes immediately, fine-tune, debug, explore and deploy code without waiting for ages? In this white paper, find out how that's possible with a Java plugin that drastically changes the way you develop, test and run Java applications. Discover the advantages of this plugin, and the changes you can expect to see …

  • Savvy enterprises are discovering that the cloud holds the power to transform IT processes and support business objectives. IT departments can use the cloud to redefine the continuum of development and operations—a process that is becoming known as DevOps. Download the Executive Brief DevOps: Why IT Operations Managers Should Care About the Cloud—prepared by Frost & Sullivan and sponsored by IBM—to learn how IBM SmartCloud Application services provide a robust platform that streamlines …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds