Controls by function

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.

Appbars and commands

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.

App bar button icons

Reference: AppBarButton, SymbolIcon, BitmapIcon, FontIcon, PathIcon

Design and how-to: App bar and command bar control guide

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

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 and how-to: App bar and command bar control guide

Sample code: XAML Commanding sample

Buttons

Button

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

A standard button

<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.

Hyperlink button

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

Reference: HyperlinkButton

Design and how-to: Hyperlinks control guide

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 and how-to: Buttons control guide

Collection/data controls

Flip view

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

Grid view

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

Items control

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

<ItemsControl/>

Reference: ItemsControl

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 and how-to: Lists

Sample code: ListView sample

Date and time controls

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 and how-to: Calendar, date, and time controls

Calendar view

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

Date picker

A control that lets a user select a date.

Date picker control

<DatePicker Header="Arrival Date"/>

Reference: DatePicker

Design and how-to: Calendar, date, and time controls

Time picker

A control that lets a user set a time value.

TimePicker control

<TimePicker Header="Arrival Time"/>

Reference: TimePicker

Design and how-to: Calendar, date, and time controls

Flyouts

Context menu

See Menu flyout and Popup menu.

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 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.

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 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

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 and how-to: Guidelines for tooltips

Images

Image

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

Graphics and ink

InkCanvas

A control that receives and displays ink strokes.

<InkCanvas/>

Reference: InkCanvas

Shapes

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

A polygon A path

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

Reference: Shapes

How to: Drawing shapes

Sample code: XAML vector-based drawing sample

Layout controls

Border

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

A border around 2 rectangles

<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

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

Reference: Canvas

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

Reference: Grid

Panning scroll viewer

See Scroll viewer.

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

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 and how-to: Scroll and panning controls guide

Sample code: XAML scrolling, panning and zooming sample

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="Orange"/>
</StackPanel>

Reference: StackPanel

VariableSizedWrapGrid

A layout panel that supports the arranging of 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="Orange" Height="80" Width="80" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

Reference: VariableSizedWrapGrid

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

Zooming scroll viewer

See Scroll viewer.

Media controls

Audio

See Media element.

Media element

A control that plays audio and video content.

<MediaElement x:Name="myMediaElement"/>

Reference: MediaElement

Design and how-to: Media element control guide

MediaTransportControls

A control that provides playback controls for a MediaElement.

Media element with transport controls

<MediaTransportControls MediaElement="myMediaElement"/>

Reference: MediaTransportControls

Design and how-to: Media element control guide

Sample code: Media Transport Controls sample

Video

See Media element.

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 and how-to: Hub control guide

Sample code:XAML Hub control 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 and how-to: Tabs and pivot control guide

Sample code: Pivot sample

Semantic zoom

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

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 and how-to: Split view control guide

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 and how-to: Guidelines for Web views

Sample code: XAML WebView control sample

Progress controls

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 and how-to: Progress controls guide

Progress ring

A control that indicates indeterminate progress by displaying a ring.

Progress ring control

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

Reference: ProgressRing

Design and how-to: Progress controls guide

Text controls

Auto suggest box

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

An auto suggest box for search

Reference: AutoSuggestBox

Design and how-to: Text controls, Auto suggest box control guide

Sample code: AutoSuggestBox migration sample

Multi-line text box

See Text box.

Password box

A control for entering passwords.

A password box

<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

Rich edit box

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.

Single-line text box

See Text box.

Static text/paragraph

See Text block.

Text block

A control that displays text.

Text block control

<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

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

Design and how-to: Text controls, Text box control guide

Sample code: XAML text sample

Selection controls

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 and how-to: Check box control guide

Combo box

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

Open combo box

<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

List box

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

List box control

<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

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 and how-to: Radio button control guide

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 and how-to: Slider control guide

Toggle button

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

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 and how-to: Toggle control guide