控件列表 (XAML)

面向 Windows 的 XAML UI 框架提供丰富的控件库，这些控件可支持 UI 开发。这些控件中的一部分具有直观的表示；其他功能作为其他控件或内容（如图像和媒体）的容器。你可以通过下载控件和布局库示例以及 XAML 基本控件示例在操作中查看许多 Windows UI 控件。

下面是可在应用中使用的常见 XAML 控件的列表，按字母排序。要查看按功能分组的控件，请参阅按功能列出控件。

你可以将应用 UI 中的大部分控件用于手机和电脑。这些控件通常有相似的外观，但在某些情况下，它们在手机和电脑上的外观不同。其他控件仅适用于手机应用，或仅适用于电脑应用。

XAML

 

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

参考：AppBar

方法：添加应用栏

设计：顶部应用栏、底部应用栏

示例代码：XAML AppBar 控件示例、控件和布局库示例

应用栏按钮

使用应用栏样式显示命令的按钮。

参考：AppBarButton

设计：后退按钮、底部应用栏

应用栏分隔符（仅限 Windows）

在视觉上分隔应用栏中的命令组。

参考：AppBarSeparator

应用栏切换按钮

使用应用栏样式的切换命令的按钮。

参考：AppBarToggleButton

音频

请参阅媒体元素

自动建议框（仅限 Windows Phone）

在用户键入时提供建议文本的文本输入框。

参考：AutoSuggestBox

B

 

边框

绘制另一对象周围的边框、背景或二者的容器控件。

XAML

 

<Border BorderBrush="Gray" BorderThickness="4" 
        Height="108" Width="64">
    <StackPanel>
        <Rectangle Fill="Yellow"/>
        <Rectangle Fill="Green"/>
    </StackPanel>
</Border>

参考：Border

示例代码：控件和布局库示例

按钮

响应用户输入和引发 Click 事件的控件。

XAML

 

<Button x:Name="button1" Content="Button" 
        Click="Button_Click" />

参考：Button

方法：添加按钮

设计：按钮

示例代码：XAML 基本控件示例、控件和布局库示例

C

 

画布

支持相对于画布左上角的子元素的绝对位置的布局面板。

XAML

 

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

参考：Canvas

方法：快速入门：添加布局控件

示例代码：控件和布局库示例

复选框

用户可以选中或清除的一种控件。

XAML

 

<CheckBox x:Name="checkbox1" Content="CheckBox" 
          Checked="CheckBox_Checked"/>

参考：CheckBox

方法：添加复选框

设计：复选框

示例代码：XAML 基本控件示例、控件和布局库示例

 

组合框

用户可以从中进行选择的项目下拉列表。

XAML

 

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

参考：ComboBox

方法：添加组合框和列表框

设计：下拉列表

示例代码：XAML 基本控件示例、控件和布局库示例

命令栏

一个特殊的应用栏，用于调整应用栏按钮元素的大小。

XAML

 

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

参考：CommandBar

方法：添加应用栏

设计：底部应用栏

示例代码：XAML AppBar 控件示例、控件和布局库示例

内容对话（仅限 Windows Phone）

可自定义以包含任何 XAML 内容的对话框。

参考：ContentDialog

上下文菜单

请参阅弹出菜单

D

 

日期选取器

使用户可以选择日期的控件。

XAML

 

<DatePicker Header="Arrival Date"/>

参考：DatePicker

方法：快速入门：添加 DatePicker

设计：日期选取器

示例代码：XAML DatePicker 和 TimePicker 控件示例、控件和布局库示例

日期选取器浮出控件（仅限 Windows Phone）

使用户可以选择日期的浮出控件。

参考：DatePickerFlyout

F

 

弹性框

请参阅堆叠面板

翻转视图

显示用户可逐一浏览的项目集合的控件。

XAML

 

<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>

参考：FlipView

方法：添加 FlipView 控件

设计：翻转视图

示例代码：XAML FlipView 控件示例、控件和布局库示例

浮出控件

显示要求用户交互的消息。（与对话框不同，浮出控件不创建一个单独的窗口，而且不阻止其他用户交互。）

XAML

 

<Flyout>
    <StackPanel>
        <TextBlock>All items will be permanently removed from your cart.</TextBlock>
        <Button Click="DeleteConfirmation_Click">Empty my cart</Button>
    </StackPanel>
</Flyout>

参考：Flyout

方法：快速入门：添加浮出控件

设计：浮出控件

示例代码：XAML Flyout 和 MenuFlyout 示例、控件和布局库示例

G

 

网格

支持以行和列排列子元素的布局面板。

XAML

 

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

参考：Grid

方法：快速入门：添加布局控件

示例代码：控件和布局库示例

网格视图

显示可在行和列中水平滚动的项目集合的控件。

XAML

 

<GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</GridView>

参考：GridView

方法：添加 ListView 和 GridView 控件

设计：网格视图和列表视图

示例代码：XAML ListView 和 GridView 基本示例、XAML ListView 和 GridView 自定义交互性示例、XAML GridView 分组和 SemanticZoom 示例、控件和布局库示例

H

 

集线器

