| description | title | author | keywords | label | template | ms.author | ms.date | ms.topic | ms.prod | ms.technology | ms.assetid | ms.localizationpriority |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Get design guidance and coding instructions for adding controls & patterns to your UWP app. Find over 45 powerful controls for you to use with your app. |
UWP Controls and patterns - Windows app development |
mijacobs |
uwp controls, user interface, app controls |
Controls & patterns |
detail.hbs |
mijacobs |
11/16/2017 |
article |
windows |
uwp |
ce2e611c-c419-4a14-9095-b88ac711d1b8 |
medium |
In UWP 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 UWP app.
General instructions and code examples for adding and styling controls in XAML and C#.
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.
Styling controls
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.
Detailed information about specific controls and patterns. (For a list sorted by function, see Index of controls by function.)
- Auto-suggest box
- Bars
- Buttons
- Checkbox
- Color picker
- Contact card
- Date and time controls
- Dialogs and flyouts
- Flip view
- Forms
- Hub
- Hyperlinks
- Images and image brushes
- Inking controls
- Lists
- Map control
- Master/details
- Media playback
- Menus and context menus
- Nav view
- Person picture
- Progress controls
- Radio button
- Rating control
- Scrolling and panning controls
- Search
- Semantic zoom
- Shapes
- Slider
- Split view
- Tabs and pivots
- Text controls
- Tiles, badges, and notifications
- Toggle
- Tooltips
- Tree view
- Web view
Get the XAML Controls Gallery app from the Microsoft Store to see these controls and the Fluent Design System in action. The app is an interactive companion to this website. When you have it installed, you can use links on individual control pages to launch the app and see the control in action.
Get the XAML Controls Gallery app (Microsoft Store)
Additional controls for UWP 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.
If you're interested in learning more about these controls, check out the Customer orders database sample on GitHub. This sample makes use of the data grid control and data entry validation from Telerik, which is part of their UI for UWP suite. The UI for UWP suite is a collection of over 20 controls that is available as an open source project through the .NET foundation.