Windows Store app UI, start to finish (XAML)
How do you design a great user interface? What is the best layout for your app? What makes an app easy and intuitive to navigate?
Ask these questions to kick start the design phase of your app's development. Then, learn how to implement your design.
Using guidelines, best practices, and examples, we'll help you take full advantage of the UI capabilities of Windows 8.1. You can define your app's UI so that it's intuitive, beautiful, consistent with other Windows Store apps, and also unique to your brand.
The following sections are an outline of tasks to help you design the UI for your app. They follow the best practices as described in the UX guidelines.
If you're new to Windows Store app development, or if you are unfamiliar with app layout, navigation, controls, and commands, you might find it helpful to review each step. Otherwise, feel free to browse around. We've grouped related aspects of app UI development. The guidelines, tasks, and sample code here are specific to developing Windows Store apps with C#/VB/C++ and XAML. For the JavaScript and HTML version, see Windows Store app UI, start to finish (HTML).
The sample
The Controls and layout gallery sample includes all the UI elements we talk about here. We'll refer to this companion sample often and point you to the places in it where specific features are implemented.
The sample app is a gallery of Windows Store app controls. With the sample, you can browse the controls and the code for implementing each control. You can also see how we implemented each of the steps in the below sections.
Step 1: Get set up and learn what goes where
Before you start to design and develop your app, make sure you do the planning. Take the time to think about what your app is great at, who your audience is, what scenarios you want to implement, and what features you'll support. For more info about how to plan your app, see Defining Vision.
 |
Start by deciding what navigation strategy you want your app to use. In this tutorial, we start from the Hub template. To design and develop the UI of your app, you can download the template and try things out as you follow the outline. For more information, see Navigation patterns and Hierarchical navigation (XAML). Or, if you want to jump right in and explore the code, skip directly to the Controls and layout gallery sample. |
 |
What goes where in a Windows Store app? Learn the guidance for laying out the UI. In the sample, here's how we used this guidance:
|
Step 2: Choose controls to add
Adding controls and laying out your app go hand-in-hand. You need to know what controls to add, and you need to design your layout before you choose controls. Understanding how controls work helps you make good layout decisions.
In this tutorial, we'll first look at individual controls. In step 3, you'll learn how to arrange them in a layout. If you prefer to learn about designing the layout first, you can skip ahead to the next section and come back to controls later.
Check out the sample code to see how we added each control in the gallery.
 |
Familiarize yourself with the complete list of controls that are available and the purpose of each, and choose the controls you need for your app. |
|
Quickstart: Adding controls and handling events Add controls, such as the Button control and TextBox control, set properties on controls, and create event handlers that enable you to respond to actions from the user. |
Step 3: Build the layout
|
Learn about the grid system, headers, margins, and spacing, and how these create a consistent experience for the users. |
|
Guidelines for window sizes and scaling to screens A user can resize an app from the minimum width to full screen and can display it on different size screens, with different resolutions, and in different orientations. You can design your app to look great at any size. In the sample, we used the default minimum width of 500 pixels, and we used the Grid control that reflows content automatically. |
|
Create a fluid UI that looks good and functions well at any size. |
|
Quickstart: Designing apps for different window sizes Learn how to change the minimum width of an app from 500 pixels to 320 pixels and change your design so that the app looks good and functions well at narrow widths. Learn how to design a horizontally panning app to change to a vertical layout any time the app height is greater than the width. |
|
Guidelines for scaling to pixel density As the pixel density of a display device increases, the physical size of objects on screen get smaller. When UI would otherwise be too small to touch and when text gets too small to read, Windows scales the system and app UI to a scale percentage. Learn how to ensure your app looks great when scaled. |
Step 4: Choose where to put commands and how to use charms
|
Learn where to put commands - on the screen, in pop-ups, in dialogs, or in app bars. |
|
Guidelines and checklist for app bars Learn about grouping commands, consistent placement, styles and icons, and other important guidance for command app bars and navigation app bars. In the sample, we implemented a top app bar for navigation. On the detail pages, we implemented a bottom app bar and adding a command for learning more about the specific control on the page. |
|
Guidelines and checklist for adding context menus How to add a menu to an app bar Use context menus for immediate access to actions, like Cut and Paste. Keep context menus short and relevant to the selection. |
|
Guidelines and checklist for search Quickstart: Adding search to an app Learn when to use the in-app search box control and when to use the search contract. |
|
Guidelines for sharing content If your app has content to share, it's a share source. If your app can receive content from other apps, it's a share target. |
|
Quickstart: Adding app settings Be smart about how you use the Settings charm. Keep your settings simple and few. Know the right settings for the Settings pane. |
|
Guidelines for instructional UI Learn when and how to implement app Help in the Settings pane and learn when to use other means to provide help, such as tips, demos, or redesigned UI. |
Step 5: Wrap it up
 |
Run the Windows App Certification Kit. Recommended. Running the certification kit helps you make sure your app fulfills Windows Store requirements, so you should do this when you've added major functionality to your app. |
 |
You’re finished! Now that you've considered the UX guidelines and designed the UI, your app should reflect the best practices to provide a great experience for users. |
Next Steps
Now that you understand the basics, take a look at some of the other examples in the App features, start to finish series.
Want to know more?
Browse the full list of user experience guidelines.
User interaction: Touch input... and beyond
Follow the start to finish story for designing the user interaction experience for your app.
Create your first Windows Store app using C# or Visual Basic
Follow this tutorial series if you're new to Windows Store app development and want to get started with your first app.
Build date: 2/14/2014
