在 XAML 设计器中使用元素

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

将元素添加到布局

布局 是在 UI 中调整元素大小和定位元素的过程。 若要定位视觉元素，必须将它们放在布局 面板中。 一 Panel 个子属性是 FrameworkElement 类型的集合。 可以使用各种 Panel 子元素（如 Canvas、 StackPanel 和 Grid）作为布局容器，并定位和排列页面上的元素。

默认情况下， Grid 面板用作页面或窗体中的顶级布局容器。 可以在顶级页面布局中添加布局面板、控件或其他元素。

若要将元素添加到 XAML 设计器中的布局，请执行以下作之一：

• 双击工具箱中的元素（或选择 工具箱 中的元素，然后按 Enter）。

• 将元素从 工具箱 拖动到美工板。

• 在 工具箱中，选择一个绘图工具（例如 椭圆 或 矩形），然后在活动面板中绘制元素。

更改元素的分层顺序

当 XAML 设计器中的美工板上有两个元素时，一个元素将以分层顺序显示在另一个元素的前面。 在“文档大纲”窗口元素列表的底部是显示在最前面的元素（如果未设置元素的 ZIndex 属性的话）。 在页面、窗体或布局容器中插入元素时，该元素将自动放置在活动容器元素中的其他元素的前面。 若要更改元素的顺序，可以使用 Order 命令或在“文档大纲”窗口中的对象树中拖动元素。

若要更改分层顺序，请执行以下作之一：

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

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

  • 转到前面 ，使元素直接转到顺序最前。

  • 前移，使元素按顺序向前移动一级。

  • 向后发送 以按顺序将元素发送回一个级别。

  • 发送到后面 以将元素全部移到顺序的后面。

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

更改元素的对齐方式

可以使用菜单命令或将元素拖动到吸附线来对齐画板上的元素。

对齐线是一个视觉提示，可帮助你相对于应用中的其他元素对齐元素。

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

1. 选择要对齐的元素。 可以选择多个元素，方法是在选择元素时按住 Ctrl 键。

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

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

若要使用对齐线对齐两个或多个元素，请在 XAML 设计器中至少包含两个元素的布局中拖动或调整其中一个元素的大小，以便边缘与另一个元素对齐。

当边缘对齐时， 对齐边界 将显示指示对齐方式。 对齐边界是一条红色虚线。 仅当启用 捕捉到对齐线 时，才会显示对齐边界。 要查看显示对齐限制边界的画板插图，请参阅 使用 XAML 设计器创建 UI。

更改元素的边距

XAML 设计器中的边距确定美工板上元素周围的空空间量。 例如，边距指定元素外边缘与包含元素的 Grid 面板边界之间的间距量。 边距还指定包含在其中的 StackPanel元素之间的空间量。

若要在“属性”窗口中更改元素的边距，

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

2. 在“属性”窗口的“布局”下，更改任何边距属性的值（单位为像素或与设备无关的单位，约为1/96英寸），例如上、左、右或下边距。

在美工板中，若要更改元素的边距相对于元素的布局容器，请单击在选择元素且位于布局容器中时围绕元素显示的 边距装饰器 。 有关显示边距装饰器的插图，请参阅 使用 XAML 设计器创建 UI。

如果边距装饰器是打开的，垂直或水平，则未设置该边距。 如果关闭边距装饰器，系统将设置边距。

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

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

在 XAML 设计器中将两个或多个元素分组会创建新的布局容器，并将这些元素置于该容器中。 将两个或多个元素放在布局容器中后，可以轻松地选择、移动和转换组，就像该组中的元素是一个元素一样。 分组还可用于以某种方式标识彼此相关的元素，例如构成导航元素的按钮。 取消组合元素时，只需删除包含元素的布局容器。

将元素分组到新的布局容器中：

1. 选择要分组的元素。 （若要选择多个元素，请在单击的同时按住 Ctrl 键。

2. 右键单击所选元素，指向 “分组到”，然后单击要将组放置于其中的布局容器类型。

   小窍门

   如果选择 Viewbox、Border 或 ScrollViewer 对元素进行分组，则元素将放置在视图框、边框或 ScrollViewer 的新网格面板中。 如果在其中一个布局容器中取消组合元素，则只会删除 Viewbox、 Border 或 ScrollViewer ，并且 网格 面板保持不变。 若要删除 Grid 面板，请再次取消组合元素。

若要取消组合元素并删除布局，请右键单击要取消分组的组，然后单击“ 取消分组”。 还可以通过在“文档大纲”窗口中右键单击所选项目并单击“ 分组到 ”或“ 取消组合”来对元素进行分组或取消分组。

重置元素布局

可以使用布局重置命令还原元素的特定布局属性的默认值。 通过使用此命令，可以单独或集体重置元素的边距、对齐、宽度、高度和大小。

若要重置元素布局，请右键单击“文档大纲”窗口或美工板上的元素，然后选择 Layout>ResetPropertyName，其中 PropertyName 是要重置的属性（或选择 “布局>重置全部” 以重置元素的所有布局属性）。

相关内容

• 使用 XAML 设计器创建 UI