3.4 SilverLight2的布局管理

SilverLight 有着一种灵活的布局管理系统，能让开发者和设计师轻松的定位 UI 上的控件。该布局系统对显式指定坐标的控件支持固定的定位模型；除此之外，还支持一种更为动态的定位模型，控件和布局能随着浏览器的大小改变而自动改变其大小和方位。

 

在 Silverlight2 中，开发者可以用布局面板来协调包含在其中的控件的位置和大小。Silverlight Beta2 中内建的布局面板最常用的3种：

 

l Canvas

l StackPanel

l Grid

 

3.4.1 Canvas面板

定义一个区域，在该区域中可以使用相对于 Canvas 区域的坐标显式定位子元素。

 构造函数

	名称	说明
	Canvas	初始化 Canvas 类的一个新实例。

页首

 方法

	名称	说明
	Arrange	定位子元素并确定 UIElement 的大小。父元素从其 ArrangeCore 实现（或 WPF 框架级别等效项）调用此方法以形成递归布局更新。此方法产生第二次布局更新。 （继承自 UIElement。）
	ArrangeOverride	排列 Canvas 元素的内容。 （重写 FrameworkElement..::.ArrangeOverride(Size)。）
	CaptureMouse	尝试在此元素上强制捕获鼠标。 （继承自 UIElement。）
	CheckAccess	确定调用线程是否可以访问此 DispatcherObject。 （继承自 DispatcherObject。）
	ClearValue	清楚值或者属性 （继承自 DispatcherObject。）
	Equals	确定提供的 DependencyObject 是否等效于当前 DependencyObject。 （继承自 DependencyObject。）
	Finalize	允许 Object 在“垃圾回收”回收 Object 之前尝试释放资源并执行其他清理操作。 （继承自 Object。）
	FindName	查找具有提供的标识符名的元素。 （继承自 FrameworkElement。）
	GetAnimationBaseValue	为此元素的指定属性返回属性基值，从而忽略正在运行或已停止的动画中的任何进行动画处理的可能值。 （继承自 UIElement。）
	GetHashCode	获取此 DependencyObject 的哈希代码。 （继承自 DependencyObject。）
	GetLeft	获取给定依赖项对象的 Left 附加属性的值。
	GetTop	获取给定依赖项对象的 Top 附加属性的值。
	GetType	获取当前实例的 Type。 （继承自 Object。）
	GetValue	返回 DependencyObject 的此实例上的依赖项属性的当前有效值。 （继承自 DependencyObject。）
	GetZIndex	获取指定ZIdex的属性值
	HitTest	已重载。
	InvalidateArrange	使元素的排列状态（布局）无效。使其无效后，将会更新元素的布局，除非随后被 UpdateLayout 强制执行，否则该更新将会异步发生。 （继承自 UIElement。）
	InvalidateMeasure	使此元素的度量状态（布局）无效。 （继承自 UIElement。）
	Measure	更新 UIElement 的 DesiredSize。父元素从其自身的 MeasureCore 实现调用此方法以形成递归布局更新。调用此方法构成布局更新的第一个处理过程（“测量”处理过程）。 （继承自 UIElement。）
	MeasureCore	实现 FrameworkElement 的基本测量处理过程布局系统行为。 （继承自 FrameworkElement。）
	MeasureOverride	测量 Canvas 的子元素，以便准备在 ArrangeOverride 过程中排列它们。 （重写 FrameworkElement..::.MeasureOverride(Size)。）
	MemberwiseClone	创建当前 Object 的浅表副本。 （继承自 Object。）
	OnCreateAutomationPeer	为 Windows Presentation Foundation (WPF) 基础结构返回特定于类的 AutomationPeer 实现。 （继承自 UIElement。）
	ReadLocalValue	返回依赖项属性的本地值（如果存在）。 （继承自 DependencyObject。）
	ReleaseMouseCapture	如果此元素具有鼠标捕获，则释放该捕获。 （继承自 UIElement。）
	SetBinding	已重载。
	SetLeft	设置给定依赖项对象的 Left 附加属性的值。
	SetTop	设置给定依赖项对象的 Top 附加属性的值。
	SetZIndex	设置给定依赖项对象的ZIndex 附加属性的值。
	SetValue	已重载。
	ToString	返回表示当前 Object 的 String。 （继承自 Object。）
	UpdateLayout	请确保此元素的所有可视子元素都正确地进行了布局更新。 （继承自 UIElement。）

