网格面板

与其他用来管理更具体的布局功能的布局容器相比，网格面板是最灵活的布局容器。Microsoft Expression Blend 提供了两种布局编辑模式以配合网格面板使用：

• 画布布局模式（默认模式）提供了与在画布面板中进行编辑类似的编辑体验。在这种模式下，当移动已设置的列或行分隔线 时，位于这些行和列内的元素会保持不动。

• 网格布局模式（高级）提供了更高级的布局功能。在这种模式下，设计时网格面板的行为与网格的运行时行为相似。

• 通过单击在选定网格面板时显示在左上角的模式图标，或者通过在“选项”对话框（位于“工具”菜单上）的“美工板”部分内选中或清除“使用网格布局模式”复选框，可以在这两种模式之间切换。

适用于网格面板的布局模式

通过使用“工具箱”中的布局容器子菜单或“资源库”，可向文档中添加网格面板。

在“网格”布局模式下，对象在分为三行和三列的网格面板中的排列方式

定位、调整大小和排列

在网格面板中布局的核心是如何使用对齐、边距以及 Width 和 Height 属性来有效地定位、排列元素以及调整元素大小：

• **对齐  ** 决定元素相对于其父元素的位置。

• 边距   决定控件四周以及子元素外部与面板边界之间的空白区域的大小。

• **宽度和高度  ** 以像素为单位（即，设备无关 单位，每单位约为 1/96 英寸）测量的固定值。可以将这些属性设置为“Auto”，以使子元素根据父面板的大小自动调整大小。

返回页首

排列子元素

您可以通过划分网格区域来排列网格中的元素。通过使用列和行分隔线 创建一系列行和列，以便定义用于在网格中布置元素的区域，可以达到此目的。当网格面板是文档中的活动元素时，会沿网格的顶端和左侧显示蓝色标尺。使用“选择” 工具将鼠标指针移动到标尺上时，指针将变为带有加号 (+) 的箭头 ，并且会有一条橙色的线显示列或行的添加位置。单击顶端标尺上的任意位置，将在网格中的该位置添加一列；而单击左侧的标尺，会添加一行。

添加列网格分隔线

可以在网格面板中绘制子元素，使其相互重叠。重叠的元素将按照 Z 顺序（绘制元素或将其放到父元素中的顺序）进行显示。可以使用“对象”菜单上的“排序”来更改元素的 Z 顺序；也可以在“交互”面板的“对象和时间线”下右键单击相应的项，指向“排序”，然后单击所需的命令，从而更改元素的 Z 顺序。子元素也可以跨越多列或多行。也可以启用对齐，以便通过与对齐线进行对齐，更好地排列对象。通过对齐，在美工板上拖动对象时，既可以将对象与同一容器元素（如版式面板）中其他对象的边距、基线（对于文本对象）或对齐线（红色虚线）对齐，也可以将对象与网格面板中的列和行分隔线对齐。

返回页首

调整行和列的大小

在处于网格面板的“网格布局模式”下时，网格面板顶端和左侧的标尺周围将显示锁图标。可以使用这些锁图标来设置要对网格中的行和列使用的大小调整选项。可以设置行的高度值和列的宽度值。有三个不同的选项可用于在网格中调整行和列的大小，这些选项又会影响子元素在网格中的排列方式。这些调整大小选项如下所示：

• **固定大小   **使用像素值 (px)；通过单击锁图标将其设置为“像素调整大小”（锁定位置） 来进行设置。固定大小意味着行或列不会调整大小。

  说明：
  在 Windows Presentation Foundation (WPF) 应用程序（如使用 Expression Blend 创建的应用程序）中，像素是指设备无关像素或设备无关单位，相当于在屏幕分辨率设置为 96 DPI 时显示器上一个像素的大小。无论显示器大小或屏幕分辨率是多少，每个单位均约等于 1/96 英寸。

• **星形调整大小   **使用星号值 (*)；通过单击锁图标将其设置为“星形调整大小”（解锁位置） 来进行设置。星形调整大小与 HTML 中的按百分比调整大小的效果相似。

