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.

Template	Description
Blank	A project for a single-page app that has no predefined controls or layout. Use this template to build an app from the ground up without any starter code or XAML. Important  Blank projects don't handle the back button of a Windows Phone. By default, the app closes when users press that button. If you create a Blank project, please see the Handling the back button of a Windows Phone in Blank projects section of this topic.
Hub	(Windows 8.1 only) A project for a three-page Windows Store app, Windows Phone Store app or Windows universal app that uses a Hub control. Dedicated pages display group and item details. For more information, see Hub.
Grid	(Windows 8.1 only) A project for a three-page Windows Store app or Windows Phone Store app that navigates among grouped items arranged in a grid. Dedicated pages display group and item details. For more information, see Grid.
Split	(Windows 8.1 only) A project for a two-page Windows Store app or Windows Phone Store 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. For more information, see Split.
Pivot	(Windows 8.1 only) A project for a Windows Phone Store app that uses a Pivot control and the Windows Runtime. For more information, see Pivot.
WebView	(Windows 8.1 only) A project for a Windows Phone Store app that uses a WebView control and the Windows Runtime. For more information about the WebView control, see Webview
DirectX	A project for a Windows Store app, Windows Phone Store app, or Windows universal app that uses DirectX and the Windows Runtime. For more information, see Use the Microsoft Visual Studio 2013 DirectX templates..
DirectX and XAML	A project for a Windows Store app, Windows Phone Store app, or Windows universal app that uses DirectX, XAML, and the Windows Runtime. For more information, see Use the Microsoft Visual Studio 2013 DirectX 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.

Template	Description
DLL	(C++ only) A project for a native dynamic-link library (DLL) that can be used by a Windows Store app, Windows Phone Store app, Windows universal app or Windows Runtime component that is written in C++. For more information, see DLLs in Visual C++.
Static Library	(C++ only) A project for a native static link library (LIB) that can be used by a Windows Store app, Windows Phone Store app, Windows universal app or Windows Runtime component that is written in C++. For more information, see Walkthrough: Creating and Using a Static Library (C++).
Class Library	A project for creating a managed class library (.dll) for Windows Store apps, Windows Phone Store apps or Windows universal apps that are written in C# or Visual Basic.
Class Library (Portable)	A project for creating a managed class library (.dll) for Windows Store apps, Windows Phone Store apps, Windows universal apps, and Silverlight apps that are written in C# or Visual Basic. For more information, see Cross-Platform Development with the .NET Framework.
Windows Runtime Component	A project for creating either a C++ or managed Windows Runtime component that can be consumed by any Windows Store app, regardless of the programming language in which the app is written. For more information, see Creating Windows Runtime Components.

 

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.

Template	Description
Unit Test Library or Unit Test App	A project that contains unit tests that can be used to test Windows Store apps, Windows universal apps, Windows Runtime components, or class libraries for Windows Store apps. For more information, see Create and run unit tests for a Windows Store app in Visual Studio.
Coded UI Test	A project that contains Coded UI tests for automated UI Testing of Windows Store apps. For more information, see Verifying Code by Using UI Automation.

 

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.

File	Description
BooleanNegationConverter .cs|.vb|.cpp|.h	Converter for use in XAML. This file negates a Boolean. This file is present in the Common folder contains only if you add a ShareTarget item template.
BooleanToVisibilityConverter .cs|.vb|.cpp|.h	Converter for use in XAML. This file converts a Boolean to a visibility state.
NavigationHelper .cs|.vb|.cpp|.h	Provides commands used to navigate backward and forward. Registers for standard mouse and keyboard shortcuts used to go back and forward (and wires these to the command implementation). Provides events for LoadState and SaveState to be used when navigating to and from pages. The events provide both navigation state as well as process lifetime management state. Manages state information using SuspensionManager.
ReadMe.txt	Contains important information about the template. This readme might change as templates are updated. We recommend that you read this file whenever you use a new template.
RelayCommand .cs|.vb|.cpp|.h	ICommand used by NavigationHelper for the GoBack and GoForward commands.
SuspensionManager cs|.vb|.cpp|.h	Manages the saving and restoration of the app's transient state. For example, when the system runs low on resources, the state of the current app is saved and the app is suspended. When the user returns to the app, the app is relaunched with the saved state. App.xaml and the NavigationHelper use this class to enable PLM support.
App.xaml	Page that is loaded first and provides markup for the content host (where each page is loaded into the main window).
package.appxmanifest	Describes the app package for Windows.
PFX file	used to sign the appxmanifest file. (This file is included as a project file to support building from a command prompt.)
SampleDataSource.cs|.vb|.cpp|.h	Data-source object that exposes the data to the app. If you're creating an app that has a similar structure, you can save time by using the data model for items and groups.
SampleData.json	Contains the sample data that the app uses. The sample data is in the form of hardcoded strings. You should replace this sample data with a data-access layer that references your own data.
Various image files	For example: SplashScreen.png for the splash-screen image and StoreLogo.png, which is used for Windows Store.
Sample resource file	Contains localization strings (Resources.resw).

 

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)