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

  • Testing full recoveries of IT environments requires a proven methodology. Establishing and meeting recovery time objectives (RTOs), configuring a cloud recovery system, and tracking your changing environment are all critical components of a successful cloud recovery operation. It's also important to establish and follow a set of cloud disaster recovery (CDR) best practices. Read this technical guide to learn about these best practices, along with how disaster recovery as a service (DRaaS) can help you complete …

  • Thanks to the pervasive use of virtualization, hybrid cloud, and software–defined architectures — enterprise IT infrastructures are impossibly complex. Performance monitoring solutions are critical for enabling IT teams to identify key bottlenecks and emergent issues, for understanding which workloads are more demanding in terms of resource contention, and for cost effective capacity and resource planning. Read this IDC Customer Spotlight for a glimpse into real–world implementations and use …

Most Popular Programming Stories

More for Developers

RSS Feeds

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