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

  • By now you've likely heard of Agile development and building products in small incremental pieces, so you can get real feedback along the way. In fact, you may even be considering using Agile on your next project. But where do you start? Agile can take a lot of forms, such as Scrum or Kanban. Each form has advantages and disadvantages, but both will help your team get the right feedback they need to build great products. Read this white paper to find out which one is right for you.

  • Organizations are increasingly gravitating toward mobile-first application development as they assess the need to revamp their application portfolios to support touch computing and mobility. Consumerization has brought higher expectations for application usability along with the mobile devices themselves. Enterprises are increasingly shifting their new application acquisitions and development efforts toward mobile platforms. With this backdrop, it is natural to expect application platform vendors to invest in …

Most Popular Programming Stories

More for Developers

RSS Feeds

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