Dela via

Controls by function (XAML)

  • Artikel

[ 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:

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

Collection/data controls

Flyouts

Images

Graphics

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

  • 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

Text controls

Selection controls

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++