使用“网格”版式面板

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

• 网格布局模式（默认模式）   提供了与 Grid 的运行时重设大小行为类似的编辑体验。在这种模式下，当移动所创建的列和行分隔线 时，位于这些行和列内的对象的大小会发生改变，以保留其 Margin 属性。

• 画布布局模式   提供了与在画布面板中进行编辑类似的编辑体验。在这种模式下，当移动所创建的列和行分隔线 时，位于这些行和列内的对象会保持不动，但是，其 Margin 属性会更新。

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

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

通过以下方法将 Grid 添加到文档：从“资产”面板 中或从“工具”面板的布局容器按钮中，选择 Grid  ，然后用指针拖到美工板上。以下 XAML 代码将添加到项目中：

<Grid/>

有关如何使用 Grid 对象的详细信息，请参阅添加或删除行或列和更改行或列的调整大小选项。

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

定位、调整大小和排列

在 Grid 面板中布局的目的是使用 Alignment 、 Margin 以及 Width 和 Height 属性来有效地定位、排列对象以及调整对象大小：

• Alignment    决定对象相对于其父对象的位置。

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

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

排列子对象

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

添加列网格分隔线

可以在 Grid 版式面板中绘制子对象，使其相互重叠。重叠的对象将按照 Z 顺序（绘制对象或将其放到父对象中的顺序）进行显示。可以使用“对象”菜单上的“排序”来更改对象的 Z 顺序；也可以在“对象和时间线”面板中右键单击相应的项，指向“排序”，然后单击所需的命令，从而更改对象的 Z 顺序。子对象也可以跨越多列或多行。

也可以启用对齐，以便通过与对齐线进行对齐，更好地排列对象。通过对齐，在美工板上拖动对象时，既可以将对象与同一容器对象（如版式面板）中其他对象的边距、基线（适用于文本对象）或对齐线（红色虚线）对齐，也可以将对象与网格面板中的列和行分隔线对齐。

有关详细信息，请参阅启用或禁用对齐。

调整行和列的大小

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

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

  注意：
  在 Expression Blend 项目中， 像素 是指与设备无关的像素或设备无关单位，相当于在屏幕分辨率设置为 96 DPI 时显示器上一个像素的大小。无论显示器大小或屏幕分辨率是多少，每个单位均约等于 1/96 英寸。

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

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

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

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

定位子对象

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

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

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

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

• 水平对齐

  • 左侧   在重设大小时，定位到左侧但向右拉伸。

  • 居中   无论如何重设大小，始终定位到水平中心。

  • 右侧   在重设大小时，定位到右侧但向左拉伸。

  • 拉伸   在重设大小时，同时沿两个水平方向拉伸。

• 垂直对齐

  • 底部   在重设大小时，定位到底端但向顶端拉伸。

  • 居中   无论如何重设大小，始终定位到垂直中心。

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

  • 拉伸   在重设大小时，同时沿两个垂直方向拉伸。

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

调整子对象的大小

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

• MinWidth 和 MinHeight   对象在行或列中可以重设或缩放到的最小大小。

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

• 剪切内容   决定父面板是否应该剪辑其子对象。

网格分隔线

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

有关网格面板、 GridSplitter 控件或如何创建自定义版式面板的详细信息，请参阅用于 Windows Presentation Foundation (WPF) 的 .NET Framework 类库的 System.Windows.Controls 命名空间  一节，或参阅用于 Microsoft Silverlight 的 .NET Framework 类库的 System.Windows.Controls Namespace （System.Windows.Controls 命名空间）一节。

另请参阅

任务

添加或删除行或列
更改行或列的调整大小选项

Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。