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

  • 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.

  • Lenovo recommends Windows 8 Pro. "I dropped my laptop getting out of the taxi." This probably sounds familiar to most IT professionals. If your employees are traveling, you know their devices are in for a rough go. Whether it's a trip to the conference room or a convention out of town, any time equipment leaves a user's desk it is at risk of being put into harm's way. Stay connected at all times, whether at the office or on the go, with agile, durable, and flexible devices like the Lenovo® …

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date