一个容器控件，使用户可以查看并导航至内容的不同部分。

XAML

 

<Hub>
    <HubSection>
        <!--- hub section content -->
				</HubSection>
    <HubSection>
        <!--- hub section content -->
				</HubSection>
</Hub>

参考：Hub

方法：快速入门：使用中心

设计：中心

示例代码：XAML Hub 控件示例、控件和布局库示例

超链接

请参阅“超链接按钮”

“超链接”按钮

类似于标记文本的按钮，通常嵌入在文本块中使用。

XAML

 

<HyperlinkButton Content="www.microsoft.com" NavigateUri="http://www.microsoft.com"/>

参考：HyperlinkButton

方法：添加按钮

设计：超链接

示例代码：XAML 基本控件示例、控件和布局库示例

I

 

图像

显示图像的控件。

XAML

 

<Image Source="Assets/Logo.png" />

参考：Image

方法：快速入门：图像和 ImageBrush

示例代码：XAML 图像示例、XAML 基本控件示例、控件和布局库示例

项目控件

显示数据模板所指定 UI 中项目集合的控件。

XAML

 

<ItemsControl/>

参考：ItemsControl

 

L

 

列表框

显示用户可以从中进行选择的嵌入式项列表的控件。

XAML

 

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

参考：ListBox

方法：添加组合框和列表框

设计：列表框

示例代码：XAML 基本控件示例、控件和布局库示例

 

列表选取器浮出控件（仅限 Windows Phone）

显示用户可以从中进行选择的项目列表的浮出控件。

参考：ListPickerFlyout

列表视图

显示可在列表中垂直滚动的项目集合的控件。

XAML

 

<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>

参考：ListView

方法：添加 ListView 和 GridView 控件

设计：网格视图和列表视图

示例代码：XAML ListView 和 GridView 基本示例、XAML ListView 和 GridView 自定义交互性示例、控件和布局库示例

M

 

地图控件（仅限 Windows Phone）

显示地图的控件。

参考：MapControl

设计：地图

媒体元素

可播放音频和视频内容的控件。

XAML

 

<MediaElement/>

参考：MediaElement

设计：音频感知应用

示例代码：XAML 媒体播放示例

菜单浮出控件

临时显示与用户当前正在执行的操作相关的命令或选项的列表。

XAML

 

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

参考：MenuFlyout、MenuFlyoutItem、MenuFlyoutSeparator、ToggleMenuFlyoutItem

方法：快速入门：添加 MenuFlyout

示例代码：XAML Flyout 和 MenuFlyout 示例、控件和布局库示例

多行文本框

请参阅文本框。

P

 

平移滚动查看器

请参阅滚动查看器

“密码”框

用于输入密码的一种控件。

XAML

 

<PasswordBox x:Name="passwordBox1" IsPasswordRevealButtonEnabled="True" 
             PasswordChanged="PasswordBox_PasswordChanged" />

参考：PasswordBox

方法：快速入门：添加文本输入和编辑控件

设计：密码框

示例代码：XAML 文本显示示例、XAML 文本编辑示例、控件和布局库示例

选取器浮出控件（仅限 Windows Phone）

可用于创建自定义选取器的控件。

参考：PickerFlyout

透视（仅限 Windows Phone）

全屏的容器和导航模型，它还提供在不同的透视之间快速移动的方法（视图或筛选器），这些透视通常在同一组数据中。

参考：Pivot

设计：透视

弹出菜单

提供你指定的命令的自定义菜单。

参考：PopupMenu

设计：上下文菜单

示例代码：XAML 基本控件示例

进度条

通过显示一个长条来指示进度的控件。

显示特定值的进度条。

XAML

 

<ProgressBar x:Name="progressBar1" Value="50" Width="100"/>

显示不确定进度的进度条。

XAML

 

<ProgressBar x:Name="indeterminateProgressBar1" IsIndeterminate="True" Width="100"/>

参考：ProgressBar

方法：添加进度控件

设计：进度栏和进度环

示例代码：XAML 基本控件示例、控件和布局库示例

进度环

通过显示一个 环来指示不确定进度的控件。

XAML

 

<ProgressRing x:Name="progressRing1" IsActive="True"/>

参考：ProgressRing

方法：添加进度控件

设计：进度栏和进度环

示例代码：XAML 基本控件示例、控件和布局库示例

“推送”按钮

请参阅按钮

R

 

单选按钮

允许用户从一组选项中选择单个选项的控件。将单选按钮分组到一起时，它们互相排斥。

XAML

 

<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"/>

参考：RadioButton

方法：添加单选按钮

设计：单选按钮

示例代码：XAML 基本控件示例、控件和布局库示例

重复按钮

从按下到释放为止重复引发 Click 事件的一种按钮。

XAML

 

<RepeatButton x:Name="repeatButton1" Content="Repeat Button" 
              Click="RepeatButton_Click" />

参考：RepeatButton

方法：添加按钮

示例代码：控件和布局库示例

可编辑对话框

使用户可以编辑带有格式化文本、超链接和图像等内容的富文本文档的控件。

XAML

 

<RichEditBox />

参考：RichEditBox

方法：快速入门：添加文本输入和编辑控件

