index.md

description	Get design guidance and coding instructions for adding controls to your Windows app. Find over 45 powerful controls you can use with your app.
title	Windows Controls and patterns - Windows app development
keywords	uwp controls, user interface, app controls, windows controls
label	Controls & patterns
template	detail.hbs
ms.date	02/27/2025
ms.topic	article
ms.assetid	ce2e611c-c419-4a14-9095-b88ac711d1b8
ms.localizationpriority	medium

Controls for Windows apps

Controls are the UI elements that make up your Windows app—buttons, text fields, lists, pickers, and more. A control displays content or lets users interact with your app. A pattern combines multiple controls into a reusable recipe for common scenarios like forms or list-detail layouts.

Windows provides over 45 ready-to-use controls, all built on the Fluent Design System. From simple toggles to rich data views like grid and list, these controls help you build interfaces that are visually polished, accessible, and responsive across devices.

Browse the articles in this section for design guidance, code examples, and best practices for each control and pattern.

Getting started

To learn how to add controls to your app and wire up event handlers, see Add controls and handle events. To customize control appearance with reusable XAML styles, see Styling controls.

Controls

The following table lists the Windows app controls available in WinUI, with links to their documentation.

Basic input

Image	Control	Description
	Buttons	A control that responds to user input and raises a Click event. Includes button, drop-down button, split button, toggle button, and more.
	Check boxes	A control that a user can select or clear.
	Combo boxes	A drop-down list of items a user can select from.
	Hyperlinks	A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.
	Radio buttons	A control that allows a user to select a single option from a group of options.
	Rating control	Rate something 1 to 5 stars.
	Sliders	A control that lets the user select from a range of values by moving a Thumb control along a track.
	Toggle switches	A switch that can be toggled between 2 states.

Collections

Image	Control	Description
	Items view	A control that presents a collection of items using various layouts.
	List view and grid view	Controls that present a collection of items in a vertical list or in rows and columns.
	Flip view	Presents a collection of items that the user can flip through, one item at a time.
	Pips pager	A control to let the user navigate through a paginated collection when the page numbers do not need to be visually known.
	Tree view	A hierarchical list pattern with expanding and collapsing nodes that contain nested items.
	Items repeater	A flexible, primitive control for data-driven layouts.
	Swipe	Touch gesture for quick menu actions on items.
	Pull-to-refresh	Provides the ability to pull on a collection of items in a list/grid to refresh the contents of the collection.

Dialogs and flyouts

Image	Control	Description
	Dialogs	A dialog box that can be customized to contain any XAML content.
	Flyouts	Shows contextual information and enables user interaction.
	Teaching tip	A content-rich flyout for guiding users and enabling teaching moments.

Forms

Image	Control	Description
	Forms	A pattern for collecting and submitting user input using a combination of input controls and labels.

Media, graphics, and shapes

Image	Control	Description
	Icons	Represent icon controls that use different image types as content.
	Animated icons	An element that displays and controls an icon that animates when the user interacts with the control.
	Images and image brushes	A control to display image content.
	Ink	Controls for digital inking, including ink canvas and ink toolbar.
	Media playback	A control to display video and image content.
	Shapes	Draw shapes such as ellipses, rectangles, and polygons.

Menus and toolbars

Image	Control	Description
	Menus and context menus	Shows a contextual list of simple commands or options.
	Command bar	A toolbar for displaying application-specific commands that handles layout and resizing of its contents.
	Command bar flyout	A mini-toolbar displaying proactive commands, and an optional menu of commands.
	Menu flyout and menu bar	A classic menu, allowing the display of MenuItems containing MenuFlyoutItems.

Navigation

Image	Control	Description
	Breadcrumb bar	Shows the trail of navigation taken to the current location.
	List/details	A pattern that displays a list of items alongside the details of the currently selected item.
	Navigation view	Common vertical layout for top-level areas of your app via a collapsible navigation menu.
	Pivot	Presents information from different sources in a tabbed view.
	Selector bar	Presents information from a small set of different sources. The user can pick one of them.
	Tab view	A control that displays a collection of tabs that can be used to display several documents.

People

Image	Control	Description
	Person picture	Displays the picture of a person/contact.

Pickers

Image	Control	Description
	Color picker	A control that displays a selectable color spectrum.
	Calendar date picker	A control that lets users pick a date value using a calendar.
	Calendar view	A control that presents a calendar for a user to choose a date from.
	Date picker	A control that lets a user pick a date value.
	Time picker	A configurable control that lets a user pick a time value.

Scrolling and layout

Image	Control	Description
	Expander	A container with a header that can be expanded to show a body with more content.
	Scrolling and panning controls	A container control that lets the user pan and zoom its content.
	Annotated scrollbar	A control that extends a regular vertical scrollbar's functionality for an easy navigation through large collections.
	Semantic zoom	Lets the user zoom between two different views of a collection, making it easier to navigate through large collections of items.
	Split view	A container that has 2 content areas, with multiple display options for the pane.
	Two-pane view	A control with two content areas that span the available space, either side-by-side or top-bottom.

Status and information

Image	Control	Description
	Progress	Shows the app's progress on a task using a progress bar or progress ring.
	Tooltip	Displays information for an element in a pop-up window.
	Info bar	An inline message to display app-wide status change information.
	Info badge	A non-intrusive UI to display notifications or bring focus to an area.

Text

Image	Control	Description
	Auto-suggest box	A control to provide suggestions as a user is typing.
	Text block	A lightweight control for displaying small amounts of text.
	Rich text block	A control that displays formatted text, hyperlinks, inline images, and other rich content.
	Text box	A single-line or multi-line plain text field.
	Rich edit box	A rich text editing control that supports formatted text, hyperlinks, and other rich content.
	Password box	A control for entering passwords.
	Number box	A text control used for numeric input and evaluation of algebraic equations.
	Labels	Guidance for adding accessible labels to input controls.

Title bar

Image	Control	Description
	Title bar	Customize the title bar of your app window.

WinUI 3 Gallery

The WinUI 3 Gallery app is the best way to explore these controls hands-on. It provides interactive demos of most WinUI controls, features, and Fluent Design patterns—making it an ideal companion to this documentation. Install it to try controls in real time and link directly from individual control pages.

[!div class="checklist"]

• Get the WinUI 3 Gallery from the Microsoft Store.
• Get the source code from GitHub.

Additional controls and resources

The Windows Community Toolkit is a collection of helpers, extensions, and additional UI controls that complement the built-in WinUI controls. It's community-driven and maintained by Microsoft, covering common scenarios like advanced layouts, converters, and animations.

For early access to experimental controls and features, check out Windows Community Toolkit Labs, where new components are developed and tested before graduating to the main toolkit.