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.<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.<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.<HyperlinkButton Content="www.microsoft.com" NavigateUri="https://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.<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.<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.<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.<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.<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> <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.<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
Tooltip
A pop-up window that displays information for an element.<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 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.<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.<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 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> <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.<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.<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.<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 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="https://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.A progress bar that shows a specific value.
<ProgressBar x:Name="progressBar1" Value="50" Width="100"/>
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.<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.<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.<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.<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.<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.<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.<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.<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.<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.<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 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 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.<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.<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