- What Is a Windows Store App?
- Creating Your First Windows Store App
- Elements of a Windows Store App
- Building Windows Store Apps with Visual Studio
- Debugging a Windows Store App
- Publishing to the Windows Store
- Migrating from Windows 8 to Windows 8.1
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Building Windows Store Apps with Visual Studio
This book focuses on building Windows Store apps with Visual Studio. In this section, I want to devote a few pages to describing the features of Visual Studio that matter when building Windows Store apps. You learn how to select a project template for a Windows Store app, how to run a Windows Store app, and how to debug a Windows Store app.
Windows Store App Project Templates
When you select the File, New Project menu option in Visual Studio, you can select from five different project templates as your starting point for your Windows Store app:
- Blank App—The simplest of the templates. Contains a single default.html, default.css, and default.js file.
- Navigation App—Use this template for apps that require multiple pages.
- Grid App—Contains three pages for displaying groups of items.
- Split App—Contains two pages for displaying groups of items.
- Hub App—Contains three pages. One page displays a navigation hub and the other two pages display section and item detail. This project template is new with Windows 8.1.
We already used the Blank App project template when creating our first Windows app. Let me discuss the other project templates in more detail.
Navigation App Project Template
The Blank App template is a good template to use when building a simple, single-page app. If you need to support multiple pages, on the other hand, then you should use the Navigation App template.
The Navigation App project template includes a single page named home. You can add additional pages by adding new Page Controls to the pages subfolder (see Figure 1.16). I describe how you can create multi-page applications in detail in Chapter 12, “Page Fragments and Navigation.”
){kind=link}
FIGURE 1.16 Creating a multi-page app with the Navigation App project template
The next three project templates—the Grid App, the Split App, and the Hub App project templates—are built on top of the Navigation App template. In other words, these project templates are multi-page apps with additional pages.
Grid App Project Template
The Grid App project template contains three pages. The main page displays groups of items in a horizontal scrolling grid. You can click a group to view group details or click an item to view item details.
Imagine, for example, that you are creating a product catalog. In that case, you might create different product categories such as Beverages and Fruit. Each category is a group and each category contains a set of product items.
You can use the Grid App groupedItems page to display a horizontal scrolling grid of the product categories and associated products (see Figure 1.17). If you click a product category then you can view details for that category (see Figure 1.18). If you click a product then you can view details for that product (see Figure 1.19).
)
FIGURE 1.17 The Grid App groupedItems page
)
FIGURE 1.18 The Grid App groupDetail page
)
FIGURE 1.19 The Grid App itemDetail page
Split App Project Template
The Split App project template also can be used to display groups of items such as products grouped into product categories. The Split App project template has two pages: items and split.
The items page displays the list of groups. For example, in Figure 1.20, the items page displays the product categories.
){kind=link}
FIGURE 1.20 The Split App items page
If you click a group then you navigate to the split page. This page displays a list of items in the group—the products in the category—and enables you to select an item to see item details (see Figure 1.21).
)
FIGURE 1.21 The Split App split page
Hub App Project Template
The Hub App project template is new with Windows 8.1. The Hub App template consists of three pages. The main page contains a Hub control and displays a horizontal list of sections (see Figure 1.22). If you click a section title then you navigate to the section page. If you click an item then you navigate to the item page.
)
FIGURE 1.22 The Hub App template
The special thing about the Hub App template is that you can display anything you want within the Hub sections. You can display a list of items, you can display a paragraph of text, or you can display anything else which you heart desires.
For example, in Figure 1.22, Section 1 contains a paragraph of text and Section 2 contains a list of items. Each Hub section can contain different types of content.
Running a Windows Store App
Visual Studio provides you with three different options for running a Windows Store app:
- Local Machine
- Simulator
- Remote Machine
The Local Machine option runs a Windows Store app as if the app was installed on the local machine. The Windows Store app will run using the screen resolution and capabilities of your development machine (the machine running Visual Studio).
The Simulator option runs your app in a separate window (see Figure 1.23). The advantage of using the simulator is that you can simulate different types of devices. For example, you can switch from mouse mode to basic touch mode to simulate a touch device such as a tablet PC. You also can switch to different screen resolutions to test your app at different resolutions.
)
FIGURE 1.23 Using the Visual Studio simulator
The final option is to deploy and run your Windows Store app on a remote machine. Before you can run your app on a remote machine, you must first specify the remote machine name in the Project Property Pages window (see Figure 1.24).
)
FIGURE 1.24 Specifying the remote machine name
After you specify the name of the remote machine, you can deploy and run your app on the remote machine by picking this option from the Visual Studio toolbar.