Guidelines for controls

Applies to Windows and Windows Phone

This section aggregates design information about all the available controls into a single place for ease of access and quick reference. It describes the standard controls that are available without customization. It also provides an example of usage in a real app for each control.

Note   All the controls in this section are included in the templates for Adobe Photoshop and Adobe Illustrator. See Downloads to get the templates.

Using standard controls can save you time when creating common interactions. They work well right out of the box. When working with a developer, you can reference these controls in your design in order to use a common language. For developer info about controls, see the Controls list (Windows Store apps using JavaScript and HTML) or Controls list (Windows Store apps using C#/VB/C++ and XAML).

The standard controls are only a starting place. For some interactions customization is not necessary, but for others it provides an opportunity to delight users with unique UI or to infuse branded elements into the app. For example, in some apps, the button control with no changes is the right, fast solution, and in others, customized buttons are a branded element of the app.

In this section

TopicDescription

App bars

App bars provide users with easy access to commands when they need them. Users can swipe the top or bottom edge of the screen to make app bars appear and can interact with their content to make app bars disappear. App bars can also be used to show commands or options that are specific to the user's context, such as photo selection or drawing mode. They can also be used for navigation among pages or sections of the app.

Back buttons

A back button provides backward navigation in the form of a button.

Buttons

A button, also known as a command button, gives the user a way to trigger an immediate action.

Check boxes

Follow these guidelines for adding check boxes to your app.

Context menus

A context menu displays a short list of commands and options that are available to the user in the current context.

Date pickers

The date picker provides a standardized way to let users pick a localized date by using touch, mouse, or keyboard input.

Drop-down lists

A drop-down list lets users make a choice among a list of mutually exclusive values.

Flip view controls

A sample of what a standard flip view control looks like

Flyouts

A flyout is a lightweight popup that is used to temporarily show UI that is related to what the user is currently doing.

Hub controls in Windows Store apps

The hub control uses a hierarchical navigation pattern to support apps with a relational information architecture.

Hub controls in Windows Phone Store apps

The hub control displays a series of sections that can be panned side to side. It's a full-screen container and navigation model for an app.

Labels

A label is the name or title of a control or group of related controls. It provides no functionality.

Links

Guidelines for adding links to your Windows Store apps.

List boxes (or select)

A list box (also known as a select) gives the user a way to choose usually one item, but sometimes several, from a list of items. Items in a list box can be scrolled if there isn’t space to show all of them.

List view and grid view controls

Guidelines for adding ListView controls to your Windows Store app using JavaScript.

Maps

The map control can display road maps and aerial views, directions, search results, and traffic.

Message dialogs

A message dialog is an overlay UI element that provides a stable and contextual surface that is always modal and explicitly dismissed.

Pivots

The pivot control is a full-screen container and navigation model that also provides a quick way to move between different pivots (views or filters), typically in the same set of data. For example, an email app using a pivot control might list all emails in the first pivot item (or view), and then filter the same list into unread, flagged, and urgent emails in the other pivot items.

Progress controls

A progress control provides feedback to the user that a long-running operation is underway.

Radio buttons

Radio buttons let users select one option from two or more choices.

Rating control

The rating control lets users rate something by clicking an icon that represents a rating. It can display three types of ratings; an average rating, a tentative rating, and the user's rating.

Search

Use these guidelines to help provide search results for your app's content. The guidelines include help for providing search suggestions and placeholder text in the search box, and designing a search results page.

Scroll bars

Panning and scrolling allows users to reach content that extends beyond the bounds of the screen.

Semantic zoom

A semantic zoom control allows the user to zoom between two different semantic views of the same data set.

Sliders

Follow these guidelines for adding sliders to your Windows Store app.

Time pickers

The time picker provides a standardized way to let users pick a localized time by using touch, mouse, or keyboard input.

Toggle switches

The toggle switch mimics a physical switch that allows users to turn things on or off. Use these guidelines when adding toggle switch controls to your Windows Store app.

Tooltips

Use a tooltip to reveal more info about a control before asking the user to perform an action.

Web views

A web view control embeds a view into your app that looks and behaves like Internet Explorer. Hyperlinks can also appear and function in a web view control.

 

 

 

Show:
© 2014 Microsoft