Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Controls list

[ Updated for UWP apps on Windows 10. For Windows 8.x articles, see the archive ]

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 an alphabetical list of the common XAML controls you can use in your app. To see a list of controls by use, see Controls by function.

A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

New for Windows 10

A

App bar

A toolbar for displaying application-specific commands. See Command bar.

Reference: AppBar

App bar button

A button for showing commands using app bar styling.

A standard button and a styled button

Reference: AppBarButton, SymbolIcon, BitmapIcon, FontIcon, PathIcon

Design: Guidelines for back buttons

Sample code: XAML Commanding sample

App bar separator

Visually separates groups of commands in a command bar.

Reference: AppBarSeparator

Sample code: XAML Commanding sample

App bar toggle button

A button for toggling commands in a command bar.

Reference: AppBarToggleButton

Sample code: XAML Commanding sample

Audio

See Media element.

Auto suggest box

A text input box that provides suggested text as the user types.

An auto suggest box for search

Reference: AutoSuggestBox

Sample code: AutoSuggestBox migration sample

B

Border

A container control that draws a border, background, or both, around another object.

A border around 2 rectangles

<Border BorderBrush="Gray" BorderThickness="4" 
        Height="108" Width="64">
    <StackPanel>
        <Rectangle Fill="Yellow"/>
        <Rectangle Fill="Green"/>
    </StackPanel>
</Border>

Reference: Border

Button

A control that responds to user input and raises a Click event.

A standard button and a styled button


<Button x:Name="button1" Content="Button" 
        Click="Button_Click" />

Reference: Button

Design: Guidelines for buttons

C

Calendar date picker

A control that lets a user select a date using a drop-down calendar display.

A calendar date picker with open calendar view

<CalendarDatePicker/>

Reference: CalendarDatePicker

Design: Guidelines for date and time controls

Calendar view

A configurable calendar display that lets a user select single or multiple dates.


<CalendarView/>

Reference: CalendarView

Design: Guidelines for date and time controls

Canvas

A layout panel that supports the absolute positioning of child elements relative to the top left corner of the canvas.

Canvas layout panel

<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="Yellow" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>

Reference: Canvas

Check box

A control that a user can select or clear.

The 3 states of a check box

<CheckBox x:Name="checkbox1" Content="CheckBox" 
          Checked="CheckBox_Checked"/>

Reference: CheckBox

Design: Guidelines for check boxes

Combo box

A drop-down list of items a user can select from.

Open combo box

<ComboBox x:Name="comboBox1" SelectionChanged="ComboBox_SelectionChanged" Width="100">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ComboBox>

Reference: ComboBox

Design: Guidelines for drop-down lists

Command bar

A specialized app bar that handles the resizing of app bar button elements.

Command bar control

    <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: Guidelines for command bars

Sample code: XAML Commanding sample

Content dialog

A dialog box that you can customize to contain any XAML content.

Reference: ContentDialog

Design: Guidelines for dialog controls

Context menu

See Menu flyout and Popup menu.

D

Date picker

A control that lets a user select a date.

Date picker control

<DatePicker Header="Arrival Date"/>

Reference: DatePicker

How to: Quickstart: Adding a DatePicker

Design: Guidelines for date and time controls

F

Flip view

A control that presents a collection of items that the user can flip through, one item at a time.

Flip view control

<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: Guidelines for flip view controls

Flyout

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 control

<Flyout>
    <StackPanel>
        <TextBlock>All items will be permanently removed from your cart.</TextBlock>
        <Button Click="DeleteConfirmation_Click">Empty my cart</Button>
    </StackPanel>
</Flyout>


Reference: Flyout

Design: Guidelines for flyouts

G

Grid

A layout panel that supports the arranging of child elements in rows and columns.

Grid layout panel

<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="Yellow" Grid.Row="1" Grid.Column="1"/>
</Grid>

Reference: Grid

Grid view

A control that presents a collection of items in rows and columns that can scroll horizontally.


<GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</GridView>

Reference: GridView

Design: Guidelines for list view and grid view

Sample code: ListView sample

H

Hub

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: Guidelines for the hub control

