- 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
- 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 which 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 which require multiple pages.
- Grid App—Contains two pages. One page displays a list of items in different groups. The second page displays details for the item which you click.
- Split App—Contains two pages. One page displays a list of groups. The second page displays a list of items and details for one item.
- Fixed Layout App—Always scales an element to the same size with the same aspect ratio regardless of the screen resolution.
We already used the Blank App project template when creating our first Windows app above. 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 10, “Page Fragments and Navigation.”
){kind=link}
Figure 1.16. Creating a multi-page app with the Navigation App project template
The next two project templates—the Grid App project template and the Split App project template—are built on top of the Navigation App template. In other words, the Grid and Split App templates are multi-page apps with additional pages.
Grid App Project Template
The Grid App project template displays sets of items in different groups. You can click an item to view details on an item.
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.
The Grid App project template displays different pages depending on the view state of your app. If your app is not snapped, then there are two pages. The groupedItems page displays the groups and their items (see Figure 1.17). When you click an item, the itemDetail page shows details for a particular item (see Figure 1.18).
)
Figure 1.17. The Grid App groupedItems page
)
Figure 1.18. The Grid App itemDetails page
If your Windows Store app is snapped, then there is an extra page. You select a group (see Figure 1.19), then you select an item (see Figure 1.20), and then you see the item details (see Figure 1.21).
){kind=link}
){kind=link}
Figure 1.19. The Grid App groupedItems page in a snapped app
Figure 1.20. The Grid App groupDetail page in a snapped app
)
Figure 1.21. The Grid App itemDetail page in a snapped app
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.22, the items page displays the product categories.
)
Figure 1.22. 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.23).
)
Figure 1.23. The Split App split page
Like the Grid App template, the Split App project template provides a different user experience when the app is snapped. When a Split App is snapped, you navigate from the group, to the items in the group, to the item detail.
Fixed Layout App Project Template
The Fixed Layout template is for a very specific scenario. The HTML page in this template includes a ViewBox control, which resizes its content to fit the available screen real estate while retaining the correct aspect ratio.
Imagine, for example, that you happen to have a picture of a Tesla and the picture measures 800px by 484px. You want the page to fill the entire available space but not get distorted.
Figure 1.24 illustrates the appearance of the picture on a device with a resolution of 1,024px by 768px. Notice that the picture has been scaled automatically to fit the available space.
)
Figure 1.24. Picture shown with 1,024px by 768px resolution
If you view the very same picture on a device with a different resolution, then the picture will be scaled automatically to fit the new resolution. For example, Figure 1.25 illustrates what happens when you display the picture on a device with a resolution of 1,920px by 1,080px. Notice that you get pillars on either edge of the photo so that the photo will not be distorted.
)
Figure 1.25. Picture shown with 1,920px by 1,080px resolution
The ViewBox even resizes its child element automatically when you snap an app (see Figure 1.26).
)
Figure 1.26. Resized picture when app is snapped
The ViewBox control has some significant limitations. You can add only one child element to a ViewBox. It won’t work, for example, with a set of pictures.
Furthermore, the ViewBox does not work with text. You can use the ViewBox to resize a picture or a canvas.
The main scenario in which it makes sense to use the ViewBox (and the Fixed Layout project template) is when you want to create a game and you want the game to look good on computers and tablets with different resolutions. You don’t want your angry bird to look fat on one computer and skinny on another.
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.27). 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.27. 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.28).
)
Figure 1.28. 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.