页首

 字段

	名称	说明
	LeftProperty	标识 Left 附加属性。
	TopProperty	标识 Top 附加属性。
	ZIndexProperty	标识 ZIndex 附加属性。

页首

 属性

	名称	说明
	ActualHeight	获取此元素的呈现高度。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	ActualWidth	获取此元素的呈现宽度。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	Background	获取或设置用于填充 Panel 的边框之间的区域的 Brush。这是一个依赖项属性。 （继承自 Panel。）
	Children	获取此 Panel 的子元素的 UIElementCollection。 （继承自 Panel。）
	Clip	获取或设置用于定义元素内容边框的几何图形。 这是一个依赖项属性。 （继承自 UIElement。）
	Cursor	获取或设置当鼠标指针悬停在此元素上时显示的光标。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	DataContext	获取或设置元素参与数据绑定时的数据上下文。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	DesiredSize	获取此元素在布局过程的测量处理过程中计算的大小。 （继承自 UIElement。）
	Dispatcher	获取与此 DispatcherObject 关联的 Dispatcher。 （继承自 DispatcherObject。）
	Height	获取或设置元素的建议高度。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	HorizontalAlignment	获取或设置在父元素（如面板或项控件）中构成此元素时应用于此元素的水平对齐特征。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	IsHitTestVisible	获取或设置一个值，该值声明此元素是否可以作为其呈现内容的某部分的命中测试结果返回。这是一个依赖项属性。 （继承自 UIElement。）
	Language	获取或设置应用于某个元素的本地化/全球化语言信息。这是一个依赖项属性。 （继承自 FrameworkElement。）
	Margin	获取或设置元素的外边距。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	MaxHeight	获取或设置元素的最大高度约束。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	MaxWidth	获取或设置元素的最大宽度约束。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	MinHeight	获取或设置元素的最小高度约束。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	MinWidth	获取或设置元素的最小宽度约束。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	Name	获取或设置元素的标识名称。该名称提供一个引用，以便当 XAML 处理器在处理过程中构造标记元素之后，代码隐藏（如事件处理程序代码）可以对该元素进行引用。这是一个依赖项属性。 （继承自 FrameworkElement。）
	Opacity	获取或设置当 UIElement 在用户界面 (UI) 中呈现时为其整体应用的不透明度因子。 这是一个依赖项属性。 （继承自 UIElement。）
	OpacityMask	获取或设置不透明蒙板，作为应用于此元素已呈现内容的任何 Alpha 通道蒙板的 Brush 实现。 这是一个依赖项属性。 （继承自 UIElement。）
	Parent	获取此元素的逻辑父级元素。 （继承自 FrameworkElement。）
	RenderSize	获取（或设置，请参见备注）此元素的最终呈现大小。 （继承自 UIElement。）
	RenderTransform	获取或设置影响此元素呈现位置的转换信息。 这是一个依赖项属性。 （继承自 UIElement。）
	RenderTransformOrigin	获取或设置由 RenderTransform 声明的任何可能呈现转换的中心点，相对于元素的边界。 这是一个依赖项属性。 （继承自 UIElement。）
	Resources	获取或设置本地定义的资源字典。 （继承自 FrameworkElement。）
	Style	获取或设置此元素在呈现时使用的样式。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	Tag	获取或设置一个可用于存储有关此元素的自定义信息的任意对象值。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	Triggers	获取直接在此元素上建立或在子元素中建立的触发器的集合。 （继承自 FrameworkElement。）
	VerticalAlignment	获取或设置在父元素（如面板或项控件）中组合此元素时应用于此元素的垂直对齐特征。 这是一个依赖项属性。 （继承自 FrameworkElement。）
	Visibility	获取或设置此元素的用户界面 (UI) 可见性。 这是一个依赖项属性。 （继承自 UIElement。）
	Width	获取或设置元素的宽度。 这是一个依赖项属性。 （继承自 FrameworkElement。）

页首

 附加属性

	名称	说明
	Left	获取或设置一个值，该值表示某元素的左边缘与其父 Canvas 的左边缘之间的距离。
	Top	获取或设置一个值，该值表示某元素的上边缘与其父 Canvas 的上边缘之间的距离。
	ZIndex	获取或设置一个值，该值表示某元素的右边缘与其父 Canvas 的层叠偏序值。

