排列对象

版式面板是指可控制包含在其中的其他元素的位置、大小、尺寸和排列方式的元素。版式面板与容器很类似,可帮助您排列和组合应用程序的对象。本节包括有关设计 Microsoft Expression Blend 应用程序的布局的主题。

有关 Windows Presentation Foundation (WPF) 应用程序中的布局系统的信息,请参阅 MSDN 上的布局系统 Cc295017.xtlink_newWindow(zh-cn,Expression.40).png

版式面板

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

Note注意:

在 Microsoft Silverlight 项目中,只有 GridCanvasStackPanelScrollViewerBorder 版式面板可用。

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

Note注意:

如果将对象的 WidthHeight 属性从一个固定值更改为 Auto ,该属性将会设置为默认的最小值。

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

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

面板 名称 描述
Cc295017.a87ee957-7fbf-4135-a6ab-6de7e63160aa(zh-cn,Expression.40).png

Grid

采用非常灵活的行和列(构成 网格 )布局来排列子元素。

有关详细信息,请参阅使用“网格”版式面板

Cc295017.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(zh-cn,Expression.40).png

Canvas

按照 X 和 Y 绝对坐标来排列子元素。 Canvas 可用于固定元素在运行期间所在的屏幕位置,这与空白“画布” 类似。

有关详细信息,请参阅使用“画布”版式面板

Cc295017.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(zh-cn,Expression.40).png

StackPanel

将子元素沿水平或垂直方向排列(或 堆叠 )成一行。

有关详细信息,请参阅使用 StackPanel 版式面板

Cc295017.91486eda-6173-4ce8-9610-4f296dcb83d7(zh-cn,Expression.40).png

WrapPanel

按从左至右的顺序连续排列子元素,等排到面板的最右侧后,将内容 环绕 到下一行,从而形成从左至右、从上至下的排列方式。环绕面板的方向也可以是垂直的,在这种情况下,子元素将从上至下、从左至右排列。

有关详细信息,请参阅使用 WrapPanel 版式面板

Cc295017.db9f1ff5-6bca-441d-b289-c6781a478a5b(zh-cn,Expression.40).png

DockPanel

排列子元素以使其停留或 停靠 在面板的一侧。

有关详细信息,请参阅使用 DockPanel 版式面板

其他布局容器

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

元素 名称 描述
Cc295017.be354518-c54c-4f86-9c57-0b4a9d384b3e(zh-cn,Expression.40).png

Border

一个简单元素,用于绘制元素周围的边框和/或背景。 Border 只能包含一个子元素。您可能需要在边框内放入网格面板或画布面板,以便能够处理多个子元素。

有关 Border 的详细信息,请参阅其他布局容器

Cc295017.0cc3e2a4-7a8b-48ef-abad-c3673ac774d8(zh-cn,Expression.40).png

BulletDecorator

一个元素,其中只能包含两个子元素,这两个子元素通常是文本字符串和字形(表示诸如复选框的控件)。

有关 BulletDecorator 的详细信息,请参阅其他布局容器

Cc295017.5d9046cc-9edb-45eb-8c59-30af398f7b6c(zh-cn,Expression.40).png

Popup

一个窗口,该窗口呈现在应用程序中的其他所有内容之前,但与另一个元素相关。如果用户与弹出菜单相关的 UI 的主要部分交互,则可以使用弹出菜单向这些用户提供更多的信息和选项。 Popup 包含单个子元素,并根据目标元素进行定位。默认情况下, Popup 包含一个网格面板作为其单一子元素。借助网格面板,您可以在绘制 Popup 之后立即处理其中的多个子元素。在大多数情况下,您不必自己直接创建弹出菜单,而可以使用自身的模板中带有弹出菜单的控件,例如菜单或组合框。

有关“Popup”的详细信息,请参阅其他布局容器

Cc295017.5ca26a94-31cd-4fda-83c5-a9564b5b019d(zh-cn,Expression.40).png

ScrollViewer

一个允许您滚动其中所含的子元素的元素。该元素仅包含单个子元素。因此在大多数情况下,需要在其中使用堆叠面板、画布面板或网格面板等版式面板。 ScrollViewer 用在其他控件(如列表框)的模板中,以提供对内容滚动的支持。当 ScrollViewer 中的内容太长时,可以选择剪切此内容。还可以对滚动条进行控制,令其处于不可用、隐藏或可见状态,或者使其仅仅在需要时自动显示。

有关 ScrollViewer 的详细信息,请参阅其他布局容器

Cc295017.f14d64f5-fb79-4d1d-a29e-05dd6f440e98(zh-cn,Expression.40).png

UniformGrid

在相等或均匀的网格区域中排列子元素。 UniformGrid 不是网格面板的一种变形。更准确的说,应该将其当作一种平铺布局元素,因为它会根据指定的行数和列数,在所包含的每个元素之间创建相等的间距。在向 UniformGrid 添加子元素时,每个元素均按照从左上至右下的顺序放到区域中,直到填满网格为止。这对诸如图像列表之类的控件非常有用。

有关 UniformGrid 的详细信息,请参阅其他布局容器

Cc295017.16691128-7f3d-45e0-b532-45e8a7162416(zh-cn,Expression.40).png

Viewbox

缩放其所有子元素,与缩放控件非常相似。因为查看框只能包含单个子元素,所以通常会向其中放入一个画布面板或网格面板,以便对多个子元素应用缩放效果。

有关 Viewbox 的详细信息,请参阅其他布局容器

根布局容器

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

如何处理子元素

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

colors2 StackPanel 对象是当前的活动版式面板,新的子对象将添加到该面板中

Cc295017.a3b049ca-8d4c-417c-88e7-786a583c699a(zh-cn,Expression.40).png

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

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

Cc295017.95d9db96-a236-4ed6-b6ba-a141a8168dde(zh-cn,Expression.40).png

复杂布局

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

有关布局的详细编程信息,请参阅 Windows 软件开发工具包 (SDK) Cc295017.xtlink_newWindow(zh-cn,Expression.40).png 中的 .NET 开发 Cc295017.xtlink_newWindow(zh-cn,Expression.40).png(上述链接可能指向英文页面)部分。

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