• **自动调整大小   **不使用定义的“Width”和“Height”属性；通过单击锁图标将其设置为“自动调整大小” 来进行设置。自动调整大小意味着网格面板中的元素将随父元素一起调整大小。

为网格面板中不同的列设置的星形调整大小和自动调整大小

在美工板上选择一个网格分隔线 后，可以使用“属性”面板选择调整大小选项，并在使用星形或固定大小调整时调整“Width”属性。也可以在“属性”面板中设置列网格分隔线的“MaxWidth”和“MinWidth”属性。

返回页首

定位子元素

在“画布布局模式”下，可以通过直接在美工板上工作并将元素拖动到网格面板中的任意位置（甚至拖到边界以外）来直观地定位元素，也可以在“属性”面板的“布局”下输入精确的位置值。

在“网格布局模式”下，可以通过设置每个元素的边距来设置子元素在网格中的位置。边距指定一个元素相对于定义网格的行和列或网格中的单元格边缘偏移的量。将子元素拖动到网格中时将会设置边距，边距表示从选定元素的边缘到下一条网格线（行或列）的距离。通过单击边距（节点）修饰工具即可设置边距。如果边距修饰工具如 或 所示是断开的，则表示尚未设置边距。如果边距修饰工具如 或 所示是封闭的，则表示已经设置边距。若在运行时调整网格的大小，则任何未设置边距的元素将保留在原位，而绑定到边距的元素则会在调整边距的大小时随之移动。

Expression Blend 也会使用简单的规则来设置默认的对齐方式：如果所绘制或调整大小的子元素跨越行或列的中间，则 Width 和 Height 将设置为 Auto；否则它将被固定。也可以设置对齐方式选项，以指示在调整网格大小时是否强制应用边距。对齐方式在网格中显示为实线（已设置对齐方式）或虚线（未设置对齐方式），如下图所示。

网格面板中的一个按钮，已绑定到（已设置边距 - 请注意显示的边距值）左侧和右侧，但未绑定到（未设置边距）顶部和底部

• 水平对齐

  • Left。在调整大小时，定位到左侧但向右拉伸。

  • Center。无论如何调整大小，始终定位到水平中心。

  • Right。在调整大小时，定位到右侧但向左侧拉伸。

  • Stretch。在调整大小时，同时沿两个水平方向拉伸。

• 垂直对齐

  • Bottom。在调整大小时，定位到底端但向顶端拉伸。

  • Center。无论如何调整大小，始终定位到垂直中心。

  • Top。在调整大小时，定位到顶端但向底端拉伸。

  • Stretch。在调整大小时，同时沿两个垂直方向拉伸。

• 边距设置   以像素为单位（或设备无关单位，每单位约等于 1/96 英寸）测量的“Top”、“Left”、“Right”和“Bottom”边距的固定值。当您将子元素拖动到网格中时会设置这些值，它们表示从选定元素的边缘到下一条网格线的距离。

返回页首

调整子元素的大小

主要有两种用于子元素的调整大小选项：固定大小或自动调整大小。固定大小的元素在“布局”类别中设置了特定的“Width”和“Height”值。自动调整大小的元素将“Width”和“Height”值设置为“Auto”，并且根据父面板的大小自动调整大小。

• MinWidth 和 MinHeight   元素在行或列中可以调整或缩放到的最小大小。

• MaxWidth 和 MaxHeight   元素在行或列中可以调整或缩放到的最大大小。如果不希望设置最大大小，可以将其设置为“Infinity”。

• 剪切内容   决定父面板是否应该剪切其子元素。

返回页首

网格分隔线

GridSplitter 是网格面板中使用的一种控件，用户可以与它进行交互，以便在运行时手动调整网格部件的大小。GridSplitter 包含在“资源库”中。

有关网格面板、GridSplitter 控件或如何创建自定义版式面板的详细信息，请参阅 Windows 软件开发工具包 (SDK) 的 .NET 开发（此链接可能指向英文页面）部分。

返回页首

另请参见

概念

添加或删除行或列

更改行或列的调整大小选项