页首

 事件

	名称	说明
	BindingValidationError	在当数据绑定确认错误的时候发生.（继承自 UIElement。）
	GotFocus	在此元素获得逻辑焦点时发生。 （继承自 UIElement。）
	KeyDown	在焦点位于此元素上并且用户按下键时发生。 （继承自 UIElement。）
	KeyUp	在焦点位于此元素上并且用户释放键时发生。 （继承自 UIElement。）
	LayoutUpdated	在与当前 Dispatcher 关联的各种可视元素的布局更改时发生。 （继承自 UIElement。）
	Loaded	在元素已布局、已呈现且可用于交互时发生。 （继承自 FrameworkElement。）
	MouseEnter	在鼠标指针进入此元素的边界时发生。 （继承自 UIElement。）
	MouseLeave	在鼠标指针离开此元素的边界时发生。 （继承自 UIElement。）
	MouseLeftButtonDown	在鼠标指针悬停于此元素上并且用户按下鼠标左键时发生。 （继承自 UIElement。）
	MouseLeftButtonUp	在鼠标指针悬停于此元素上并且用户释放鼠标左键时发生。 （继承自 UIElement。）
	MouseMove	在鼠标指针悬停于此元素上并且用户移动该鼠标指针时发生。 （继承自 UIElement。）
	SizeChanged	当此元素上的 ActualHeight 或 ActualWidth 属性的值发生更改时发生。 （继承自 FrameworkElement。）

 

好了，这么多属性方法与事件，相信您一定看得眼晕了吧，不要紧，这些东西当您想查找是什么意思的时候可以再翻回此章，并不要求您一次把它全部记下来。其他控件属性大致相同，由于篇幅跟精力有限，就不在这里翻译列出了。想查看的朋友，可以直接查看SilverLight2 Beta2 的 Help文档。第二章已经教大家如何正确安装帮助文档了。值得注意的是，这是WPF的子集，WPF的属性与事件要比现在所列举出来的多一倍多。

 

Canvas是一种很基础的布局面板，他支持对其中的空间采用绝对坐标定位

 

你可以通过一种 XAML 特性--- "附加属性” 对 Canvas 中的元素进行定位。用附加属性，你可以指定控件相对于其直接父 Canvas 控件的上、左坐标的位置。附加属性很有用，因为它让父面板可以扩展其中包含的控件的属性集。Canvas 通过定义扩展属性 Top 和 Left, 就能定义其中 Button （或其他任何 UI 元素）的 Left, Top，而不需要真正向 Button 类中添加这个属性，或 修改 Button 类。

 

我们可以向 Canvas 容器中添加两个按钮，指定其距离 Canvas 左侧的距离为 50 像素，离上边的距离则分别为 50 像素和 150 像素。使用如下 XAML 语法即可完成（其中 Canvas.Top 和 Canvas.Left 都是附加属性的例子）。上面的代码绘制的界面如下：

Canvas 适用于其中包含的 UI 元素比较固定的情形，但是如果你想向其中添加更多的控件，或者 UI 需要改变大小或能够移动（比如全屏与普通模式的切换），Canvas 显得不太灵活，你需要附加计算位置写很多的代码来移动 Canvas 中的东西（这很痛苦）。应付这种动态的场景，更好的办法通常是使用其它带有相关功能的内建语义的布局面板，如 StackPanel 和 Grid。

 

3.4.2 StakcPanel面板：

StackPanel 是一种简单的布局面板，可以用行或列的排列方式来定位其中包含的控件。StackPanel 常用于安排页面上的一个很小的 UI 部分。即某些局部控件，或局部排列上。

 

例如，我们可以用下面的 XAML 标签在页面上垂直的排布3个按钮：

在运行时，StackPanel 会自动垂直地排列我们的按钮，如下所示：

我们可以指定StackPanel水平排列其内部的元素，并不一定非要(默认的)垂直排列:

这回让StackPanel水平排列这三个按钮，如下图所示：

 

值得注意的是，当我们再写StackPanel内部控件的时候，应该明确指定控件的Widht Height以及Margin间距，这样，排列出的控件才会整齐并且达到我们预期的效果。

 

3.4.3 Gird 面板：

Grid面板是最灵活的布局面板，并支持多行多列的布局。在概念上类似HTML的表格元素。

