Windows Dev Center

Guidelines for controls and patterns

This section provides design guidelines for Universal Windows Platform (UWP) app controls and patterns into a single place for ease of access and quick reference.

  • A control is a UI element that we've created for you. You can use them out-of-the box, or you can tailor their appearance to fit your app's style.

    Using our controls can save you time when creating common interactions. They work well right out of the box with all types of inputs. 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 (XAML) or Controls list (HTML).

  • A pattern is a recipe that uses one or more controls to provide a specific type of functionality.
Note   All the controls in this section are included in the templates for Microsoft PowerPoint and Adobe Illustrator. See Downloads to get the templates.

In this section

TopicDescription

Active canvas

A pattern with a content area and a command area for single-view apps or modal experiences, such as photo viewers/editors, document viewers, maps, painting, or other apps that make use of a free-scrolling view.

Auto suggest box

A text entry box that provides suggestions as the user types.

Back button

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

Button

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

Calendar date picker

Enables users to view and set a single date or a range of dates.

Calendar view

Enables users to view a date or a range of dates.

Check box

Follow these guidelines for adding check boxes to your app.

Command bars

App bars provide users with easy access to commands when they need them. 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.

Context menu

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

Date picker

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

Dialog controls

Dialogs are modal UI overlays that prompt the user for an action.

Drop-down lists

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

Filtering and sorting

Filtering and sorting commands put the user in charge of how they view content.

Flip view

Displays images in a collection, such as photos in an album or items in a product details page, one image at a time.

Flyout

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

Hub

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

Hyperlinks

Guidelines for adding links to your Windows Store apps.

Labels

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

List box (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

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.

Master/details

The master/detail pattern displays a master list and the details for the currently selected item. This pattern is frequently used for email and contact lists/address books.

Media player

Plays audio and video.

Message dialogs

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

Nav pane

Provides top-level navigation while conserving screen real estate.

Progress controls

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

Radio button

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

Rating

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

Search is one of the top ways users can find content in your app. The guidance in this article covers elements of the search experience, search scopes, implementation, and examples of search in context.

Semantic zoom

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

Scroll bar

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

Slider

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

Split view

A split view control has an expandable/collapsible pane and a content area. The content area is always visible. The pane can expand and collapse or remain in an open state, and can present itself from either the left side or right side of an app window. The pane has three modes:

Tabs and pivots

Tabs and pivots are enable users to navigate between frequently accessed content.

Time picker

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

Toggle switch

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.

Tooltip

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

Web view

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:
© 2015 Microsoft