布局概述

通过在 Microsoft Expression Blend 中使用各种内置的版式面板或自定义面板，用户可以轻而易举地设置简单和复杂的页面布局。版式面板元素可控制其中所含的其他元素的位置、大小、尺寸和排列方式。版式面板实质上起到容器的作用。使用版式面板的一大好处是可以组织其中的元素。

说明：
在 Microsoft Silverlight 1.0 项目中，只有“画布”版式面板可用。此外，在 Silverlight 2 项目中，只有“网格”、“画布”、“StackPanel”、“ScrollViewer”和“Border”版式面板可用。

版式面板可以隐式实现，在这个意义上版式面板是自适应的。这意味着，整个布局能够根据窗口大小自动调整大小。对于有些情况，例如在构建能够适应不同屏幕大小和分辨率并可满足本地化需要的用户界面 (UI) 时，这一功能对您很有帮助。您也可以决定通过显式实现版式面板来使用固定的大小，这意味着布局具有固定的 Width 和 Height 属性，因此，即便调整应用程序窗口的大小，布局中的区域仍然保持指定的大小。

说明：
如果将对象的 Width 或 Height 属性从一个固定值更改为 Auto，该属性将会设置为默认的最小值。

您还可以在版式面板中转换元素以设置布局后的呈现位置。这对动画非常有用（例如，将元素移到网格面板的边界之外并使其飞入所需位置）。转换是相对于布局位置而言的。因此，“属性”面板的“转换”类别下将默认位置显示为 (0,0)。在大多数情况下，除了动画（需要相对于最终的布局位置来回移动元素）之外，无需对版式面板中的元素应用转换。

版式面板

Expression Blend 提供了五种主要的版式面板，其中的每种面板可用于管理一种不同类型的布局。下表对这些版式面板进行了说明。

面板	名称	描述
	网格	采用非常灵活的行和列（构成网格）布局来排列子元素。有关详细信息，请参阅网格面板。
	画布	按照 X 和 Y 绝对坐标来排列子元素。“画布”可用于固定元素在运行期间所在的屏幕位置，这与空白画布类似。有关详细信息，请参阅画布面板。
	堆叠	将子元素沿水平或垂直方向排列（或堆叠）成一行。有关详细信息，请参阅堆叠面板。
	环绕	按从左至右的顺序连续排列子元素，等排到面板的最右侧后，将内容环绕到下一行，从而形成从左至右、从上至下的排列方式。环绕面板的方向也可以是垂直的，在这种情况下，子元素将从上至下、从左至右排列。有关详细信息，请参阅环绕面板。
	停靠	排列子元素以使其停留或停靠在面板的一侧。有关详细信息，请参阅固定面板。

返回页首

其他布局容器

其他布局容器也会影响其中含元素的排列方式。不过，这些容器未经过优化，并不能像主要的版式面板一样稳妥地支持更稳固的 UI 方案。下表对其他布局容器进行了说明。

