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

[This documentation is preliminary and is subject to change.]

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.

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

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

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

Hub project template for Windows Store apps

By using the Hub project template, you can create a Windows Store app that displays content in a horizontally panning view and visually engages users by providing a variety of ways to access content. The main Hub page provides different sections to represent content such as new items, highlighted items, and categories of items. Example apps include shopping apps, news apps, sports apps, and media hub apps, and you can find this template in Microsoft Visual Studio 2013 Preview.

By default, a Hub app displays a home page that shows several sections in a horizontal layout. If the user taps an interactive section heading (indicated by a ">"), the app opens the section page, which lists the items that are associated with the section. If the user chooses an item from either the home page or the section page, a full-page view shows details about the item. This illustration shows a home page that has at least three sections.

The sections of the Hub project template provide content examples rather than content recommendations. You can easily add and remove sections to fit the content requirements of your app.

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.

Files for the Hub project template

The Hub project 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).
• HubPage.xaml, which shows the sections and items on the home page. Users can choose an item to open information about that item, or they can choose a section label to open information about that section.
• SectionPage.xaml, which shows a category of items. Users can choose an item to open the full-page view of that item.
• ItemPage.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 starts.
• HubPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the home page.
• SectionPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the group details page.
• ItemPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the full-page view of an item.
• SampleDataSource.cs|.vb|.cpp|.h, which is the data-source object that exposes the data to the app.

The template also includes the following files:

• SampleData.json, which contains the sample data that the app uses.
• package.appxmanifest, which describes the app package for Windows.
• A PFX file that's used to sign the appxmanifest file. (This file is included as a project file to support building from a command prompt.)
• Several image files, like SplashScreen.png for the splash-screen image and StoreLogo.png, which is used for Windows Store.
• A sample resource file that contains localization strings (Resources.resw).

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 can be used to show the item details. The home page is shown here.

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 following files:

• SampleData.json, which contains the sample data used by the app.
• package.appxmanifest, which describes the app package for Windows.
• A PFX file that is used to sign the appxmanifest file (this file is included as a project file to support building from the command line).
• 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-view page is 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 following files:

• SampleData.json, which contains the sample data used by the app.
• package.appxmanifest, which describes the app package for Windows.
• A PFX file that is used to sign the appxmanifest file (this file is included as a project file to support building from the command line).
• 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 Hub, Grid, or Split project template, a folder labeled "Common" appears in Solution Explorer. This folder contains a few classes and resources that your project. Because of this dependency, you shouldn't modify the contents of this folder, but if you need to you can modify files to change behavior in your app to make it work the way you want it to.

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

The Hub, 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

In Windows 8, project template styles were defined in StandardStyles.xaml. Because the platform now supports many of the styles that are used in the templates, StandardStyles.xaml has been removed.

In Windows 8.1 Preview, styles for UI elements are specified directly in each XAML page using StaticResource values that the platform provides. You can change these references in your code to other supported values. To format and display data in each page, one or more DataTemplates may be present. You can also edit the StaticResource values in the data templates. This code example shows the DataTemplate that's used in the Grid to display items for the GroupedItemsPage.

<DataTemplate>
    <Grid HorizontalAlignment="Left" Width="250" Height="250">
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
            <Image Source="{Binding ImagePath}" Stretch="UniformToFill" 
                AutomationProperties.Name="{Binding Title}"/>
        </Border>
        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource
            ListViewItemOverlayBackgroundThemeBrush}">
            <TextBlock Text="{Binding Title}" Foreground="{StaticResource
                ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}"
                Height="60" Margin="15,0,15,0"/>
            <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource 
                ListViewItemOverlaySecondaryForegroundThemeBrush}" 
                Style="{StaticResource CaptionTextBlockStyle}"
                TextWrapping="NoWrap" Margin="15,0,15,10"/>
        </StackPanel>
    </Grid>
</DataTemplate>

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: 6/21/2013