Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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

Applies to Windows and Windows Phone

Learn how Microsoft Visual Studio project templates can help you create apps for the Windows and Windows Phone 8.1. This topic describes each template, and helps you choose one.

To learn about project templates for JavaScript, see JavaScript project templates for Windows Store apps.

To learn about project templates for Blend for Visual Studio, see Create a new project.

To get the templates, you need a version of Visual Studio that supports Windows development. For more info, see Get the Tools.

Important  The information in this topic has been updated for Windows 8.1. For information on migrating to the new templates, see Windows 8 to Windows 8.1 for XAML developers and Retarget your Windows 8 app to Windows 8.1.

Roadmap: How does this topic relate to others? See these topics:

Project templates at a glance

The New Project dialog box organizes templates into three groups: Windows Apps, Windows Phone Apps, and Universal Apps. This image shows each group. To learn more about each of them, see Choose what type of app you want to build.

Categories of Store apps

Each group contains a list of templates. Although templates appear in a single list, you can 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.

TemplateDescription
BlankA project for a single-page Windows Store app or Windows Phone Store app that has no predefined controls or layout. Use this template if you want 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 for a Windows Phone Store app, please see the Handling the back button of a Windows Phone in Blank projects section of this topic.

HubA project for a three-page Windows Store app or Windows Phone Store app that uses a Hub control. Dedicated pages display group and item details.

For more information, see Hub.

GridA 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.

SplitA 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.

PivotA project for a Windows Phone Store app that uses a Pivot control and the Windows Runtime.

For more information, see Pivot.

WebViewA 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

DirectXA project for a Windows Store app or Windows Phone Store app that uses DirectX and the Windows Runtime.

For more information, see Use the Microsoft Visual Studio 2013 DirectX templates..

DirectX and XAMLA project for a Windows Store app or Windows Phone Store 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.

TemplateDescription
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, 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, or Windows Runtime component that is written in C++.

For more information, see Walkthrough: Creating and Using a Static Library (C++).

Class LibraryA project for creating a managed class library (.dll) for Windows Store apps or Windows Phone Store 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, and Silverlight apps that are written in C# or Visual Basic.

For more information, see Cross-Platform Development with the .NET Framework.

Windows Runtime ComponentA 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.

TemplateDescription
Unit Test LibraryA project that contains unit tests that can be used to test Windows Store 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 TestA project that contains Coded UI tests for automated UI Testing of Windows Store apps.

For more information, see Verifying Code by Using UI Automation.

 

A closer look at the templates

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. Here's a closer look at each one.

If you want to learn more about how to use the DirectX and DirectX and XAML templates, see Use the Microsoft Visual Studio 2013 DirectX templates.

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.

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.

Hub App project template for Windows

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..

  • Applies to Windows

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.

Grid App project template
  • Applies to Windows

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.

Split App project template

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.

  • Applies to Windows Phone

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.

Pivot project template
  • Applies to Windows Phone

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.

Other 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);

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 either of these topics:

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.

FileDescription
BooleanNegationConverter .cs|.vb|.cpp|.hConverter 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|.hConverter 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.txtContains 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|.hICommand used by NavigationHelper for the GoBack and GoForward commands.
SuspensionManager cs|.vb|.cpp|.hManages 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.xamlPage that is loaded first and provides markup for the content host (where each page is loaded into the main window).
package.appxmanifestDescribes the app package for Windows.
PFX fileused to sign the appxmanifest file. (This file is included as a project file to support building from a command prompt.)
SampleDataSource.cs|.vb|.cpp|.hData-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.jsonContains 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 filesFor example: SplashScreen.png for the splash-screen image and StoreLogo.png, which is used for Windows Store.
Sample resource fileContains localization strings (Resources.resw).

 

Create your first app

When you're ready to start creating an app, visit one of the following topics depending on your preferred programming language.

Related topics

Navigation model (XAML)
Adding data to a project template (XAML)
C#, VB, and C++ item templates for Windows Store apps

 

 

Show:
© 2014 Microsoft