设计：文本输入拼写检查

示例代码：XAML 文本示例、控件和布局库示例

S

 

滚动条

提供具有滑动的 Thumb（其位置对应于一个值）的滚动条的一种控件。

XAML

 

<ScrollBar/>

参考：ScrollBar

滚动查看器

可让用户平移和缩放其内容的容器控件。

XAML

 

<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="10" 
              HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible"
              Height="200" Width="200">
    <Image Source="Assets/Logo.png" Height="400" Width="400"/>
</ScrollViewer>

参考：ScrollViewer

设计：滚动查看器

示例代码：XAML 滚动、平移以及缩放示例、控件和布局库示例

搜索框（仅限 Windows）

使用户可以输入搜索查询的控件。

XAML

 

<SearchBox />

参考：SearchBox

方法：添加搜索

设计：搜索框

示例代码：SearchBox 控件示例、控件和布局库示例

语义缩放

让用户在项目集合的两个视图之间缩放的容器控件。

XAML

 

<SemanticZoom>
    <ZoomedInView>
        <GridView></GridView>
    </ZoomedInView>
    <ZoomedOutView>
        <GridView></GridView>
    </ZoomedOutView>
</SemanticZoom>

参考：SemanticZoom

方法：添加语义式缩放控件

设计：语义式缩放、独特的 Windows：语义式缩放

示例代码：XAML GridView 分组和 SemanticZoom 示例、控件和布局库示例

形状

可以显示的各种保留模式图形对象，例如椭圆、矩形、直线、贝塞尔曲线等。

XAML

 

<Ellipse/>
<Path/>
<Rectangle/>

参考：Shapes

方法：快速入门：绘制形状

示例代码：基于 XAML 矢量的绘图示例

单行文本框

一个单行纯文本字段。请参阅文本框。

滑块

一种可让用户通过沿轨迹移动 Thumb 控件从一个值范围中进行选择的控件。

XAML

 

<Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />

参考：Slider

方法：添加滑块

设计：滑块

示例代码：XAML 基本控件示例

堆叠面板

可以将子元素按水平或垂直方向排列到单行中的布局面板。

XAML

 

<StackPanel>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue"/>
    <Rectangle Fill="Green"/>
    <Rectangle Fill="Yellow"/>
</StackPanel>

参考：StackPanel

方法：快速入门：添加布局控件

示例代码：控件和布局库示例

静态文本/段落

请参阅文本块。

T

 

文本块

显示文本的控件。

XAML

 

<TextBlock x:Name="textBlock1" Text="I am a TextBlock" />

参考：TextBlock、RichTextBlock

方法：快速入门：显示文本

设计：键入

示例代码：XAML 文本示例、控件和布局库示例

文本框

单行或多行纯文本字段。

XAML

 

<TextBox x:Name="textBox1" Text="I am a TextBox" 
         TextChanged="TextBox_TextChanged" />

参考：TextBox

方法：快速入门：添加文本输入和编辑控件

设计：文本输入框、文本输入拼写检查

示例代码：XAML 文本示例、控件和布局库示例

时间选取器

使用户可以设置时间值的控件。

XAML

 

<TimePicker Header="Arrival Time"/>

参考：TimePicker

方法：快速入门：添加 TimePicker

设计：时间选取器

示例代码：XAML DatePicker 和 TimePicker 控件示例、控件和布局库示例

时间选取器浮出控件（仅限 Windows Phone）

使用户可以设置时间值的浮出控件。

参考：TimePickerFlyout

切换按钮

可以在 2 个状态之间进行切换的一种按钮。

XAML

 

<ToggleButton x:Name="toggleButton1" Content="Button" 
              Checked="ToggleButton_Checked"/>

参考：ToggleButton

方法：添加按钮

切换开关

可以在 2 种状态之间进行切换的一种开关。

XAML

 

<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch" 
              OnContent="On" OffContent="Off" 
              Toggled="ToggleSwitch_Toggled"/>

参考：ToggleSwitch

方法：添加切换开关

设计：切换开关

示例代码：XAML 基本控件示例、控件和布局库示例

工具提示

显示元素信息的一种弹出窗口。

XAML

 

<Button Content="Button" Click="Button_Click" 
        ToolTipService.ToolTip="Click to perform action" />

参考：ToolTip、ToolTipService

方法：添加工具提示

设计：工具提示

示例代码：XAML 基本控件示例、控件和布局库示例

V

 

VariableSizedWrapGrid

支持以行和列排列子元素的布局面板。每个子元素都可以跨越多行和多列。

XAML

 

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

参考：VariableSizedWrapGrid

方法：快速入门：添加布局控件

示例代码：控件和布局库示例

视频

请参阅媒体元素

Viewbox

可以将其内容缩放至指定大小的容器控件。

XAML

 

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

参考：Viewbox

示例代码：控件和布局库示例

W

 

Web 视图

可托管 Web 内容的容器控件。

XAML

 

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

XAML

 

<Rectangle Height="400" Width="800">
    <Rectangle.Fill>
        <WebViewBrush SourceName="webView1"/>
    </Rectangle.Fill>
</Rectangle>