元素	名称	描述
	Border	一个简单元素，用于绘制元素周围的边框和/或背景。“Border”只能包含一个子元素。您可能需要在边框内放入网格面板或画布面板，以便能够处理多个子元素。有关“Border”的详细信息，请参阅其他布局容器。
	BulletDecorator	一个元素，其中只能包含两个子元素，这两个子元素通常是文本字符串和字形（表示诸如复选框的控件）。有关“BulletDecorator”的详细信息，请参阅其他布局容器。
	Popup	一个窗口，该窗口呈现在应用程序中的其他所有内容之前，但与另一个元素相关。如果用户与弹出菜单相关的 UI 的主要部分交互，则可以使用弹出菜单向这些用户提供更多的信息和选项。“Popup”包含单个子元素，并根据目标元素进行定位。默认情况下，“Popup”将网格面板用作其单一的子元素。借助网格面板，您可以在绘制“Popup”之后立即处理其中的多个子元素。在大多数情况下，您不必自己直接创建弹出菜单，而可以使用自身的模板中带有弹出菜单的控件，例如菜单或组合框。有关“Popup”的详细信息，请参阅其他布局容器。
	ScrollViewer	一个允许您滚动其中所含的子元素的元素。该元素仅包含单个子元素。因此在大多数情况下，需要在其中使用堆叠面板、画布面板或网格面板等版式面板。“ScrollViewer”可用于其他控件（如列表框）的模板中，以支持内容滚动功能。当“ScrollViewer”中的内容过多时，可以启用内容剪切。还可以对滚动条进行控制，令其处于不可用、隐藏或可见状态，或者使其仅仅在需要时自动显示。有关“ScrollViewer”的详细信息，请参阅其他布局容器。
	UniformGrid	在相等或均匀的网格区域中排列子元素。“UniformGrid”不是网格面板的一种变形；更准确地说，它是一种平铺布局元素，因为它会根据指定的行数和列数在所包含的每个元素之间设定相等的间距。在向“UniformGrid”中添加子元素时，每个元素均按照从左上至右下的顺序放到区域中，直到填满网格为止。这对诸如图像列表之类的控件非常有用。有关“UniformGrid”的详细信息，请参阅其他布局容器。
	Viewbox	缩放其所有子元素，与缩放控件非常相似。因为视图框只能包含单个子元素，所以通常会向其中放入一个画布面板或网格面板，以便对多个子元素应用缩放效果。有关“Viewbox”的详细信息，请参阅其他布局容器。

返回页首

根布局容器

在“交互”面板的“对象和时间线”下，将会显示一个标有“LayoutRoot”的元素。此元素代表 Expression Blend 文档中的根版式面板。默认情况下，布局的根元素是网格面板。在大多数情况下，将网格面板用于顶层页面布局就足够了。不过，通过右键单击布局的根元素，指向“更改布局类型”，然后选择替代的版式面板，可以将布局的根元素更改为另一个版式面板。您还可以决定采用以下方法将画布面板（而不是网格面板）用作默认的“LayoutRoot”：在“选项”对话框（位于“工具”菜单上）的“项目”部分中，清除“将‘网格’面板用作新项的默认布局”复选框。

返回页首

层

层提供了一种快速简便的方法，来创建页面级布局容器以用于组织内容。从 Microsoft Expression Design 2 等其他程序导入内容时，层特别有用。从 Expression Design 2 导入的作品可使用每个导入层的画布面板。

您可以使用“工具”菜单上的“新建层”命令来创建新层。Expression Blend 将根据当前文档的“LayoutRoot”所指定的内容来创建新层。

层的概念图

返回页首

如何处理子元素

Expression Blend 尝试将子元素添加到文档中的根面板（或最顶端的面板）中。但是，如果在对象树中的其他位置有另一布局容器处于活动状态，则会将子元素添加到该容器中。通过双击版式面板，可将元素变成活动元素。面板周围将显示黄色突出显示框，以表明此时该面板是活动的元素。黄色突出显示框会同时出现在美工板上以及“交互”面板的“对象和时间线”下。请注意，如果在创建新面板之后立即在该面板的边框内绘制子元素，则这些子元素将会放入刚刚创建的面板中。这是因为新建的面板将自动成为活动元素。

magGlass 元素是当前的活动元素，新的子对象将添加到该元素中

使用 Expression Blend 还可以轻松在各面板之间拖动子元素，以便采用父项重新定义，将其拖入不同的布局容器。下图显示了将一个橙色的椭圆从根布局网格面板移到另一个网格面板中。如果面板可以接受子元素，则该面板的周围将显示虚线范围框和文本提示。请在释放鼠标按钮之前按住 Alt 键以完成重新定义父项的操作。

将对象从根网格面板重新定义为另一个网格面板中的父项。

返回页首

复杂布局

在设置页面布局时，往往需要具有超出使用单个版式面板所能具备的灵活性。创建复杂布局的一种途径是将版式面板用作其他版式面板的容器。例如，可能需要在“LayoutRoot”（默认情况下是网格面板）中使用停靠面板。这会将页面划分成一组区域，其中的每个区域通常都包含一个或多个控件。

有关布局的详细编程信息，请参阅 Windows 软件开发工具包 (SDK) 中的 .NET 开发（上述链接可能指向英文页面）部分。

返回页首