Application Templates in Visual Studio 2012

For earlier XAML platforms, the projects in Visual Studio to create a XAML applications are very simple. A Window or UserControl is created, along with a XAML file for the Application object, named App.xaml in Silverlight and Application.xaml in WPF.

The standard templates for WPF and Silverlight applications place nothing in the Window or UserControl except a root layout Grid. No starting resources of any kind are included. It is up to the developer to supply styling, brushes, and so forth.

If Silverlight has RIA Services installed, an alternate template is available for a Navigation Application. This template places quite a bit more items into the project, and has some minimal navigation functionality right away.

The application templates for Windows 8 start with same approach as the Navigation Application and then take it further. All three templates, including the Blank App template, include a library of styles in a XAML file called StandardStyles.xaml. It is placed in a folder named Common.

The other templates, Grid App and Split App, also include multiple pages, with controls already on them. Sample data is included, and navigation logic is built in to allow selection of data items to navigate to new pages.

Using the Grid App or Split App template, you immediately have an application that satisfies basic Windows 8 conventions. However, this also makes for a rather complex starting point for your application. You'll need to study these templates to understand how they work in order to adapt tem to your own purposes.

Split App

The Split App template is simpler than the Grid App template, and serves as a good starting point in your Windows 8 app development. It is a Windows 8 version of a master/detail navigation pattern.

To create an application with the Split App template, just start a new Project in Visual Studio 2012 and select the Split App template. As mentioned, the app will immediately have some minimal functionality, with sample data to create screens.

The starting screen for a Split App is shown in Figure 13.17. The items can be scrolled vertically with swipes or a mouse.

Figure 13.17 The starting screen for a Split App

The screen for a group of items in an application created with the Split App template. Selecting an item in the ListView on the left brings up the item on the left.

Grid App

The Grid App template has more complex navigation built in than the Split App template. If you create an application with the Grid App template, the starting screen for your application will look like Figure 13.19.

Figure 13.19 The starting screen for a Grid App

From this point, the user can touch or click on one of the group names (such as “Group Title 1”), or select one of the items in a group. If the user selects a group name, the resulting screen looks like Figure 13.20. Selecting an item brings up the screen in Figure 13.21.

Figure 13.20 The Group screen in an application created with the Grid App template

Figure 13.21 The screen for an individual item in an application created with the Grid App template

Layout Aware Pages

All the pages placed in a new application by the Grid App and Split App templates are layout aware. That means they know how to respond when the app is transitioned to a snapped view, or between portrait orientation and landscape orientation.

It's still your responsibility to determine what the page does for those orientations. Only very simple default behavior is included in a layout aware page.

You can also use layout aware pages in an app created with the Blank App template. There are six item types in the Add Item dialog that are layout aware pages. Figure 13.22 shows the Add Item dialogue with a bracket around these six page types.

Figure 13.22 The Add New Item dialog in Visual Studio 2012, with a bracket showing the item types that are layout aware pages.

If you add one of these page types to a Blank App, in addition to getting a new item for the layout aware page, several new items are also added to the Common folder.

Items in the Common Folder

The Common folder is created by all Windows 8 XAML application templates, but in a Blank App, it only holds StandardStyles.xaml. In Split App and Grid App, it holds several additional items. As just mentioned, these additional items are added to Common folder for a blank app if a layout aware page is added to the project. Let's take a look at the contents of the Common folder for a project containing a layout aware page.

There are two base classes in the Common folder, BindableBase and LayoutAwarePage. BindableBase is used as the base class for the sample data models, and it implements INotifyPropertyChanged to provide property change notification. You can use it as a base class for your own data models if you like.

LayoutAwarePage is used as the base class for all the layout aware pages, and it includes functionality to help with navigation and to help application pages work better with Windows 8. For example, LayoutAwarePage has events for switching to a snapped view, or switching between portrait and landscape orientations. When you add new Page items to your project, it's a good idea to base most of them on LayoutAwarePage instead of the standard Page element.

The Common folder also contains several useful helper classes. One is a helper object for app suspension, called SuspensionManager.vb. Two commonly used value converters are present, BooleanToVisibilityConverter and BooleanNegationConverter. These converters provide functionality needed in the majority of XAML apps; in fact, WPF included BooleanToVisibilityConverter is its framework libraries. These converters are not part of the framework libraries. They are just source code in the application templates. Still, at least you don't have to write them.

StandardStyles.xaml

As mentioned earlier, the Common folder includes a set of resources in StandardStyles.xaml. You'll probably use those resources a lot, and in fact some were used in earlier examples in this chapter. Most of the resources are Style definitions, hence the name of the item.

StandardStyles.xaml is loaded into the application in the App.xaml Resources collection. That means that all styles in StandardStyles.xaml are available throughout your application.

StandardStyles.xaml has almost 2,000 lines of resources. However, as discussed in the section above on app bars, StandardStyles.xaml contains dozens of styles for app bar buttons, all commented out. You should be aware of the styles for app bar buttons in StandardStyles.xaml, and uncomment the ones you need.

Except for uncommenting app bar button styles, it's a good idea to avoid major changes in StandardStyles.xaml until you become very familiar with the application templates and how these styles are used. If you decide you want your own version of one of these styles in a page, you can copy the Style from StandardStyles.xaml into the Resources collection for that page, and make the changes there. As discussed in Chapter 12, local resources with the same name override resources at a higher level in the application.

Online Documentation for Grid App and Split App Templates

The Grid App and Split App templates include a link to online documentation for the template. It is located at the top of the code-behind module for App.xaml. Other pages in the template also have links at the top, which goes straight to the documentation for that particular page.

The documentation is reasonably extensive, and is likely to be refined over time, so it is not reproduced here. If you want to use these templates, you'll need to study that documentation in depth.