Language: HTML | XAML

Controls by function (XAML)

Applies to Windows and Windows Phone

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:

Appbars and commands

App bar (Windows only)

A toolbar for displaying application-specific commands.

Bottom app bar control

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


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

A standard button and a styled button

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

Hyperlink button

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

A repeat button control

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

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

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.

Grid view control

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


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


<ItemsControl/>

Reference: ItemsControl

List view

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

List view control

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

Semantic zoom control


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

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

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.

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

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.

Tool tip control

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

Image control

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

A polygonA path

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

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

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.

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

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.

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

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.


<ScrollBar/>

Reference: ScrollBar

Scroll viewer

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

Scroll viewer control

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

Stack panel layout control

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

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

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.

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

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.


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


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



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

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

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.

Progress ring control

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

Password box control

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


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

Search box control

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

Text block control

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

Text box control

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

The 3 states of a check box

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

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

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.

Date picker control

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

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

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.

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

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.

Slider control

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

TimePicker control

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

A toggle button control

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

Toggle switch control

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

 

 

Show:
© 2014 Microsoft