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

This topic describes the project templates for Windows Store apps built for Windows using Visual C#, Visual Basic, or Visual C++. To learn about project templates for JavaScript, see JavaScript project templates for Windows Store apps. To learn about project templates for Blend, see Create a new project.

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

• Roadmap for Windows Store apps using C# or Visual Basic
• Roadmap for Windows Store apps using C++

Grid project template for Windows Store apps

The Grid App template is a great way to start a Windows Store app that you can customize to enable users to browse through categories to find content in which they'll want to fully immerse themselves. Examples include shopping apps, news apps, and photo or video apps.

The Grid app starts with a home page that shows a list of groups. A group is a named set of items, such as a part of a virtual department store that contains individual retail items. 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 either the home page or the group details page. This opens a full-page view that shows the item details (shown here on top).

Project files for the Grid template

The Grid App template includes these .xaml files:

• App.xaml, which is loaded first and provides markup for the content host (where each page is loaded into the main window).
• GroupedItemsPage.xaml, which is the home page. It enables a user to view the groups and items, and either select an item to navigate to the full-page item view, or a select a group label to navigate to the group details page.
• GroupDetailPage.xaml, which enables a user to view group details on the left and items on the right, and select an item to navigate to the full-page item view.
• ItemDetailPage.xaml, which is the full-page view for an item.

The template includes these .cs|.vb|.cpp|.h files:

• App.xaml.cs|.vb|.cpp|.h, which specifies how the app behaves when it's started.
• GroupedItemsPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the home page.
• GroupDetailPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the group details page.
• ItemDetailPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the full-page item view.
• SampleDataSource.cs|.vb|.cpp|.h, which is the data-source object that exposes the data to the app.

The Grid App template also includes the package.appxmanifest file, which describes the app package for Windows, and a .pfx file that's used to sign the .appxmanifest file. (This file is included as a project file to support building from the command line.) The template also includes several image files, like splashscreen.png for the splash screen image, and storelogo.png, which is used for Windows Store.

Split project template for Windows Store apps

The Split App template is a great way to start creating a Windows Store app that you can customize to enable users to view a list of items and item details in a two-column view, where users might want to switch quickly among the items, and where the list might be updated dynamically. Examples include a news reader, a sports scores app, or an email app.

The Split app starts with a home page that shows a list of groups. A group is a named set of items, like a news source that provides news stories. When the user selects a group by tapping or clicking it, the app opens the split-view page. The Split app pages are shown here:

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. Again, imagine a list of news stories on the left side and the actual stories on the right side.

Project files for the Split template

The Split App template includes these .xaml files:

• App.xaml, which is loaded first and provides markup for the content host (where each page is loaded into the main window).
• ItemsPage.xaml, which is the home page. It enables a user to select a group to navigate to the app's split-view page.
• SplitPage.xaml, which is the split-view page. It defines two sections—one for the list of items on the left and another for the item details on the right.

The template includes these .cs|.vb|.cpp|.h files:

• App.xaml.cs|.vb|.cpp|.h, which specifies how the app behaves when it's started.
• ItemsPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the home page.
• SplitPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the split-view page.
• SampleDataSource.cs|.vb|.cpp|.h, which is the data-source object that exposes data to the app.

The Split App template also includes the package.appxmanifest file, which describes the app package for Windows, and a .pfx file that's used to sign the appxmanifest file. (This file is included as a project file to support building from the command line.) The template also includes several image files, like splashscreen.png for the splash screen image, and storelogo.png, which is used for Windows Store.

What comes with a template?

When you open a project template, a folder labeled "Common" appears in Solution Explorer. This folder contains a few classes and resources that your project, and any item templates that you add, rely on. Because of this dependency, you shouldn't modify the contents of this folder, but you can (and often should) override some of these styles and methods elsewhere in your app to make them work the way you want them to. This illustration shows the default contents of Solution Explorer when you create a Visual C# Grid App project:

And here's a list of what's in the Common folder:

