C#, VB, and C++ project templates for Store apps

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Learn how project templates in Visual Studio help you build apps for Windows 8.1 devices by using C#, VB, or C++. This topic describes each template, and helps you choose one.

Project templates at a glance

In the New Project dialog box, choose Universal apps to see your choices. Select the template that best fits your needs.

Think of these templates as belonging to one of the following categories.

• Templates that you use to create an app.
• Templates that you use to build pieces of an app.
• Templates that you can use to test your app.

Templates that you can use to create apps

You'll typically start with one of these templates.

Note  The names of some templates have (Windows Phone Silverlight) appended to the end. Consider using these templates if you've previously developed for Windows Phone 8 and just want to access some of the new features available to Windows Phone apps without having to significantly modify your existing code. For more information about these templates and why you might use them, see Silverlight 8.1 apps for Windows Phone.

Templates you can use to build pieces of an app

As your app becomes more sophisticated, you might decide to add functionality as components by using one of these templates.

Templates you can use to test your app

As you get closer to publishing your app, you might consider using one of these templates to optimize performance and code quality.

The Hub, Grid, Split, and Pivot templates (Windows 8.1 only)

Unless you start with a Blank template and build your app from scratch, you'll probably get started by using a Hub, Grid, Split, Pivot, or project template. You can use these template to create Windows 8.1 apps. There are no versions of these templates available for Windows 10 apps.

Here's a closer look at each one.

Hub project template

The Hub template is similar to the Panorama template in Windows Phone 8.

Use this template to display content in a horizontally panning view that provides a variety of ways to access content.

To see a video about this template, see Understanding the Hub App Template Overview and Navigation.

The main Hub page organizes content into sections such as new items, highlighted items, and categories of items. This template is a great fit for a shopping, news, sports, or media hub app.

If the user taps an interactive section heading (indicated by a ">"), the app opens the section page, which lists the items from that section. If they choose an item from the home page or section page, a full-page view shows details about the item. This image shows the home page of a Hub app that has at least three sections.

These sections that appear in the designer are examples of the sort of content that you could display. You can easily add and remove sections so that your app shows the content that you want and in the way that you want.

The sections of the template include static content, so you can easily provide globalized resources. The sample resource file provides localized strings for the en-us locale.

You see example of how you can use Hub project template to help users shop for real estate, see Quickstart: Read data from a service.

Grid project template:

The Grid App template is another way to enable users to browse through categories of content. This template is a great fit for a shopping, news, photo, or video app.

The Grid app shows a list of groups. If the user selects a group, the app opens the group details page, which displays a list of the items on the right side. The user can select an item on the home page or group details page. This opens a full-page view that can be used to show the item details. This image shows the home page of a Grid app.

Split project template:

The Split App template shows a list of items and item details in a two-column view. Users can switch quickly between the items and view information in lists that might be updated dynamically. This template is a great fit for a news reader, sports score or email app.

The Split app template shows a list of groups. When the user selects a group by tapping or clicking it, the app opens the split-view page. This image shows the split-view page.

The split-view page displays a two-column view (or master/detail view), where the details on the right side change when a user selects an item on the left side. Imagine a list of news stories on the left side and the actual stories on the right side.

Pivot project template:

A Pivot app template provides a quick way to manage views or pages. It can be used for filtering large data sets, viewing multiple data sets, or switching app views. For example, flicking or panning left to right on the page advances to the next page of content. This image shows the home page of the Pivot app.

Navigation, state management and data binding

Pages in the Hub, Grid, Split, Pivot already implement navigation, state management and data binding.

Navigation and state management

The Hub, Grid, and Split, and Pivot App project templates enable page navigation. You can easily enable navigation for any new pages that use navigation helper

The navigation model that the template uses is the recommended navigation model for apps using C++, C#, or Visual Basic. In this model, XAML pages get loaded into a central frame as the content of the default Window, and then users navigate to other pages using that frame. The pages are loaded as needed, typically in response to user actions. Web developers often refer to this type of navigation model as single-page navigation.

The navigation model is implemented in Common\NavigationHelper. The single-page navigation model provides a smoother, app-like transition between pages, and also makes it easier to manage app state through the single app-wide context.

The navigation model enables your app to maintain multiple states. For example, suppose a user starts a music app from a primary tile, selects an artist, and then closes the app. Then, the user starts the music app by clicking the tile for a specific song. The user plays a song, pauses the music player, and closes the app.

The user can return to the artist page by clicking the primary tile. The user can continue listening to their song by clicking the secondary tile. The state of both sessions are preserved independent of one another.

While the templates provide the infrastructure for this scenario, you'll still have to write a little code.

Note  

Other project templates such as the Blank template do not include this NavigationHelper file. For that template, you'll have to add the NavigationHelper project file manually or implement custom navigation.

For more info on navigation and an example of using single-page navigation in Windows Store app using C++, C#, or Visual Basic, see Quickstart: Navigating between pages.

For help choosing the best navigation pattern for your app, see Navigation patterns. Also, see the Flat navigation pattern in action as part of our App features, start to finish series.

Data binding

The Hub, Grid, and Split, and Pivot App project templates contain a sample data file and classes that help you show data from that file when you run the app. That data also appears in pages as you design them. You can find these classes and the sample data file in the Data Model folder of your solution.

Data is organized into items and groups. Each page has its own collection of name value pairs called a view model. The controls in each page are bound to information in that view model. To see how you can plug your data into this model see these topics:

• How to customize Visual Studio template data (XAML)
• Quickstart: Read data from a service
• Understanding the Hub App Template's Sample Data Model
• Understanding Data Binding Data Sources and Data Contexts

Code in the pages of your solution obtains information from the data classes in your Data Model folder.

The files in your solution

After you create your project, the pages of your app appear in Solution Explorer. For example, if you a project based on the Hub app template, you'll see three xaml pages: a home page that shows sections of items (HubPage.xaml), a page that shows a category of items (SectionPage.xaml), and a page that shows the full-page view for an item (ItemPage.xaml).

Each page has a code-behind file that implements various behavioral aspects of the page. The following table describes several other files that your solution might contain depending on what type of project you create.

Handling the back button of a Windows Phone in Blank projects

Blank projects don't handle the back button of a Windows Phone. By default, the app closes when a user presses the back button.

Handling the back button in a Windows 8.1 project

Other Windows 8.1 project templates handle the back button with the use of the NavigationHelper .cs|.vb|.cpp|.h file. To get a copy of the NavigationHelper .cs|.vb|.cpp|.h file, add a Basic Page to your project.

After your project contains the NavigationHelper .cs|.vb|.cpp|.h file, you can delete the Basic page from your project if you don't want it. Then, to handle the back button of a Windows Phone, add a private field named navigationHelper of type NavigationHelper to the Blank page. Then, add the following line of code to the constructor of the Blank page:

this.navigationHelper = new NavigationHelper(this);

Me.NavigationHelper = New Common.NavigationHelper(Me)

auto navigationHelper = ref new Common::NavigationHelper(this);

Handling the back button in a Windows 10 project

Add a reference to the Windows Mobile Extension SDK, and then use the Windows.Foundation.Metadata.ApiInformation.IsTypePresent method to determine whether a type named Windows.Phone.UI.Input.HardwareButtons is available on the running device. If it is, then the app is running on a phone, and you can create an event handler for the event. The following code does that.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed; 

Create your own app

When you're ready to start creating an app, visit one of our Start-to-finish series, depending on your preferred programming language.

• App features, start to finish (HTML)
• App features, start to finish (XAML)