| author | Description | title | ms.assetid | label | template | ms.author | ms.date | ms.topic | ms.prod | ms.technology | keywords | ms.localizationpriority |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jwmsft |
Provides a list by function of some of the controls that you can use in your apps. |
Controls by function |
8DB4347B-91D6-4659-91F2-80ECF7BBB596 |
Controls by function |
detail.hbs |
jimwalk |
05/19/2017 |
article |
windows |
uwp |
windows 10, uwp |
medium |
The XAML UI framework for Windows provides an extensive library of controls that support UI development. Some of these controls have a visual representation; others function as the containers for other controls or content, such as images and media.
You can see many of the Windows UI controls in action by downloading the XAML UI Basics sample.
Here's a list by function of the common XAML controls you can use in your app.
A toolbar for displaying application-specific commands. See Command bar.
Reference: AppBar
A button for showing commands using app bar styling.
Reference: AppBarButton, SymbolIcon, BitmapIcon, FontIcon, PathIcon
Design and how-to: App bar and command bar control guide
Sample code: XAML Commanding sample
Visually separates groups of commands in a command bar.
Reference: AppBarSeparator
Sample code: XAML Commanding sample
A button for toggling commands in a command bar.
Reference: AppBarToggleButton
Sample code: XAML Commanding sample
A specialized app bar that handles the resizing of app bar button elements.
<CommandBar>
<AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
<AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
<AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
</CommandBar>Reference: CommandBar
Design and how-to: App bar and command bar control guide
Sample code: XAML Commanding sample
A control that responds to user input and raises a Click event.
<Button x:Name="button1" Content="Button"
Click="Button_Click" />Reference: Button
Design and how-to: Buttons control guide
See Hyperlink button.
A button that appears as marked up text and opens the specified URI in a browser.
<HyperlinkButton Content="www.microsoft.com"
NavigateUri="http://www.microsoft.com"/>Reference: HyperlinkButton
Design and how-to: Hyperlinks control guide
A button that raises its Click event repeatedly from the time it's pressed until it's released.
<RepeatButton x:Name="repeatButton1" Content="Repeat Button"
Click="RepeatButton_Click" />Reference: RepeatButton
Design and how-to: Buttons control guide
A control that presents a collection of items that the user can flip through, one item at a time.
<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
<Image Source="Assets/Logo.png" />
<Image Source="Assets/SplashScreen.png" />
<Image Source="Assets/SmallLogo.png" />
</FlipView>Reference: FlipView
Design and how-to: Flip view control guide
A control that presents a collection of items in rows and columns that can scroll vertically.
<GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
</GridView>Reference: GridView
Design and how-to: Lists
Sample code: ListView sample
A control that presents a collection of items in a UI specified by a data template.
<ItemsControl/>Reference: ItemsControl
A control that presents a collection of items in a list that can scroll vertically.
<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
</ListView>Reference: ListView
Design and how-to: Lists
Sample code: ListView sample
A control that lets a user select a date using a drop-down calendar display.
<CalendarDatePicker/>Reference: CalendarDatePicker
Design and how-to: Calendar, date, and time controls
A configurable calendar display that lets a user select single or multiple dates.
<CalendarView/>Reference: CalendarView
Design and how-to: Calendar, date, and time controls
A control that lets a user select a date.
<DatePicker Header="Arrival Date"/>Reference: DatePicker
Design and how-to: Calendar, date, and time controls
A control that lets a user set a time value.
<TimePicker Header="Arrival Time"/>Reference: TimePicker
Design and how-to: Calendar, date, and time controls
See Menu flyout and Popup menu.
Displays a message that requires user interaction. (Unlike a dialog, a flyout does not create a separate window, and does not block other user interaction.)
<Flyout>
<StackPanel>
<TextBlock Text="All items will be removed. Do you want to continue?"/>
<Button Click="DeleteConfirmation_Click" Content="Yes, empty my cart"/>
</StackPanel>
</Flyout>Reference: Flyout
Design and how-to: Context menus and dialogs
Temporarily displays a list of commands or options related to what the user is currently doing.
<MenuFlyout>
<MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
<MenuFlyoutSeparator/>
<ToggleMenuFlyoutItem Text="Shuffle"
IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>
<ToggleMenuFlyoutItem Text="Repeat"
IsChecked="{Binding IsRepeatEnabled, Mode=TwoWay}"/>
</MenuFlyout>Reference: MenuFlyout, MenuFlyoutItem, MenuFlyoutSeparator, ToggleMenuFlyoutItem
Design and how-to: Context menus and dialogs
Sample code: XAML Context Menu sample
A custom menu that presents commands that you specify.
Reference: PopupMenu
Design and how-to: Context menus and dialogs
A pop-up window that displays information for an element.
<Button Content="Button" Click="Button_Click"
ToolTipService.ToolTip="Click to perform action" />Reference: ToolTip, ToolTipService
Design and how-to: Guidelines for tooltips
A control that presents an image.
<Image Source="Assets/Logo.png" />Reference: Image
Design and how-to: Image and ImageBrush
Sample code: XAML images sample
A control that receives and displays ink strokes.
<InkCanvas/>Reference: InkCanvas
Various retained mode graphical objects that can be presented like ellipses, rectangles, lines, Bezier paths, etc.
<Ellipse/>
<Path/>
<Rectangle/>Reference: Shapes
How to: Drawing shapes
Sample code: XAML vector-based drawing sample
A container control that draws a border, background, or both, around another object.
<Border BorderBrush="Blue" BorderThickness="4"
Height="108" Width="64"
Padding="8" CornerRadius="4">
<Canvas>
<Rectangle Fill="Orange"/>
<Rectangle Fill="Green" Margin="0,44"/>
</Canvas>
</Border>Reference: Border
A layout panel that supports the absolute positioning of child elements relative to the top left corner of the canvas.
<Canvas Width="120" Height="120">
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/>
<Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/>
<Rectangle Fill="Orange" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>Reference: Canvas
A layout panel that supports the arranging of child elements in rows and columns.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Grid.Row="1"/>
<Rectangle Fill="Green" Grid.Column="1"/>
<Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1"/>
</Grid>Reference: Grid
See Scroll viewer.
A panel that lets you position and align child objects in relation to each other or the parent panel.
<RelativePanel>
<TextBox x:Name="textBox1" RelativePanel.AlignLeftWithPanel="True"/>
<Button Content="Submit" RelativePanel.Below="textBox1"/>
</RelativePanel>Reference: RelativePanel
See scroll viewer. (ScrollBar is an element of ScrollViewer. You don't typically use it as a stand-alone control.)
Reference: ScrollBar
A container control that lets the user pan and zoom its content.
<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="10"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible"
Height="200" Width="200">
<Image Source="Assets/Logo.png" Height="400" Width="400"/>
</ScrollViewer>Reference: ScrollViewer
Design and how-to: Scroll and panning controls guide
Sample code: XAML scrolling, panning and zooming sample
A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.
<StackPanel>
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue"/>
<Rectangle Fill="Green"/>
<Rectangle Fill="Orange"/>
</StackPanel>Reference: StackPanel
A layout panel that supports the arranging of child elements in rows and columns. Each child element can span multiple rows and columns.
<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Height="80"
VariableSizedWrapGrid.RowSpan="2"/>
<Rectangle Fill="Green" Width="80"
VariableSizedWrapGrid.ColumnSpan="2"/>
<Rectangle Fill="Orange" Height="80" Width="80"
VariableSizedWrapGrid.RowSpan="2"
VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>Reference: VariableSizedWrapGrid
A container control that scales its content to a specified size.
<Viewbox MaxWidth="25" MaxHeight="25">
<Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="75" MaxHeight="75">
<Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="150" MaxHeight="150">
<Image Source="Assets/Logo.png"/>
</Viewbox>Reference: Viewbox
See Scroll viewer.
See Media element.
A control that plays audio and video content.
<MediaElement x:Name="myMediaElement"/>Reference: MediaElement
Design and how-to: Media element control guide
A control that provides playback controls for a MediaElement.
<MediaTransportControls MediaElement="myMediaElement"/>Reference: MediaTransportControls
Design and how-to: Media element control guide
Sample code: Media Transport Controls sample
See Media element.
A container control that lets the user view and navigate to different sections of content.
<Hub>
<HubSection>
<!--- hub section content -->
</HubSection>
<HubSection>
<!--- hub section content -->
</HubSection>
</Hub>Reference: Hub
Design and how-to: Hub control guide
Sample code:XAML Hub control sample
A full-screen container and navigation model that also provides a quick way to move between different pivots (views or filters), typically in the same set of data.
The Pivot control can be styled to have a "tab" layout.
Reference: Pivot
Design and how-to: Tabs and pivot control guide
Sample code: Pivot sample
A container control that lets the user zoom between two views of a collection of items.
<SemanticZoom>
<ZoomedInView>
<GridView></GridView>
</ZoomedInView>
<ZoomedOutView>
<GridView></GridView>
</ZoomedOutView>
</SemanticZoom>Reference: SemanticZoom
Design and how-to: Semantic zoom control guide
Sample code: XAML GridView grouping and SemanticZoom sample
A container control with two views; one view for the main content and another view that is typically used for a navigation menu.
<SplitView>
<SplitView.Pane>
<!-- Menu content -->
</SplitView.Pane>
<SplitView.Content>
<!-- Main content -->
</SplitView.Content>
</SplitView>Reference: SplitView
Design and how-to: Split view control guide
A container control that hosts web content.
<WebView x:Name="webView1" Source="http://dev.windows.com"
Height="400" Width="800"/>Reference: WebView
Design and how-to: Guidelines for Web views
Sample code: XAML WebView control sample
A control that indicates progress by displaying a bar.
A progress bar that shows a specific value.
<ProgressBar x:Name="progressBar1" Value="50" Width="100"/>
A progress bar that shows indeterminate progress.
<ProgressBar x:Name="indeterminateProgressBar1" IsIndeterminate="True" Width="100"/>Reference: ProgressBar
Design and how-to: Progress controls guide
A control that indicates indeterminate progress by displaying a ring.
<ProgressRing x:Name="progressRing1" IsActive="True"/>Reference: ProgressRing
Design and how-to: Progress controls guide
A text input box that provides suggested text as the user types.
Reference: AutoSuggestBox
Design and how-to: Text controls, Auto suggest box control guide
Sample code: AutoSuggestBox migration sample
See Text box.
A control for entering passwords.
<PasswordBox x:Name="passwordBox1"
PasswordChanged="PasswordBox_PasswordChanged" />Reference: PasswordBox
Design and how-to: Text controls, Password box control guide
Sample code: XAML text display sample, XAML text editing sample
A control that lets a user edit rich text documents with content like formatted text, hyperlinks, and images.
<RichEditBox />Reference: RichEditBox
Design and how-to: Text controls, Rich edit box control guide
Sample code: XAML text sample
See Auto suggest box.
See Text box.
See Text block.
A control that displays text.
<TextBlock x:Name="textBlock1" Text="I am a TextBlock"/>Reference: TextBlock, RichTextBlock
Design and how-to: Text controls, Text block control guide, Rich text block control guide
Sample code: XAML text sample
A single-line or multi-line plain text field.
<TextBox x:Name="textBox1" Text="I am a TextBox"
TextChanged="TextBox_TextChanged"/>Reference: TextBox
Design and how-to: Text controls, Text box control guide
Sample code: XAML text sample
A control that a user can select or clear.
<CheckBox x:Name="checkbox1" Content="CheckBox"
Checked="CheckBox_Checked"/>Reference: CheckBox
Design and how-to: Check box control guide
A drop-down list of items a user can select from.
<ComboBox x:Name="comboBox1" Width="100"
SelectionChanged="ComboBox_SelectionChanged">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
</ComboBox>Reference: ComboBox
Design and how-to: Lists
A control that presents an inline list of items that the user can select from.
<ListBox x:Name="listBox1" Width="100"
SelectionChanged="ListBox_SelectionChanged">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
</ListBox>Reference: ListBox
Design and how-to: Lists
A control that allows a user to select a single option from a group of options. When radio buttons are grouped together, they are mutually exclusive.
<RadioButton x:Name="radioButton1" Content="RadioButton 1" GroupName="Group1"
Checked="RadioButton_Checked"/>
<RadioButton x:Name="radioButton2" Content="RadioButton 2" GroupName="Group1"
Checked="RadioButton_Checked" IsChecked="True"/>
<RadioButton x:Name="radioButton3" Content="RadioButton 3" GroupName="Group1"
Checked="RadioButton_Checked"/>Reference: RadioButton
Design and how-to: Radio button control guide
A control that lets the user select from a range of values by moving a Thumb control along a track.
<Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />Reference: Slider
Design and how-to: Slider control guide
A button that can be toggled between 2 states.
<ToggleButton x:Name="toggleButton1" Content="Button"
Checked="ToggleButton_Checked"/>Reference: ToggleButton
Design and how-to: Toggle control guide
A switch that can be toggled between 2 states.
<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch"
OnContent="On" OffContent="Off"
Toggled="ToggleSwitch_Toggled"/>Reference: ToggleSwitch
Design and how-to: Toggle control guide