08 - Creating Multipage Apps Using Navigation

While developing a window store app, we need multiple pages to provide desired functionality. In this case navigation implementation is necessary.

To apply navigation three pages can be used. On first page, we can display the main headings of app and control. When user click on a particular heading, details of respective heading will open on second page. User can also choose to add a new title on first page, and then he/she navigate to third page.

Types of Navigation patterns:

Hierarchical

This pattern is also known as Hub and Spoke model. It is suitable for those apps, in which large amount of contents which is divided in multiple sections. For eg. In an app of play store, various categories available like game, books, movies, song etc. In each category various options are available. When a user clicks on a particular option, detailed information is shown on details page. We can use this pattern to create this type of app.

In this pattern these pages are used:

Hub page

Is the entry point of the app, contains summarized form of entire app.

Spoke page

Display when user clicks on one of the category defined in hub page. It consists of various pages.

Details page

This page shows the complete information of an item, selected at spoke page. It may contain large information, audio, video or images.

For eg in Windows 8 interface all the apps are arranged in Hub spoke model:

          

 

Flat

In this navigation pattern all the information regarding any app is spread across small pages or tabs. It is commonly used in games, browsers etc. It is suitable for small websites. In this pattern, all the pages are organized at the same hierarchical level.

Implementing navigation

In a window store app a user can navigate from one page to another through the navigation process. For this purpose we have to link all these pages. When a user navigates from one page to another, the information specified on the previous page is lost. To overcome this problem we have to apply caching process in app.

To implement navigation in window store app, the Frame class defined in Windows.UI.Xaml.Controls namespace is used.

The MainPage.xaml.cs file contains two methods:

MainPage constructor that is used to initialize all controls.

OnNavigatedTo method that is invoked whenever the user navigates to this page.

Following are the static methods of Frame class:

Navigate( )

It allows a user to navigate from one page to another. It returns true when navigation is successfully performed, otherwise it returns false.

     public bool Navigate(Type sourcePageType)

here sourcePageType is the type of page to navigate to. For eg if we have to navigate to page AddReceipe page from our main page we have to write following code:

     Frame.Navigate(typeof(AddReceipe));

GoBack( )

While implementing navigation in an app, a navigation history will be maintained that will contain the path from the first page to the current page. So that, a user can navigates in forward or backward           path. This method is used to navigate to the previous page of app in navigation history.

    public void GoBack()

GoForward( )

This method allows a user to navigate from any of the previous pages to next page in the navigation history.

     public void GoForward() 

     Frame.GoForward();

We can check that forward navigation is possible or not by using CanGoForward property of the Frame class.

Caching a page

When we navigate from one page to another, it should ensure that data should not lose. We can enable the pages to cache their contents. It is a mechanism to save data temporarily. For this NavigationCacheMode property can be used. It may take one of the following values:

  • Disabled

It specifies that page is never cached. It is the default value of the NavigationCacheMode property.

  • Required

It specifies that the page is cached and the cached information is not depending on the cache size for the frame.

  • Enabled

It specifies that the page is cached, cached instance is discarded when the cache size exceeds the cache size of the limit of the frame.

This property can be set using following code:

This.NavigationCacheMode= Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

Like us on Facebook