Grid and Split project templates only

Grid and Split project templates (but not Grid and Split item templates) also contain a DataModel folder. This folder contains both a data model and a method that generates data for use at design time and run time. If you're creating an app that has a similar structure, you can save time by using the data model for items and groups. 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.

Modifying styles

The StandardStyles.xaml file defines many common control styles that follow Windows Store app design principles. These styles are used throughout your project, including in the template XAML pages that you add. For example, if you add a Basic Page item template, you might find this control in the template's XAML:

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" 
   Style="{StaticResource PageHeaderTextStyle}"/>

The named resource PageHeaderTextStyle used to define what this TextBlock looks like is defined in the StandardStyles.xaml file. Here's what the style definition looks like:

<Style x:Key="PageHeaderTextStyle" TargetType="TextBlock" BasedOn="{StaticResource HeaderTextStyle}">
    <Setter Property="TextWrapping" Value="NoWrap"/>
    <Setter Property="VerticalAlignment" Value="Bottom"/>
    <Setter Property="Margin" Value="0,0,40,40"/>
</Style>

The style uses the BasedOn syntax to base itself on yet another style in the StandardStyles.xaml file (HeaderTextStyle). We recommend that you use these pre-defined styles for your XAML controls when possible because they look attractive, enable good usability, and are consistent with the styles in other Windows Store apps. That said, you can override these styles if you need to. But don't modify the styles directly in the StandardStyles.xaml file. This file is used throughout your project, and making modifications to it (or any other files in the Common folder) could cause problems that are difficult to debug. Instead, define your styles in another file, following this guidance:

• If you want to use the styles in only one XAML page in your app, define the styles in that XAML page.
• If you want to apply the styles across an app, define the styles in the App.xaml file.
• If you would rather organize your styles into categories for better organization, or if you plan to use common styles across multiple apps, add a new resource page and name it appropriately. To do this in Visual Studio, on the Project menu, click Add New Item. In the Add New Item dialog box, select Resource Dictionary.

When you can, base your styles on the existing styles in StandardStyles.xaml. For example, if you want your control to have a style similar to that of the HeaderTextStyle style discussed earlier, only using different margins, you could use syntax like this:

<Style x:Key="MyPageHeaderTextStyle" TargetType="TextBlock" BasedOn="{StaticResource HeaderTextStyle }">
    <Setter Property="Margin" Value="0,0,70,70"/>
</Style>

You then apply your style to a control by using this syntax:

<TextBlock Style="{StaticResource MyPageHeaderTextStyle}" Text=”My Text Header” />

To base your style on another resource dictionary (like StandardStyles.xaml), you must refer to it in your file. Look inside an App.xaml file to see an example of this type of reference.

Tip: A fast way to apply styles to your controls is to right-click a control on the Visual Studio design surface and point to Edit Style or Edit Template (depending on the control). You can then apply an existing style (like a style from the StandardStyles.xaml file) by clicking Apply Resource, or define a new style by clicking Create Empty. If you create an empty style, you can define it in the page, in the App.xaml file, or in a separate resource dictionary.

For more info about styles, see Quickstart: Styling controls.

Tip: A fast way to modify a style that's already applied to an element is to use the Property Inspector. Select the control and then find the Style property in the Property Inspector. Next, click the advanced property marker (the square to the right of the value) and then click Convert To New Resource. In the resulting dialog box, you can create a copy of the style that's currently applied. You can then create this style in a new resource dictionary, at the app scope, or in the current page.

Creating your app

Now that you have the beginning of your app, including basic styles, it's time to start creating your app. Here are some resources for you to use, depending on your language preference.

• Roadmap for Windows Store apps using C# or Visual Basic
• Roadmap for Windows Store apps using C++

Related topics

Navigation model (using C#/VB/C++ and XAML)

Adding data to a project template (using C#/VB/C++ and XAML)

C#, VB, and C++ item templates for Windows Store apps

Build date: 3/11/2013