Sample code: XAML Hub control sample

Hyperlink

See Hyperlink button.

Hyperlink button

A button that appears as marked up text, typically used inline within text blocks.

Hyperlink button

<HyperlinkButton Content="www.microsoft.com" NavigateUri="http://www.microsoft.com"/>

Reference: HyperlinkButton

Design: Guidelines for hyperlinks

I

Image

A control that presents an image.

Image control

<Image Source="Assets/Logo.png" />

Reference: Image

How to: Image and ImageBrush

Sample code: XAML images sample

InkCanvas

A control that receives and displays ink strokes.


<InkCanvas/>

Reference: InkCanvas

Items control

A control that presents a collection of items in a UI specified by a data template.


<ItemsControl/>

Reference: ItemsControl

L

List box

A control that presents an inline list of items that the user can select from.

List box control

<ListBox x:Name="listBox1" SelectionChanged="ListBox_SelectionChanged" Width="100">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ListBox>

Reference: ListBox

Design: Guidelines for list boxes

List view

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: Guidelines for list view and grid view

Sample code: ListView sample

M

Map control(Windows Phone only)

A control that displays a map.

Reference: MapControl

Design: Guidelines for maps

Media element

A control that plays audio and video content.


<MediaElement x:Name="myMediaElement"/>

Reference: MediaElement

Design: Guidelines for the media player

MediaTransportControls

A control that provides playback controls for a MediaElement.

Media element with transport controls

<MediaTransportControls MediaElement="myMediaElement"/>

Reference: MediaTransportControls

Design: Guidelines for the media player

Sample code: Media Transport Controls sample

Menu flyout

Temporarily displays a list of commands or options related to what the user is currently doing.

Menu flyout control

<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: Guidelines for context menus

Sample code: XAML Context Menu sample

Multi-line text box

See Text box.

P

Panning scroll viewer

See Scroll viewer.

Password box

A control for entering passwords.

Password box control

<PasswordBox x:Name="passwordBox1" PasswordChanged="PasswordBox_PasswordChanged" />

Reference: PasswordBox

How to: PasswordBox control guide

Design: Guidelines for password boxes

Sample code: XAML text display sample, XAML text editing sample

Pivot

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: Guidelines for tabs and pivots

Sample code: Pivot sample

Popup menu

A custom menu that presents commands that you specify.

Reference: PopupMenu

Design: Guidelines for context menus

Progress bar

A control that indicates progress by displaying a bar.

Progress bar control

A progress bar that shows a specific value.


<ProgressBar x:Name="progressBar1" Value="50" Width="100"/>

Indeterminate progress bar control

A progress bar that shows indeterminate progress.


<ProgressBar x:Name="indeterminateProgressBar1" IsIndeterminate="True" Width="100"/>

Reference: ProgressBar

Design: Guidelines for progress controls

Progress ring

A control that indicates indeterminate progress by displaying a ring.

Progress ring control

<ProgressRing x:Name="progressRing1" IsActive="True"/>

Reference: ProgressRing

Design: Guidelines for progress controls

R

Radio button

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.

Radio button controls

<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: Guidelines for radio buttons

RelativePanel

A panel that lets you position and align child objects in relation to each other or the parent panel.

Relative panel layout panel

<RelativePanel>
    <TextBox x:Name="textBox1" RelativePanel.AlignLeftWithPanel="True"/>
    <Button Content="Submit" RelativePanel.Below="textBox1"/>
</RelativePanel>

Reference: RelativePanel

Repeat button

A button that raises its Click event repeatedly from the time it's pressed until it's released.

A repeat button control

<RepeatButton x:Name="repeatButton1" Content="Repeat Button" 
              Click="RepeatButton_Click" />

Reference: RepeatButton

Design: Guidelines for buttons

Rich edit box

A control that lets a user edit rich text documents with content like formatted text, hyperlinks, and images.


<RichEditBox />

Reference: RichEditBox

How to: RichEditBox control guide

Design: Guidelines for text and text input, Guidelines for spell checking

Sample code: XAML text sample

S

Scroll bar

