Note
Access to this page requires authorization. You can try signing in or .
Access to this page requires authorization. You can try .
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 |
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 |
Check boxes | A control that a user can select or clear. |
| 👁 Combo boxes |
Combo boxes | A drop-down list of items a user can select from. |
| 👁 Hyperlinks |
Hyperlinks | A button that appears as hyperlink text, and can navigate to a URI or handle a Click event. |
| 👁 Radio buttons |
Radio buttons | A control that allows a user to select a single option from a group of options. |
| 👁 Rating control |
Rating control | Rate something 1 to 5 stars. |
| 👁 Sliders |
Sliders | A control that lets the user select from a range of values by moving a Thumb control along a track. |
| 👁 Toggle switches |
Toggle switches | A switch that can be toggled between 2 states. |
Collections
| Image | Control | Description |
|---|---|---|
| 👁 Items view |
Items view | A control that presents a collection of items using various layouts. |
| 👁 List view and grid view |
List view and grid view | Controls that present a collection of items in a vertical list or in rows and columns. |
| 👁 Flip view |
Flip view | Presents a collection of items that the user can flip through, one item at a time. |
| 👁 Pips pager |
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 |
Tree view | A hierarchical list pattern with expanding and collapsing nodes that contain nested items. |
| 👁 Items repeater |
Items repeater | A flexible, primitive control for data-driven layouts. |
| 👁 Swipe |
Swipe | Touch gesture for quick menu actions on items. |
| 👁 Pull-to-refresh |
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 |
Dialogs | A dialog box that can be customized to contain any XAML content. |
| 👁 Flyouts |
Flyouts | Shows contextual information and enables user interaction. |
| 👁 Teaching tip |
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 |
Icons | Represent icon controls that use different image types as content. |
| 👁 Animated icons |
Animated icons | An element that displays and controls an icon that animates when the user interacts with the control. |
| 👁 Images and image brushes |
Images and image brushes | A control to display image content. |
| 👁 Media playback |
Media playback | A control to display video and image content. |
| 👁 Shapes |
Shapes | Draw shapes such as ellipses, rectangles, and polygons. |
Note
Inking controls (InkCanvas, InkToolbar): These UWP controls are not available in the stable WinUI 3 channel. InkCanvas is available as an experimental API (introduced in Windows App SDK 2.0 Experimental 1). For current status and alternatives, see Known control gaps.
Menus and toolbars
| Image | Control | Description |
|---|---|---|
| 👁 Menus and context menus |
Menus and context menus | Shows a contextual list of simple commands or options. |
| 👁 Command bar |
Command bar | A toolbar for displaying application-specific commands that handles layout and resizing of its contents. |
| 👁 Command bar flyout |
Command bar flyout | A mini-toolbar displaying proactive commands, and an optional menu of commands. |
| 👁 Menu flyout and menu bar |
Menu flyout and menu bar | A classic menu, allowing the display of MenuItems containing MenuFlyoutItems. |
Navigation
| Image | Control | Description |
|---|---|---|
| 👁 Breadcrumb bar |
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 |
Navigation view | Common vertical layout for top-level areas of your app via a collapsible navigation menu. |
| 👁 Screenshot of the Pivot control |
Pivot | Presents information from different sources in a tabbed view. |
| 👁 Selector bar |
Selector bar | Presents information from a small set of different sources. The user can pick one of them. |
| 👁 Tab view |
Tab view | A control that displays a collection of tabs that can be used to display several documents. |
People
| Image | Control | Description |
|---|---|---|
| 👁 Person picture |
Person picture | Displays the picture of a person/contact. |
Pickers
| Image | Control | Description |
|---|---|---|
| 👁 Color picker |
Color picker | A control that displays a selectable color spectrum. |
| 👁 Calendar date picker |
Calendar date picker | A control that lets users pick a date value using a calendar. |
| 👁 Calendar view |
Calendar view | A control that presents a calendar for a user to choose a date from. |
| 👁 Date picker |
Date picker | A control that lets a user pick a date value. |
| 👁 Time picker |
Time picker | A configurable control that lets a user pick a time value. |
Scrolling and layout
| Image | Control | Description |
|---|---|---|
| 👁 Screenshot of the Expander control |
Expander | A container with a header that can be expanded to show a body with more content. |
| 👁 Scrolling and panning controls |
Scrolling and panning controls | A container control that lets the user pan and zoom its content. |
| 👁 Annotated scrollbar |
Annotated scrollbar | A control that extends a regular vertical scrollbar's functionality for an easy navigation through large collections. |
| 👁 Semantic zoom |
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 |
Split view | A container that has 2 content areas, with multiple display options for the pane. |
| 👁 Two-pane view |
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 |
Progress | Shows the app's progress on a task using a progress bar or progress ring. |
| 👁 Screenshot of the Tooltip control |
Tooltip | Displays information for an element in a pop-up window. |
| 👁 Info bar |
Info bar | An inline message to display app-wide status change information. |
| 👁 Info badge |
Info badge | A non-intrusive UI to display notifications or bring focus to an area. |
Text
| Image | Control | Description |
|---|---|---|
| 👁 Auto-suggest box |
Auto-suggest box | A control to provide suggestions as a user is typing. |
| 👁 Text block |
Text block | A lightweight control for displaying small amounts of text. |
| 👁 Rich text block |
Rich text block | A control that displays formatted text, hyperlinks, inline images, and other rich content. |
| 👁 Text box |
Text box | A single-line or multi-line plain text field. |
| 👁 Rich edit box |
Rich edit box | A rich text editing control that supports formatted text, hyperlinks, and other rich content. |
| 👁 Password box |
Password box | A control for entering passwords. |
| 👁 Number box |
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 |
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.
- 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.
Windows developer
Feedback
Was this page helpful?