首页 > 代码库 > 控件列表 (XAML)
控件列表 (XAML)
面向 Windows 的 XAML UI 框架提供丰富的控件库，这些控件可支持 UI 开发。这些控件中的一部分具有直观的表示；其他功能作为其他控件或内容（如图像和媒体）的容器。你可以通过下载控件和布局库示例以及 XAML 基本控件示例在操作中查看许多 Windows UI 控件。
下面是可在应用中使用的常见 XAML 控件的列表，按字母排序。要查看按功能分组的控件，请参阅按功能列出控件。
你可以将应用 UI 中的大部分控件用于手机和电脑。这些控件通常有相似的外观，但在某些情况下，它们在手机和电脑上的外观不同。其他控件仅适用于手机应用，或仅适用于电脑应用。
<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="http://www.mamicode.com/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>