| description | title | keywords | label | template | ms.date | ms.topic | ms.assetid | ms.localizationpriority |
|---|---|---|---|---|---|---|---|---|
Get design guidance and coding instructions for adding controls to your Windows app. Find over 45 powerful controls you can use with your app. | Windows Controls and patterns - Windows app development | uwp controls, user interface, app controls, windows controls | Controls & patterns | detail.hbs | 02/27/2025 | article | ce2e611c-c419-4a14-9095-b88ac711d1b8 | medium |
In Windows app development, a control is a UI element that displays content or enables interaction. Controls are the building blocks of the user interface. A pattern is a recipe for combining several controls to make something new.
We provide 45+ controls for you to use, ranging from simple buttons to powerful data controls like the grid view. These controls are a part of the Fluent Design System and can help you create a bold, scalable UI that looks great on all devices and screen sizes.
The articles in this section provide design guidance and coding instructions for adding controls & patterns to your Windows app.
The topics highlighted here provide instructions and code examples for adding and styling controls in XAML and C#.
:::row::: :::column::: Add controls and handle events
There are 3 key steps to adding controls to your app: Add a control to your app UI, set properties on the control, and add code to the control's event handlers so that it does something.</p> :::column-end::: :::column::: [**Styling controls**](../../develop/platform/xaml/xaml-styles.md) You can customize the appearance of your apps in many ways by using the XAML framework. Styles let you set control properties and reuse those settings for a consistent appearance across multiple controls.</p> :::column-end::: :::row-end:::
:::row::: :::column::: 
:::column-end::: :::column span="3"::: Some controls are only available in WinUI, a NuGet package that contains new controls and UI features. To get it, see the WinUI overview and installation instructions. :::column-end::: :::column:::
:::column-end::: :::row-end:::
The following table lists the common Windows app controls and patterns along with those that are exclusive to WinUI.
:::row::: :::column span="2"::: Common Windows app controls :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: WinUI only :::column-end::: :::row-end::: :::row::: :::column::: Auto-suggest box :::column-end::: :::column::: Button :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Animated icon :::column-end::: :::row-end::: :::row::: :::column::: Calendar date picker :::column-end::: :::column::: Calendar view :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Animated visual player (see Lottie) :::column-end::: :::row-end::: :::row::: :::column::: Checkbox :::column-end::: :::column::: Combo box :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Breadcrumb bar :::column-end::: :::row-end::: :::row::: :::column::: Command bar :::column-end::: :::column::: Contact card :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Color picker :::column-end::: :::row-end::: :::row::: :::column::: Content dialog :::column-end::: :::column::: Content link :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Command bar flyout :::column-end::: :::row-end::: :::row::: :::column::: Context menu :::column-end::: :::column::: Date picker :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Drop down button :::column-end::: :::row-end::: :::row::: :::column::: Dialogs and flyouts :::column-end::: :::column::: Flip view :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Expander :::column-end::: :::row-end::: :::row::: :::column::: Flyout :::column-end::: :::column::: Forms (pattern) :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Info bar :::column-end::: :::row-end::: :::row::: :::column::: Grid view :::column-end::: :::column::: Hyperlink :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Menu bar :::column-end::: :::row-end::: :::row::: :::column::: Hyperlink button :::column-end::: :::column::: Images and image brushes :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Navigation view :::column-end::: :::row-end::: :::row::: :::column::: Inking controls :::column-end::: :::column::: List/details (pattern) :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Number box :::column-end::: :::row-end::: :::row::: :::column::: List view :::column-end::: :::column::: Map control :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Parallax view :::column-end::: :::row-end::: :::row::: :::column::: Media playback :::column-end::: :::column::: Menu flyout :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Person picture :::column-end::: :::row-end::: :::row::: :::column::: Password box :::column-end::: :::column::: Repeat button :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Pips pager :::column-end::: :::row-end::: :::row::: :::column::: Rich edit box :::column-end::: :::column::: Rich text block :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Progress bar :::column-end::: :::row-end::: :::row::: :::column::: Scroll viewer :::column-end::: :::column::: Semantic zoom :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Progress ring :::column-end::: :::row-end::: :::row::: :::column::: Shapes :::column-end::: :::column::: Slider :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Radio button :::column-end::: :::row-end::: :::row::: :::column::: Split view :::column-end::: :::column::: Text block :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Rating control :::column-end::: :::row-end::: :::row::: :::column::: Text box :::column-end::: :::column::: Time picker :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Split button :::column-end::: :::row-end::: :::row::: :::column::: Toggle switch :::column-end::: :::column::: Toggle button :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Swipe control :::column-end::: :::row-end::: :::row::: :::column::: Toggle split button :::column-end::: :::column::: Tooltips :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: Tab view :::column-end::: :::row-end::: :::row::: :::column::: Web view :::column-end::: :::column:::
:::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: [Teaching tip](dialogs-and-flyouts/teaching-tip.md) :::column-end::: :::row-end::: :::row::: :::column:::
:::column-end::: :::column::: :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: [Tree view](tree-view.md) :::column-end::: :::row-end:::
:::row::: :::column:::
:::column-end::: :::column::: :::column-end::: :::column::: :::image type="icon" source="images/winui-logo-16x16.png"::: [Two-pane view](two-pane-view.md) :::column-end::: :::row-end:::
Get the WinUI Gallery apps from the Microsoft Store to see XAML controls and the Fluent Design System in action. The WinUI 3 Gallery and WinUI 2 Gallery apps include interactive examples of most WinUI 3 and WinUI 2 controls, features, and functionality. The apps are an interactive companion to this website. When you have them installed, you can use links on individual control pages to launch the app and see the control in action.
[!div class="checklist"]
- Get the WinUI 3 Gallery and the WinUI 2 Gallery from the Microsoft Store.
- Get the source code for both from GitHub (use the main branch for WinUI 3 and the winui2 branch for WinUI 2).
Additional controls for Windows development are available from companies such as Telerik, SyncFusion, DevExpress, Infragistics, ComponentOne, and ActiPro. These controls provide additional support for enterprise and .NET developers by augmenting the standard system controls with custom controls and services.
