Controls by function (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 a list of the common controls by function for Windows Store apps using Extensible Application Markup Language (XAML).

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

Appbars and commands

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

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

Adding buttons

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

Adding 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

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

Adding FlipView controls

XAML FlipView control 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

Adding ListView and GridView controls

XAML ListView and GridView essentials sample

XAML ListView and GridView customizing interactivity sample

XAML GridView grouping and SemanticZoom sample

Items control

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

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

Adding ListView and GridView controls

XAML ListView and GridView essentials sample

XAML ListView and GridView customizing interactivity 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

Flyouts

Context menu

See Popup menu.

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

XAML essential controls sample

Images

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

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

Quickstart: Drawing shapes

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

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

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

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.

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

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

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

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

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

XAML media playback sample

Video

See Media element.

Navigation

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

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

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

Text controls

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

XAML text display sample

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

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

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

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

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

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

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

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

Related topics

Roadmap for Windows Store apps using C# or Visual Basic

Roadmap for Windows Store apps using C++

Build date: 11/29/2012