不过与HTML表格不同的是，你不需要把内容嵌入表格的TR当中，而是通过定义 <Grid.RowDefinitions> 和 <Grid.ColumnDefinitions> 属性来定义 Grid 的行和列。举例来说，我们定义一个三行三列的Grid，然后再其中放置4个Button按钮。如下：

以上的布局会按下面排列方式显示按钮：

除了支持指定尺寸以外（Height=”60”） Grid 的 RowDefinition 和 ColumnDefinition 控件还支持自动模式（Height="Auto"），这样会根据其中内容的尺寸自动改变 Grid 或 Row 的尺寸（你也可以指定最大或最小尺寸限制，这是在一些地方非常有用的）。

 

Grid 的 Row 和 ColumnDefinitions 还支持叫做 "Proportional Sizing" （按比例缩放）的特性。用这个特性，可以让 Grid 的行列按相对比例的方式排放（如：你可以指定第二行的尺寸为第一行的2倍）。您会发现 Grid 提供了非常多的功能和灵活性 - 这可能会成为您最终的最常用的布局面板控件。

 

使用Grid面板，安排我们的digg页面

我们创建的Grid布局将最终实现成如下图所示的样式，请您事先记住他：

 

要创建这种Grid，我们首先添加一个其中包含两个 RowDefinition 的根级 Grid 面板。第一行的高度 40 像素，而第二行则填补剩下的空间（Height="*"）：

提示：上面我们把Grid的“ showgridlines ”属性设为“ true ” 。这样我们能够很容易的看清行和列的边界线，如下图：

然后，我们将在刚才的Grid的第一行中再添加一个Grid的子控件，并把它分为3列，第一列为标题，第二列为搜索文本框，以及一个搜索按钮：

之后，我们就得到了 Digg 搜索页面的Grid布局，如下所示:

注意：当然方法不仅仅这样一种，这才体现了Grid的灵活性。我们可以建立一个2行3列的Grid，并使用colspan/rowspan的方法来合并行和列（这与在HTML合并行和列的方法类似），我们不这么做，而是选择嵌套Grid的原因，是因为这样这容易学习与理解。

 

现在我们已经完成了Grid设计，接下来要做的是向其中添加控件。

 

对头部的行，我们用 <Border> 控件（设置其 CornerRadius 为 10，以得到圆角效果）并添加一些文本表示标题。我们用 <WatermarkedTextBox> 控件来创建第2列的搜索文本框。并在第3列放置一个<Button>控件. 然后我们在第二行放一些占位文字，稍后我们会在这里显示搜索结果。

 

注：下面我会直接在控件中内嵌样式信息（FontSize, Colors, Margins 等）。以后我们会讲到如何设置Style，就如同HTML的css样式文件一样。封装这些设定到一个独立的文件中（类似 CSS），以便于在整个应用程序中重用。

 

现在，当我们运行程序时就会显示出如下的界面：

动态改变应用程序的尺寸：

 

你也许注意到了，在上面的 XAML 中我们的顶层控件设置成了固定的高度和宽度：

这样设置，我们的SilverLight会一直保持这个大小，缩放游览器的时候就很明显了：

 

然在某些场合下，将内嵌的应用程序固定在 HTML 页面的一个固定尺寸的区域内会很有用，但我们的 Digg 搜索程序不一样，我们宁愿它能自动随着浏览器而缩放，就像一个普通的 HTML 页面那样。

 

好消息是，这很容易实现。只要去除根控件上的 Width 和 Height 属性就行了：

这样，我们的 Silverlight 应用程序就会自动扩展（或收缩），以填满其嵌入的 HTML 容器。因为我们用来测试的 SilverlightTestPage.html 文件将 Silverlight 控件放置在一个 HTML <div>元素中，并且其 CSS 设置中宽高均为 100%, 所以 Digg 应用程序最终会填满整个浏览器：

注意页面头部中的文字内容的尺寸是如何随着浏览器宽度而自动改变的：

 

当我们缩小浏览器尺寸时，带水印的文本框和搜索按钮会保持同样的尺寸，因为其 Grid 容器列的宽度是固定的。包含 "Digg Search" 标题的 <Border> 控件却会自动调整尺寸，因为其 Grid 列的宽度设置成了 Width="*".

 

我们不需要编写一行代码就可以启用这个布局行为，Grid容器和布局系统会为我们自动调整大小或流动其中的任何东西。

 

好了，我们已经基本介绍完XAML跟常用的布局控件了，接下来我们将详细讲解一下SilverLight2常用控件