Controls by function (XAML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

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 Controls and layout gallery sample and the XAML essential controls sample.

Here's a list by function of the common XAML controls you can use in your app. To see an alphabetical list of controls, see Controls list.

You can use most controls in your app UIs for both phone and PC . These controls typically have a similar look, but in some cases, they look different on the phone and PC. Other controls are available only for phone apps, or only for PC apps.

Roadmap: How does this topic relate to others? See:

• Roadmap for Windows Runtime apps using C# or Visual Basic
• Roadmap for Windows Runtime apps using C++

Appbars and commands

App bar (Windows only)

A toolbar for displaying application-specific commands.

XAML

Copy

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

Reference: AppBar

How to: Adding app bars

Design: Top app bar, Bottom app bar

Sample code: XAML AppBar control sample, Controls and layout gallery sample

App bar button

A button for showing commands using app bar styling.

Reference: AppBarButton

Design: Back button, Bottom app bar

App bar separator (Windows only)

Visually separates groups of commands in an app bar.

Reference: AppBarSeparator

App bar toggle button

A button for toggling commands using app bar styling.

Reference: AppBarToggleButton

Command bar

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

XAML

Copy

    <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

How to: Adding app bars

Design: Bottom app bar

Sample code: XAML AppBar control sample, Controls and layout gallery sample

Buttons

Button

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

XAML

Copy

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

Reference: Button

How to: Adding buttons

Design: Button

Sample code: XAML essential controls sample, Controls and layout gallery sample

Hyperlink

See Hyperlink button.

Hyperlink button

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

XAML

Copy

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

Reference: HyperlinkButton

How to: Adding buttons

Design: Hyperlink

Sample code: XAML essential controls sample, Controls and layout gallery sample

Repeat button

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

XAML

Copy

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

Reference: RepeatButton

How to: Adding buttons

Sample code: Controls and layout gallery sample

Push button

See Button.

Collection/data controls

Flip view

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

XAML

Copy

<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

How to: Adding FlipView controls

Design: Flip view

Sample code: XAML FlipView control sample, Controls and layout gallery sample

Grid view

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

XAML

Copy

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

Reference: GridView

How to: Adding ListView and GridView controls

Design: Grid view and list view

Sample code: XAML ListView and GridView essentials sample, XAML ListView and GridView customizing interactivity sample, XAML GridView grouping and SemanticZoom sample, Controls and layout gallery sample

Hub

A container control that lets the user view and navigate to different sections of content.

XAML

Copy

<Hub>
    <HubSection>
        <!--- hub section content -->
				</HubSection>
    <HubSection>
        <!--- hub section content -->
				</HubSection>
</Hub>

Reference: Hub

How to: Quickstart: Using a Hub

Design: Hub

Sample code: XAML Hub control sample, Controls and layout gallery sample

Items control

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

XAML

Copy

<ItemsControl/>

Reference: ItemsControl

List view

A control that presents a collection of items in a list that can scroll vertically.

XAML

Copy

<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>

Reference: ListView

How to: Adding ListView and GridView controls

Design: Grid view and list view

Sample code: XAML ListView and GridView essentials sample, XAML ListView and GridView customizing interactivity sample, Controls and layout gallery sample

Semantic zoom

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

XAML

Copy

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

Reference: SemanticZoom

How to: Adding SemanticZoom controls

Design: Semantic zoom, Uniquely Windows: Semantic zoom

Sample code: XAML GridView grouping and SemanticZoom sample, Controls and layout gallery sample

Flyouts

Context menu

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

XAML

Copy

<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

How to: Quickstart: Adding a Flyout

Design: Flyout

Sample code: XAML Flyout and MenuFlyout sample, Controls and layout gallery sample

Menu flyout

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

XAML

Copy

<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

How to: Quickstart: Adding a MenuFlyout

Sample code: XAML Flyout and MenuFlyout sample, Controls and layout gallery sample

Popup menu

Custom menu presenting commands that you specify.

Reference: PopupMenu

XAML essential controls sample

Tooltip

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

XAML

Copy

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

Reference: ToolTip, ToolTipService

How to: Adding tooltips

Design: Tooltip

Sample code: XAML essential controls sample, Controls and layout gallery sample

Images

Image

A control that presents an image.

XAML

Copy

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

Reference: Image

How to: Quickstart: Image and ImageBrush

Sample code: XAML images sample, XAML essential controls sample, Controls and layout gallery sample

Graphics

Shapes

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

XAML

Copy

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

Reference: Shapes

How to: Quickstart: 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.

XAML

Copy

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

Reference: Border

Sample code: Controls and layout gallery sample

Canvas

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

XAML

Copy

<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

How to: Quickstart: Adding layout controls

Sample code: Controls and layout gallery sample

Flex box

See Stack panel.

Grid

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

XAML

Copy

<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

How to: Quickstart: Adding layout controls

Sample code: Controls and layout gallery sample

Panning scroll viewer

See Scroll viewer.

Scroll bar

A control that provides a scroll bar that has a sliding Thumb whose position corresponds to a value.

XAML

Copy

<ScrollBar/>

Reference: ScrollBar

Scroll viewer

A container control that lets the user pan and zoom its content.

XAML

Copy

<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: Scroll viewer

Sample code: XAML scrolling, panning and zooming sample, Controls and layout gallery sample

Stack panel

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

XAML

Copy

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

Reference: StackPanel

How to: Quickstart: Adding layout controls

Sample code: Controls and layout gallery sample

VariableSizedWrapGrid

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

XAML

Copy

<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

How to: Quickstart: Adding layout controls

Sample code: Controls and layout gallery sample

Viewbox

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

XAML

Copy

<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

Sample code: Controls and layout gallery sample

Zooming scroll viewer

See Scroll viewer.

Media controls

Audio

See Media element.

Media element

A control that plays audio and video content.

XAML

Copy

<MediaElement/>

Reference: MediaElement

Design: Audio-aware apps

Sample code: XAML media playback sample

Video

See Media element.

Navigation

Pivot (Windows Phone only)

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.

Reference: Pivot

Design: Pivot

Web view

A container control that hosts web content.

XAML

Copy

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

XAML

Copy

<Rectangle Height="400" Width="800">
    <Rectangle.Fill>
        <WebViewBrush SourceName="webView1"/>
    </Rectangle.Fill>
</Rectangle>

Reference: WebView, WebViewBrush

Design: Web view

Sample code: XAML WebView control sample

Progress controls

Progress bar

A control that indicates progress by displaying a bar.

A progress bar that shows a specific value.

XAML

Copy

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

A progress bar that shows indeterminate progress.

XAML

Copy

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

Reference: ProgressBar

How to: Adding progress controls

Design: Progress bar and progress ring

Sample code: XAML essential controls sample, Controls and layout gallery sample

Progress ring

A control that indicates indeterminate progress by displaying a ring.

XAML

Copy

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

Reference: ProgressRing

How to: Adding progress controls

Design: Progress bar and progress ring

Sample code: XAML essential controls sample, Controls and layout gallery sample

Text controls

Auto suggest box (Windows Phone only)

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

Reference: AutoSuggestBox

Multi-line text box

See Text box.

Password box

A control for entering passwords.

XAML

Copy

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

Reference: PasswordBox

How to: Quickstart: Adding text input and editing controls

Design: Password box

Sample code: XAML text display sample, XAML text editing sample, Controls and layout gallery sample

Rich edit box

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

XAML

Copy

<RichEditBox />

Reference: RichEditBox

How to: Quickstart: Adding text input and editing controls

Design: Text input spell check

Sample code: XAML text sample, Controls and layout gallery sample

Search box (Windows only)

A control that lets a user enter search queries.

XAML

Copy

<SearchBox />

Reference: SearchBox

How to: Adding search

Design: Search box

Sample code: SearchBox control sample, Controls and layout gallery sample

Single-line text box

See Text box.

Static text/paragraph

See Text block.

Text block

A control that displays text.

XAML

Copy

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

Reference: TextBlock, RichTextBlock

How to: Quickstart: Displaying text

Design: Type

Sample code: XAML text sample, Controls and layout gallery sample

Text box

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

XAML

Copy

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

Reference: TextBox

How to: Quickstart: Adding text input and editing controls

Design: Text input box, Text input spell check

Sample code: XAML text sample, Controls and layout gallery sample

Selection controls

Check box

A control that a user can select or clear.

XAML

Copy

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

Reference: CheckBox

How to: Adding checkboxes

Design: Checkbox

Sample code: XAML essential controls sample, Controls and layout gallery sample

Combo box

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

XAML

Copy

<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

How to: Adding combo boxes and list boxes

Design: Drop-down list

Sample code: XAML essential controls sample, Controls and layout gallery sample

Date picker

A control that lets a user select a date.

XAML

Copy

<DatePicker Header="Arrival Date"/>

Reference: DatePicker

How to: Quickstart: Adding a DatePicker

Design: Date picker

Sample code: XAML DatePicker and TimePicker controls sample, Controls and layout gallery sample

List box

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

XAML

Copy

<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

How to: Adding combo boxes and list boxes

Design: List box

Sample code: XAML essential controls sample, Controls and layout gallery sample

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.

XAML

Copy

<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

How to: Adding radio buttons

Design: Radio button

Sample code: XAML essential controls sample, Controls and layout gallery sample

Slider

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

XAML

Copy

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

Reference: Slider

How to: Adding sliders

Design: Slider

Sample code: XAML essential controls sample

Time picker

A control that lets a user set a time value.

XAML

Copy

<TimePicker Header="Arrival Time"/>

Reference: TimePicker

How to: Quickstart: Adding a TimePicker

Design: Time picker

Sample code: XAML DatePicker and TimePicker controls sample, Controls and layout gallery sample

Toggle button

A button that can be toggled between 2 states.

XAML

Copy

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

Reference: ToggleButton

How to: Adding buttons

Toggle switch

A switch that can be toggled between 2 states.

XAML

Copy

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

Reference: ToggleSwitch

How to: Adding toggle switches

Design: Toggle switch

Sample code: XAML essential controls sample, Controls and layout gallery sample

Related topics

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++