XAML代表可扩展的应用程序标记语言.它是一个用户界面框架，它提供了广泛的控件库，支持Windows的UI开发.其中一些具有可视化表示，如Button，Textbox和TextBlock等;而其他控件用作其他控件或内容的容器，例如图像等.所有XAML控件都继承自"System.Windows.Controls.Control".
XAML用于许多重要的Microsoft平台，例如Windows Presentation Foundation(WPF)，Silverlight和现在的Windows应用程序.现在，Microsoft Office 2016也是一系列UWP应用程序. XAML是一个丰富的平台，它提供了非常酷的功能和控件，可以在UWP应用程序中使用.
控件的完整继承层次结构如下所示.
控件布局非常应用程序可用性的重要和关键.它用于在应用程序中排列一组GUI元素.选择布局面板时，有一些重要的事情要考虑;
子元素的位置.
子元素的大小.
将重叠的子元素叠加在一起.
布局控件的列表在下面和下面给出;
| S.No. | Controls&描述 |
|---|---|
| 1 | StackPanel StackPanel 是XAML中一个简单实用的布局面板.在堆栈面板中，子元素可以根据方向属性水平或垂直排列在一行中. |
| 2 | WrapPanel 在 WrapPanel 中，子元素被定位根据方向属性从左到右或从上到下依次排序. StackPanel和WrapPanel之间的唯一区别是它不会将所有子元素堆叠成一行，但如果没有剩余空间，它会将剩余元素包装到另一行. |
| 3 | DockPanel DockPanel 定义了一个区域，用于相对于彼此水平或垂直排列子元素.使用DockPanel，您可以使用Dock属性轻松地将子元素停靠到顶部，底部，右侧，左侧和中间. 使用 LastChildFill 属性，最后一个子元素填充为该元素设置时，不考虑任何其他停靠值的剩余空间. |
| 4 | 画布 画布是基本布局面板，其中可以使用显式定位子元素相对于任何一侧的坐标，例如左侧，右侧，顶部和底部.通常，Canvas用于2D图形元素(例如Ellipse，Rectangle等)，但不用于UI元素，因为在XAML应用程序中调整大小，本地化或缩放时指定绝对坐标会给您带来麻烦. |
| 5 | 网格 网格提供了一个灵活的区域，由行和列组成.在Grid中，子元素可以以表格形式排列.可以使用 Grid.Row 和 Grid.Column 属性将元素添加到任何特定的行和列. |
| 6 | SplitView SplitView 表示具有两个视图的容器;主内容的一个视图和通常用于导航命令的另一个视图. |
| 7 | RelativePanel RelativePanel 定义了一个可以定位和对齐孩子的区域相对于彼此或父面板的对象. |
| 8 | ViewBox ViewBox 定义了一个内容装饰器，可以拉伸和缩放单个子节点以填充可用空间. |
| 9 | FlipView FlipView 表示项目的控件，一次显示一个项目，并启用"翻转"行为以遍历其项目集合. |
| 10 | GridView GridView 是一个控件，它以行和列的形式显示项目集合，并且可以水平滚动. |
以下是最终用户可以看到的UI控件列表.
| S.No. | UI Controls&说明 |
|---|---|
| 1 | Button 响应用户输入的控件 |
| 2 | Calendar 表示一个控件，使用户可以使用可视日历显示选择日期. |
| 3 | CheckBox 用户可以选择或清除的控件. |
| 4 | ComboBox 项目下拉列表，用户可以选择来自. |
| 5 | ContextMenu 获取或设置在此元素中通过用户界面(UI)请求上下文菜单时应显示的上下文菜单元素. |
| 6 | DataGrid 表示在可自定义网格中显示数据的控件. |
| 7 | DatePicker 允许用户选择日期的控件. |
| 8 | Dialogs 应用程序还可以显示其他窗口，以便用户收集或显示重要信息. |
| 9 | Flyout 表示显示轻量级UI的控件这是信息，或需要用户交互.与对话框不同，Flyout可以通过点击或点击其外部，按下设备的后退按钮或按下"Esc"键来解散. |
| 10 | Image 提供的控件一个图像. |
| 11 | ListBox 一个控件，显示用户可以选择的项目的内联列表. |
| 12 | Menus 代表Windows菜单控件，使您能够分层组织与命令和事件处理程序关联的元素. |
| 13 | MenuFlyout 表示显示命令菜单的弹出按钮. |
| 14 | PasswordBox 用于输入密码的控件. |
| 15 | Popup 在应用程序窗口的范围内，在现有内容之上显示内容. |
| 16 | ProgressBar 通过显示条形来指示进度的控件. |
| 17 | ProgressRing 通过显示响铃来指示不确定进度的控件. |
| 18 | RadioButton 允许用户选择单个选项的控件来自一组选项. |
| 19 | RichEditBox 一个控件，允许用户使用格式化文本，超链接和图像等内容编辑富文本文档. |
| 20 | ScrollViewer 允许用户平移和缩放其内容的容器控件. |
| 21 | SearchBox 允许用户输入搜索查询的控件. |
| 22 | Slider 一个控件让用户通过沿轨道移动Thumb控件从一系列值中进行选择. |
| 23 | TextBlock 显示文字的控件. |
| 24 | TimePicker 允许用户设置时间值的控件. |
| 25 | ToggleButton 可以在两种状态之间切换的按钮. |
| 26 | ToolTip 一个弹出窗口，显示元素的信息. |
| 27 | Window 根窗口提供最小化/最大化选项，标题栏，边框和关闭按钮. |
以下是一个示例，其中包含 SplitView 中的不同类型的控件.在XAML文件中，使用一些属性和事件创建不同的控件.
<Page
x:Class = "UWPControlsDemo.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:UWPControlsDemo"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Margin = "20">
<StackPanel Orientation = "Horizontal">
<ToggleButton x:Name = "HamburgerButton" FontFamily = "Segoe MDL2 Assets"
Content = "" Checked = "HandleCheck" Unchecked = "HandleUnchecked"
HorizontalAlignment = "Center"/>
<AppBarButton Icon = "Like" />
<AppBarButton Icon = "Dislike" />
<AppBarSeparator/>
<AppBarButton Icon = "Accept" />
<AppBarButton Icon = "Add" />
</StackPanel>
<SplitView x:Name = "splitView" DisplayMode = "Inline"
OpenPaneLength = "296">
<SplitView.Pane>
<StackPanel>
<TextBlock Text = "SplitView Pane" FontSize = "36"
VerticalAlignment = "Center" HorizontalAlignment = "Center"
Margin = "10"/>
<Button Content = "Options" Margin = "10">
<Button.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text = "Reset"/>
<MenuFlyoutSeparator/>
<MenuFlyoutItem Text = "Repeat"/>
<MenuFlyoutItem Text = "Shuffle"/>
</MenuFlyout>
</Button.Flyout>
</Button>
</StackPanel>
</SplitView.Pane>
<StackPanel>
<TextBlock Text = "SplitView Content" FontSize = "36"
VerticalAlignment = "Center" HorizontalAlignment = "Center"
Margin = "10"/>
<Border BorderThickness = "3" BorderBrush = "Red" Margin = "5">
<StackPanel Orientation = "Horizontal">
<TextBlock Text = "Hyperlink example" Margin = "5"/>
<HyperlinkButton Content = "www.microsoft.com"
NavigateUri = "http://www.microsoft.com"/>
</StackPanel>
</Border>
<RelativePanel BorderBrush = "Red" BorderThickness = "2"
CornerRadius = "10" Padding = "12" Margin = "5">
<TextBlock x:Name = "txt" Text = "Relative Panel example"
RelativePanel.AlignLeftWithPanel = "True"
Margin = "5,0,0,0"/>
<TextBox x:Name = "textBox1" RelativePanel.RightOf = "btn"
Margin = "5,0,0,0"/>
<Button x:Name = "btn" Content = "Name"
RelativePanel.RightOf = "txt" Margin = "5,0,0,0"/>
</RelativePanel>
<FlipView Height = "400" Margin = "10" Width = "400">
<Image Source = "Images/DSC_0104.JPG"/>
<Image Source = "Images/DSC_0080.JPG"/>
<Image Source = "Images/DSC_0076.JPG"/>
<Image Source = "Images/thGTF7BWGW.jpg"/>
</FlipView>
</StackPanel>
</SplitView>
</StackPanel>
</Grid>
</Page>以下是C＃中的事件实现.
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
// The Blank Page item template is documented at
http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace UWPControlsDemo {
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page {
public MainPage() {
this.InitializeComponent();
}
private void HandleCheck(object sender, RoutedEventArgs e) {
splitView.IsPaneOpen = true;
}
private void HandleUnchecked(object sender, RoutedEventArgs e) {
splitView.IsPaneOpen = false;
}
}
}编译执行上述代码时，您将看到以下窗口 :
点击左上方的汉堡按钮，它将打开/关闭 SplitView 窗格.
在 SplitView 窗格中，您可以看到弹出窗口， MenuFlyout 和 FlipView 控件.
在 SplitView 内容中，您可以看到超链接，相对面板，ViewBox等按钮和文本框控件.
