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.
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.
The following table lists the Windows app controls available in WinUI, with links to their documentation.
| 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. |
| 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. |
| 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. |
| Image | Control | Description |
|---|
| Forms | A pattern for collecting and submitting user input using a combination of input controls and labels. |
| 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. |
 | Media playback | A control to display video and image content. |
 | 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.
| 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. |
| 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. |
| Image | Control | Description |
|---|
 | Person picture | Displays the picture of a person/contact. |
| 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. |
| 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. |
| 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. |
| 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. |
| Image | Control | Description |
|---|
 | Title bar | Customize the title bar of your app window. |
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"]
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.