Controls list (Windows Store apps using C#/VB/C++ and XAML)

Windows Store apps provide an extensive library of XAML 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 by downloading the XAML essential controls sample.

Here is an alphabetical list of the common controls for Windows Store apps using Extensible Application Markup Language (XAML). Click the control link to see the reference documentation for the control.

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

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

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

A

App bar

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

Adding app bars

XAML AppBar control sample

Audio

See Media element

B

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

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

Adding buttons

XAML essential controls sample

C

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

Check box

A control that a user can select or clear.

XAML

Copy

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

Reference: CheckBox

Adding checkboxes

XAML essential controls 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

Adding combo boxes and list boxes

XAML essential controls sample

Context menu

See Popup menu

F

Flex box

See Stack panel

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

Adding FlipView controls

XAML FlipView control sample

G

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

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

Adding ListView and GridView controls

XAML ListView and GridView essentials sample

XAML ListView and GridView customizing interactivity sample

XAML GridView grouping and SemanticZoom sample

H

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

Adding buttons

XAML essential controls sample

I

Image

A control that presents an image.

XAML

Copy

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

Reference: Image

Quickstart: Image and ImageBrush

XAML images sample

XAML essential controls sample

Items control

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

XAML

Copy

<ItemsControl/>

Reference: ItemsControl

L

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

Adding combo boxes and list boxes

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

Adding ListView and GridView controls

XAML ListView and GridView essentials sample

XAML ListView and GridView customizing interactivity sample

M

Media element

A control that plays audio and video content.

XAML

Copy

<MediaElement/>

Reference: MediaElement

XAML media playback sample

Multi-line text box

See Text box.

P

Panning scroll viewer

See Scroll viewer

Password box

A control for entering passwords.

XAML

Copy

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

Reference: PasswordBox

XAML text display sample

XAML text editing sample

Popup menu

Custom menu presenting commands that you specify.

Reference: PopupMenu

XAML essential controls sample

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

Adding progress controls

XAML essential controls sample

Progress ring

A control that indicates indeterminate progress by displaying a ring.

XAML

Copy

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

Reference: ProgressRing

Adding progress controls

XAML essential controls sample

Push button

See Button

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.

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

Adding radio buttons

XAML essential controls 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

Adding buttons

S

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

XAML scrolling, panning and zooming 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

Adding SemanticZoom controls

XAML GridView grouping and SemanticZoom sample

Shapes

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

XAML

Copy

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

Reference: Shapes

Quickstart: Drawing shapes

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.

XAML

Copy

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

Reference: Slider

Adding sliders

XAML essential controls 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

Static text/paragraph

See Text block.

T

Text block

A control that displays text.

XAML

Copy

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

Reference: TextBlock, RichTextBlock

Quickstart: Displaying text

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

Quickstart: Adding text input and editing controls

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

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

Adding toggle switches

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

XAML essential controls sample

V

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

Video

See Media element

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

W

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

XAML WebView control sample

Z

Zooming scroll viewer

See Scroll viewer.

Related topics

Roadmap for Windows Store apps using C# or Visual Basic

Roadmap for Windows Store apps using C++

Build date: 11/29/2012