#Win8Dev Tutorial: Know about LayoutAwarePage of Wndows Store app

In last chapter “Navigate between Pages” we discussed the basics of page navigation, where we navigated from one page to another page using the Frame.Navigate(type, obj). We also discussed how to pass an object as query string parameter.

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 building 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. You can see a back button here just before the page title. It is by default available in all the pages but based on navigation status it becomes visible or collapse. Here’s the code to show the back button and page title:

<Grid>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="Auto"/>

        <ColumnDefinition Width="*"/>

    </Grid.ColumnDefinitions>

    <Button x:Name="backButton" Click="GoBack" 

            IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"

            Style="{StaticResource BackButtonStyle}"/>

    <TextBlock x:Name="pageTitle" Grid.Column="1" 

               Text="{StaticResource AppName}"

               Style="{StaticResource PageHeaderTextStyle}"/>

</Grid>

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.

This post will help you to understand the LayoutAwarePage implementation and uses of it. Try out by creating a sample project yourself, you will come to know more about it. If you have any queries, drop a line below and I will try to answer you as soon as I can. Happy coding.