See scroll viewer. (ScrollBar is an element of ScrollViewer. You don't typically use it as a stand-alone control.)

Reference: ScrollBar

Scroll viewer

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: Guidelines for scroll bars

Sample code: XAML scrolling, panning and zooming sample

Search box

See Auto suggest box.

Semantic zoom

A container control that lets the user zoom between two views of a collection of items.

Semantic zoom control


<SemanticZoom>
    <ZoomedInView>
        <GridView></GridView>
    </ZoomedInView>
    <ZoomedOutView>
        <GridView></GridView>
    </ZoomedOutView>
</SemanticZoom>

Reference: SemanticZoom

Design: Guidelines for semantic zoom

Sample code: XAML GridView grouping and SemanticZoom sample

Shapes

Various retained mode graphical objects that can be presented like ellipses, rectangles, lines, Bezier paths, etc.

A polygonA path

<Ellipse/>
<Path/>
<Rectangle/>

Reference: Shapes

How to: Drawing shapes

Sample code: XAML vector-based drawing sample

Single-line text box

A single-line plain text field. See Text box.

Slider

A control that lets the user select from a range of values by moving a Thumb control along a track.

Slider control

<Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />

Reference: Slider

Design: Guidelines for sliders

SplitView

A container control with two views; one view for the main content and another view that is typically used for a navigation menu.

Split view control

<SplitView>
    <SplitView.Pane>
        <!-- Menu content -->
    </SplitView.Pane>
    <SplitView.Content>
        <!-- Main content -->
    </SplitView.Content>
</SplitView>

Reference: SplitView

Design: Guidelines for the split view control

Stack panel

A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.

Stack panel layout control

<StackPanel>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue"/>
    <Rectangle Fill="Green"/>
    <Rectangle Fill="Yellow"/>
</StackPanel>

Reference: StackPanel

T

Text block

A control that displays text.

Text block control

<TextBlock x:Name="textBlock1" Text="I am a TextBlock"/>

Reference: TextBlock, RichTextBlock

How to: TextBlock control guide

Design: Guidelines for text and text input

Sample code: XAML text sample

Text box

A single-line or multi-line plain text field.

Text box control

<TextBox x:Name="textBox1" Text="I am a TextBox" 
         TextChanged="TextBox_TextChanged"/>

Reference: TextBox

How to: TextBox control guide

Design: Guidelines for text input, Text input spell check

Sample code: XAML text sample

Time picker

A control that lets a user set a time value.

TimePicker control

<TimePicker Header="Arrival Time"/>

Reference: TimePicker

Design: Guidelines for date and time controls

Toggle button

A button that can be toggled between 2 states.

A toggle button control

<ToggleButton x:Name="toggleButton1" Content="Button" 
              Checked="ToggleButton_Checked"/>

Reference: ToggleButton

Toggle switch

A switch that can be toggled between 2 states.

Toggle switch control

<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch" 
              OnContent="On" OffContent="Off" 
              Toggled="ToggleSwitch_Toggled"/>

Reference: ToggleSwitch

Design: Guidelines for toggle switch controls

Tooltip

A pop-up window that displays information for an element.

Tool tip control

<Button Content="Button" Click="Button_Click" 
        ToolTipService.ToolTip="Click to perform action" />

Reference: ToolTip, ToolTipService

Design: Guidelines for tooltips

V

VariableSizedWrapGrid

A layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.

Variable sized wrap grid layout panel

<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="Yellow" Height="80" Width="80" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

Reference: VariableSizedWrapGrid

Video

See Media element.

Viewbox

A container control that scales its content to a specified size.

Viewbox control

<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

W

Web view

A container control that hosts web content.


<WebView x:Name="webView1" Source="http://dev.windows.com" 
         Height="400" Width="800"/>


Reference: WebView

Design: Guidelines for Web views

Sample code: XAML WebView control sample

Z

Zooming scroll viewer

See Scroll viewer.

Note  

This article is for Windows 10 developers writing Universal Windows Platform (UWP) apps. If you’re developing for Windows 8.x or Windows Phone 8.x, see the archived documentation.

 

Related topics

Controls by function
XAML UI Basics sample

 

 

Show: