Understanding Windows Store App Types

Interested in learning Windows Store app programming? Check out Windows Store App Development section with ton of articles and code samples.

Introduction

Visual Studio is loaded with four pre-defined project templates that provides developers predefined layout and controls such as navigation, app bar and command bar. To understand which project template you should choose, you must understand your app needs, its layout, navigation and commands.

If you create a new project using Visual Studio 2014, you will see three options under Store Apps – Universal Apps, Windows Apps and Windows Phone Apps. Windows Apps are deployed and run on Windows only. Windows Phone apps are deployed and run on Windows Phone only. And Universal apps are deployed and run on both Windows 8 and Windows Store.

As you can see from Figure 1, Visual Studio has the following seven project templates for Windows Store apps.

 

1. Blank App
2. Hub App
3. Grid App
4. Split App
5. Class Library
6. Windows Runtime Component
7. Unit Test Library

Of the preceding seven project templates, the first four are the app types and the other three are to build a library, a component and a unit test library.

Blank App

The Blank App project is a single page app that has no predefined layout or child controls. In this project type, you're on your own to create all the screens (pages), navigation and controls. The default screen of a blank app looks as in Figure 1.

Figure 1

Example

This App type is good for small apps where you need only one screen with some controls with no navigation and other built-in support. For example, a Calculator app.

Don't forget to check out Building Your First Windows Store App to get started with the Store app.

Hub App

A Hub App uses hub controls to support a hierarchical navigation pattern. A typical hub app has a home page that provides a glimpse of the latest updates followed by a section page that lists items related to a section. The section item then navigates to an item details page.

If you create a Hub App using Visual Studio 2014, you will see the first page with a hub control. See Figure 2.

Figure 2

The second page is the Section page that looks as in Figure 3. It lists section details and the items belonging to that section.

Figure 3

The last page of a Hub app is the Item Details Page that looks as in Figure 4. On the item details page, you will display the details of an item.

Figure 4

Example

The C# Corner app is a perfect example of a hub app. The home page of C# Corner is the hub page. Click on a category that is the Section page and clicking on an article link will take you to the article details page that is the item details page.

Grid App

The Grid App project consists of a three-page app that navigates among grouped items arranged in a grid. The home page of the app displays grouped items in grid boxes. See Figure 5.

Figure 5

Click on a Group item navigates to the Group details page. The page has a group details and group items listing. See Figure 6.

Figure 6

Click on a group item that navigates to the item details page that is where an item details can be displayed. See Figure 7.

Figure 7

Example

An enterprise application that displays all company departments on the home page such as HR, Projects, Marketing and Sales. Click on the HR group to navigate to the HR details page where people in the HR department will be listed. Clicking on a person will navigate to the person details page.

Split App

The Grid App project consists of a two-page app that navigates among grouped items. The first page allows group selection while the second displays an item list alongside details for the selected item.

The home page of the Split app shows a grid view of groups with a group image, group title and group sub title. See Figure 8.

Figure 8

The second page is split into a left and a right area. The left side lists the group items and clicking on a group item loads the item details in the right side area of the page. See Figure 9.

Figure 9

Example

A news or a blog website could be a good example of a split app in which the home page lists all news categories. Clicking on a category navigates to the category details page where all the items are listed in that category. Clicking on an item displays the item details page in the right side area of the page.

Summary

Visual Studio provides four Windows Store app templates to support the app layout and navigations support. In this article, we reviewed these app types. I hope it will give you an idea of what template to choose when building your next Store app.

If you have not already, check Building Your First Windows Store App to get started with the Store app and stay tuned for more articles on various app types and more.