在 XAML 设计器中使用元素

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

将元素添加到布局

布局是调整元素在 UI 中的大小和位置的过程。 若要放置可视元素,必须将这些元素置于布局面板中。 Panel 具有一个子属性,该子属性是 FrameworkElement 类型的集合。 可使用各种 Panel 子元素(如 CanvasStackPanelGrid)来充当布局容器以及在页面上放置和排列元素。

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

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

  • 双击“工具箱”的某个元素(或选择“工具箱”中的某个元素,然后按 Enter) 。

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

  • 在“工具箱”中,选择一种绘制工具(例如,椭圆形矩形),然后在活动面板上绘制元素

更改元素的分层顺序

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

若要更改其分层顺序,请执行以下操作之一:

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

  • 右键单击文档大纲窗口中或美工板上想要更改其分层顺序的元素,指向“顺序”,然后单击以下选项之一:

    • “置于顶层”:将元素一直移动到顺序的顶层

    • “上移一层”,使元素在顺序中上移一层

    • “下移一层”,使元素在顺序中下移一层

    • “置于底层”:将元素一直移到顺序的底层

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

更改元素的对齐方式

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

对齐线是一个视觉提示,有助于将某个元素相对于应用中的其他元素进行对齐。

使用菜单命令对齐两个或多个元素的步骤:

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

  2. 在属性窗口中“布局”部分的“HorizontalAlignment”下,选择以下属性之一:“左”、“中心”、“右”或“拉伸”

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

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

当边缘对齐时,将显示“对齐边界”以指示对齐方式。 对齐边界显示为红色虚线。 仅当启用了“对齐线对齐” 时,才会显示对齐边界。 有关显示对齐边界的美工板图示,请参阅使用 XAML 设计器创建 UI

更改元素的边距

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

在“属性”窗口中更改元素边距的步骤:

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

  2. 在属性窗口中的“布局”下,更改任何“边距”属性(“顶部”、“左”、“右”或“底部”)的值(以像素为单位或与设备无关的单位,大约 1/96 英寸)

在美工板中,若要更改元素相对于其布局容器的边距,请在元素处于选中状态且位于布局容器内时,单击元素周围出现的“边距装饰器”。 有关显示边距装饰器的图示,请参阅使用 XAML 设计器创建 UI

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

当打开边距装饰器而未设置相反边距时,请根据美工板中的元素的位置,将相反边距设置为正确的值。 对于相反的边距(如“左侧”和“右侧”边距),将始终至少设置一个属性

重要

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

将元素分组和取消分组

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

将元素分组到一个新布局容器的步骤:

  1. 选择要分组的元素。 (若要选择多个元素,请在按住 Ctrl 键的同时单击这些元素。)

  2. 右键单击选定的元素,指向“分组”,然后单击想要在其中放置该组的布局容器的类型

    提示

    如果选择 ViewboxBorderScrollViewer 对元素进行分组,则这些元素会置于 ViewboxBorderScrollViewer 内的新 Grid 面板中。 如果在其中某个布局容器中对元素进行取消分组,则仅删除 ViewboxBorderScrollViewer,而保留 Grid 面板。 若要删除 Grid 面板,请再次对这些元素进行取消分组。

若要将元素取消分组并删除布局,请右键单击想要取消分组的组并单击“取消分组”。 还可以通过右键单击文档大纲窗口中选定的项,然后单击“分组”或“取消分组”,以对元素进行分组或取消分组

重置元素布局

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

若要重置元素布局,请在文档大纲窗口或美工板中右键单击该元素,然后选择“布局”>“重置 PropertyName”,其中 PropertyName 是想要重置的属性(或者选择“布局”>“全部重置”,重置该元素的所有布局属性)