Introduction of SplitPage Template in Windows Store Application

In Windows Store Applications, Visual Studio provides us various types of page templates that we can add to our project. Each of these templates have their own characterstics and features to support the application and make it more manageable and easy to build for the developer.

Here is a look at what Page Templates provide in Windows Store Apps.

Page Type

  • Blank Page: A blank page for a Windows Store app that missing navigation support.
  • Basic Page: An empty page that has layout awareness, a title, and a back button.
  • Split Page: It supports View State of screen and Orientation. Used to display a list of items and details for the selected item.
  • Group Detail: It displays details for one group and a preview of each item in the group.
  • Grouped Items: This Page displays grouped collections.
  • Item Detail: Page displays one item in detail, and enables navigation to adjacent items.
  • Items Page: Displays a collection of items.

PageTemplate-In-Windows-Store-Apps.jpg

By default, when we create a blank Windows Store application, the Blank Page is loaded. It is the default page that is added to our project automatically. But we can add more page templates to our project.

In this article I will show you how to add a Split Page template in the Windows Store project, it's uses and functionality.

Introduction to SplitPage Template.

Unlike the Blank Page, a Split Page template provides the developer an easier way to create an application. It implements most of the page navigation work and orientation functionality for the developer that can be a very tricky task to do manually. Although the SplitPage template also manages view state support. In short this template does most of the work for us. You can use the the Split page to show the main content on the left side and the summary of each content as a child of the selected content on the right side.

Now, let's start to create a Windows Store application and add the SplitPage template in it.

First when you create a application with a blank template, the files that are created in Solution Explorer for your project look like this:

solution-explorer-in-windows-store-apps.jpg

Now, I am going to add a SplitPage template in the project.

add-new-item-in-windows-store-apps.jpg

add-split-page-in-windows-store-apps.jpg

The Visual Studio prompt using a dialog box. Click Yes to proceed.

prompt-message-in-windows-store-apps.jpg

This will create several other files related to the SplitPage in the Solution Explorer.

Have a look at Solution Explorer:

solution-explorer-in-windows-store-apps(1).jpg

Each of these has it's some special functionality to support SplitPage.

Let's explorer the main functionality of the SplitPage.cs file in detail.

LoadState Method.

This method populates the page with content that is saved during navigation. A dictionary of state is preserved by this page from an earlier Session.

SaveState Method.

This method preserves state associated with this page in case the application is suspended or during navigation.

LogicalPageNavigation Method.

As you know that the split page is designed so that the snapped and portrait view states. So, this method handles the View State of the application for this page.

GoBack Method.

This supports the navigation pattern of the application. It is invoked when the page's back button is pressed.

So, I think this would be enough to learn about SplitPage templates in Windows Store Applications. For more information you can visit MSDN Tutorial of Windows Store Apps.

The SplitPage will look like this:

split-page-in-windows-store-apps.png

Summary


With this article, you've seen the SplitPage template in Windows Store Applications using XAML. Hope this will help you.

Up Next
    Ebook Download
    View all
    Learn
    View all