Controls list (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 an alphabetical list of the common XAML controls you can use in your app. To see the controls grouped by function, see Controls by function.

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:

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

  • Audio
    See Media element

  • Auto suggest box (Windows Phone only)
    A text input box that provides suggested text as the user types.

    Reference: AutoSuggestBox

B

C

D

F

G

H

I

L

M

P

R

S

T

V

  • 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

  • Video
    See Media element

  • 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

W

  • 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

Z

  • Zooming scroll viewer
    See Scroll viewer.

Controls by function

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++