Windows Store App Development Tutorial - Part 7 : Know About LayoutAwarePage

Today in this chapter we will discuss more advanced page navigation using the LayoutAwarePage which comes with the Grid and Split application template by default.

Continuing the last chapter on Learning Windows Store application, today we will explore more about the standard navigation. If you create a Grid app or a Split app, you will find some common files created inside the project under the “Common” folder. Among them “LayoutAwarePage” implements many navigational APIs to do the standard navigational operations.

“LayoutAwarePage” inherits from “Page” and hence you will be able to use all the basic operations that Page class offers you. In addition to those, you will find more new APIs in that. If you are using a blank XAML page, you just have to use “LayoutAwarePage” insists of “Page” as shown below in order to use the advanced layout and navigation features,

It is always better to use this class as the root of the page if you are using navigations from one page to another. The important methods that you will be able to use from this page are: “GoHome()”, “GoBack()” and “GoForward()” which implicitly calls the Frame methods to complete these operations. The implementation of those methods are shared here for clear visibility:

// Invoked as an event handler to navigate backward in the page's associated

// Frame until it reaches the top of the navigation stack.

protected virtual void GoHome(object sender, RoutedEventArgs e)

{

// Use the navigation frame to return to the topmost page

if (this.Frame != null)

{

while (this.Frame.CanGoBack) this.Frame.GoBack();

}

}

// Invoked as an event handler to navigate backward in the navigation stack

// associated with this page's Frame.

protected virtual void GoBack(object sender, RoutedEventArgs e)

{

// Use the navigation frame to return to the previous page

if (this.Frame != null && this.Frame.CanGoBack) this.Frame.GoBack();

}

// Invoked as an event handler to navigate forward in the navigation stack

// associated with this page's Frame

protected virtual void GoForward(object sender, RoutedEventArgs e)

{

// Use the navigation frame to move to the next page

if (this.Frame != null && this.Frame.CanGoForward) this.Frame.GoForward();

}

To see how these methods work, you can chose any one of the Grid and Split applications from the Windows Store project template. Let’s take Grid app for an example here. The main screen of the Grid app uses a GridView to show thumbnails of the groups as below:

 

Clicking the group header will navigate you to the group details page. 

Similarly clicking the items from the group page or group details page will navigate you to the group item details page. You can easily navigate to the next or previous item by just sliding the screen or navigational keys of the keyboard.

This navigational operations are handle by the two events named AcceleratorKeyActivated and PointerPressed of the core window. The first invokes when a user uses keystrokes to navigate and the second one invokes when a user uses mouse clicks, touch screen taps or other similar interactions to navigate between pages. Here comes the declaration of the said events:

// Invoked on every keystroke, including system keys such as Alt key combinations,

// when this page is active and occupies the entire window. Used to detect keyboard

// navigation between pages even when the page itself doesn't have focus.

private void CoreDispatcher_AcceleratorKeyActivated(CoreDispatcher sender,

AcceleratorKeyEventArgs args);

// Invoked on every mouse click, touch screen tap, or equivalent interaction when

// this page is active and occupies the entire window. Used to detect browser-style

// next and previous mouse button clicks to navigate between pages.

private void CoreWindow_PointerPressed(CoreWindow sender, PointerEventArgs args);

In the below screenshot you can see the navigational arrows that pops up when you move your mouse inside the screen. An user can easily navigate between the pages by tapping those buttons or pressing the navigational keys in the keyboard. 

Not only this, the LayoutAwarePage also automatically handles the screen orientation changes properly. You can use visual states of each pages to visualize the screen orientation and view.

Hope this is useful. Thank You.