Windows 8 UI Conventions

It's possible to develop Windows 8 apps on a non-touch machine. However, if you are going to design and build apps that function smoothly in a touch environment, you should become familiar with Windows 8 as a user. It's a good idea to acquire a touch-based Windows 8 machine, and use it regularly for a few weeks. Gestures such as swipes and tap/hold need to become second nature to you.

If you've been using a touch-based smartphone or tablet with a different OS, you'll be familiar with some touch conventions. However, Windows 8 has its own conventions for touch, and you'll need to be fluent with them.

You particularly need to understand how Windows presents its main visual elements. Some elements are managed by the operating system, and your application will need to interact with them. Other elements have a standard location, but vary by application, and you will need to create our own version.

When a Windows 8 style application is running, there are three main elements that can be brought into view with swipes from the sides of the screen: a charms bar (sometimes referred to as the start bar), an app bar, and a navigation bar. Figure 13.1 shows all three of these elements in a screen shot of Internet Explorer, with the browser content removed for clarity. Each of them is brought into view by swiping from their respective side: right for charms, bottom for app bar, and top for navigation bar. If your app has both an app bar and a nav bar, bringing either one of them into view will cause the other one to also come into view.

Figure 13.1 The major elements that swipe in from the sides of a Windows 8 app are charms (on the right), the app bar (from the bottom), and the navigation bar (from the top).

The start bar is managed by the operating system. However, your application does interact with it in several key ways.

The Search charm at the top of the start bar is the new way Windows 8 handles search. It yields the sort of search results you would expect from previous versions of Windows, such as programs that match a search string. For the first time, though, Windows 8 search allows custom apps to contribute search results.

Your app also has the ability to share information with other apps via the Share charm. Interacting with the Windows 8 operating system via the Search and Share charms is done by implementing a contract in your app. You'll see how to do that later in the chapter. Your application can also participate with the Settings charm to put up app-specific settings.

Charms are always present; they're part of the OS. The other two bars are optional parts of your application. You get to choose whether your app will have an app bar, a navigation bar, or both. Windows controls when they appear, but you are responsible for all the functionality on them.

An app bar contains app-specific operations. In Internet Explorer's app bar, shown in Figure 13.1, the app bar contains the address bar for entering a URL, and buttons such as Refresh (the arrowed circle) and Favorites (the pushpin).

For your own applications, common examples of app bar functionality would be an Add operation to add a new record to a list, or a Save operation to save changes. A typical line of business apps will usually have an app bar.

The nav bar is intended for use as a navigator inside an application. You can see a typical use of the nav bar in Internet Explorer, as shown in Figure 13.1. The Windows 8 style version of Internet Explorer does not explicitly show browser tabs. The equivalent functionality is displayed in the nav bar, which shows open browser pages and allows the user to choose the active one, or to request a new tab via the button containing a plus sign. Your app might need a similar navigation pattern if it keeps more than one record open at a time.

App bars and nav bars are both implemented in your code with the AppBar element, and you'll see how to do that when you look at the new elements you'll be using routinely in Windows 8 apps. However, before you look at those elements, it's helpful for you to know some of the guidelines to which you must adhere when designing and developing Windows 8 apps.