通过

在 XAML 设计器中使用元素

  • 项目

可以在 XAML 中、在代码中或使用 XAML 设计器向应用程序中添加元素（控件、布局和形状）。本主题介绍如何在 XAML 设计器中处理元素。

将元素添加到布局

布局是在 UI 中调整元素大小和放置元素的过程。若要放置可视化元素，必须将其放入布局 Panel 中。Panel 有一个子属性，该子属性是 FrameworkElement 类型的集合。可使用多种 Panel 子元素（如 Canvas、StackPanel 和 Grid）作为布局容器以及在页面上放置和排列元素。

默认情况下，Grid 面板在 使用 JavaScript 为 Windows 生成的 Windows 应用商店应用程序 中用作页面文档内的顶级布局容器。可在顶级页面布局内添加布局面板、控件或其他元素。

若要向布局添加元素，请执行以下操作

  • 在 Visual Studio 项目的“文档大纲”窗口中，执行下列操作之一：

    • 双击**“工具箱”**中的某个元素（或选择工具箱中的某个元素并按 Enter）。

    • 将元素从**“工具箱”**拖放到美工板。

    • 在**“工具箱”**中，选择某个绘图工具（例如 Ellipse 或 Rectangle），然后在活动面板中绘制元素。

Hh965587.collapse_all(zh-cn,VS.110).gif更改元素的分层顺序

当 XAML 设计器中美工板上有两个元素时，一个元素在分层顺序中将显示在另一个元素之前。在“文档大纲”窗口中元素列表的底部是最靠前的元素（设置了元素的**“ZIndex”属性的情况除外）。向文档或布局容器中插入元素时，该元素将自动放置在活动容器元素中的其他元素之前。若要更改元素的顺序，可使用“排序”**命令，或将元素拖入“文档大纲”窗口的对象树中。

若要更改分层顺序，请执行以下操作

  • 执行下列操作之一：

    • 在**“文档大纲”**窗口中，向上或向下拖动元素以创建所需的分层顺序。

    • 在“文档大纲”窗口或美工板中右击要更改其分层顺序的元素，指向**“排序”**，然后单击以下选项之一：

      • 置于顶层：将元素一直移到顺序的前面。

      • 上移一层：将元素在顺序中前移一级。

      • 下移一层：将元素在顺序中后移一级。

      • 置于底层：将元素一直移到顺序的后面。

    • 更改“属性”窗口中**“布局”部分中的“ZIndex”属性。对于重叠元素，“ZIndex”属性优先于“文档大纲”窗口中显示元素的顺序。当元素重叠时，“ZIndex”**值较低的元素将显示在前面。

更改元素的对齐方式

可使用菜单命令或通过将元素拖到对齐线，对齐美术板中的元素。

对齐线是一个视觉提示，可帮助您将某个元素相对于应用程序中的其他元素进行对齐。

使用菜单命令对齐两个或更多元素

  1. 选择要对齐的元素。可以通过按下并按住 Ctrl 键选择元素，来选择多个元素。

  2. 在“属性”窗口**“布局”部分中的“HorizontalAlignment”下选择以下属性之一：“左对齐”、“居中”、“右对齐”或“拉伸”**。

  3. 在“属性”窗口**“布局”部分中的“VerticalAlignment”下选择以下属性之一：“顶端对齐”、“居中”、“底端对齐”或“拉伸”**。

使用对齐线对齐两个或更多元素

  • 在 XAML 设计器中，在含有至少两个元素的布局中，拖动其中一个元素或调整其大小，以使其边缘与另一个元素对齐。

    边缘对齐后，将显示一个对齐边界”，以指示对齐方式。对齐边界显示为红色虚线。只有在启用了**“对齐线对齐”**后，才会显示对齐边界。有关展示对齐边界的美工板插图，请参见使用 XAML 设计器创建 UI。

更改元素的边距

XAML 设计器中的边距决定了美工板上元素周围的空白区域的大小。例如，边距指定元素外边缘与包含该元素的 Grid 面板的边界之间空白区域的大小。边距还指定 StackPanel 中包含的元素之间空白区域的大小。

更改元素的边距

  1. 选择要更改边距的元素。

  2. 在“属性”窗口中的**“布局”下，更改任何“Margin”属性（“顶部”、“左侧”、“右侧”或“顶部”**）的值（以像素为单位，即与设备无关的单位，每个单位大约为 1/96 英寸）。

若要更改美工板中元素的边距，请执行以下操作

  • 若要更改元素相对于其布局容器的边距，请单击边距装饰器，选择元素后元素周围将出现边距装饰器，并位于布局容器内。有关展示边距装饰器的插图，请参见使用 XAML 设计器创建 UI。

    如果边距装饰器以垂直或水平方向打开，则未设置相应的边距。如果边距装饰器关闭，则已设置相应的边距。

    打开边距装饰器但未设置相反的边距时，将根据元素在美工板中的位置将相反的边距设置为正确的值。对于相反的边距（如**“左侧”和“右侧”**边距），将始终至少设置一个属性。

    重要

    置于某些布局容器内的元素（如 Canvas）没有边距装饰器。置于 StackPanel 内的元素对于左边距和右边距或上边距和下边距有边距装饰器，具体取决于 StackPanel 的方向。

对元素进行分组和取消分组

对 XAML 设计器中的两个或更多元素进行分组可创建一个新的布局容器，然后将这些元素置于该容器内。通过将两个或更多元素一起置于一个布局容器中，可轻松地选择、移动和转换该组，如同该组中的所有元素是一个元素。对于识别以某种方式相互关联的元素（如组成导航元素的按钮），分组也很有用。对元素进行取消分组时，只需删除包含这些元素的布局容器即可。

若要将元素组成新的布局容器，请执行以下操作

  1. 选择要分组的元素。（若有选择多个元素，请按下并按住 Ctrl 键并同时单击这些元素。）

  2. 右击所选元素，指向**“分组”**，然后单击要放置该组的布局容器的类型。

    提示

    如果选择 Viewbox、T:Windows.UI.Xaml.Controls.Border 或 ScrollViewer 对元素进行分组，则将元素置于 Viewbox、Border 或 ScrollViewer 内的一个新 Grid 面板中。如果在其中某个布局容器中对元素进行取消分组，则仅删除 Viewbox、Border 或 ScrollViewer，而保留 Grid 面板。若要删除 Grid 面板，请再次对这些元素进行取消分组。

若要对元素进行取消分组并删除布局，请执行以下操作

  • 右击要取消分组的组，然后单击**“取消分组”**。

也可通过在“文档大纲”窗口中右击所选项，单击**“分组”或“取消分组”**，对元素进行分组和取消分组。

重置元素布局

可通过使用**“重置布局”**命令，还原元素的具体布局属性的默认值。通过使用此命令可重置元素的边距、对齐方式、宽度、高度和大小，个别重置或同时全部重置均可。

若要重置元素布局，请执行以下操作

  • 在“文档大纲”窗口或美工板中，选择**“重置布局”，然后单击要重置的属性（或单击“全部”**以重置元素的所有布局属性）。

请参见

概念

使用 XAML 设计器创建 UI