Silverlight布局系统与页面尺寸设置全解析

### Silverlight布局系统与页面尺寸设置全解析 在Silverlight开发中，布局系统是构建用户界面的关键部分。它决定了元素如何在页面上排列和显示，而页面尺寸的设置则影响着整个用户界面的外观和可用性。下面我们将深入探讨Silverlight布局系统的核心方法和自定义布局容器，以及页面尺寸的设置策略。 #### 1. 布局系统的核心方法 Silverlight布局系统主要通过两个核心方法来实现元素的测量和排列：`MeasureOverride()` 和 `ArrangeOverride()`。 ##### 1.1 MeasureOverride() 方法 `MeasureOverride()` 方法用于确定每个子元素所需的空间。在这个方法中，子元素并非拥有无限的空间，它们至少要适应面板可用的空间，也可以根据需要更严格地限制其大小。 以下是 `MeasureOverride()` 方法的基本结构： ```csharp protected override Size MeasureOverride(Size panelSpace) { // 遍历所有子元素 foreach (UIElement element in this.Children) { // 询问每个子元素在可用空间约束下所需的空间 Size availableElementSize = new Size(...); element.Measure(availableElementSize); // 可以通过 element.DesiredSize 获取子元素请求的大小 } // 指示此面板所需的空间，用于设置面板的 DesiredSize 属性 return new Size(...); } ``` 调用 `Measure()` 方法后，子元素的 `DesiredSize` 属性会提供其请求的大小。即使不想限制子元素的大小或使用 `DesiredSize` 属性，也必须调用 `Measure()` 方法，因为许多元素在调用该方法之前不会进行渲染。 如果想让子元素自由占用所需的所有空间，可以传递一个 `Size` 对象，其两个维度的值都为 `Double.PositiveInfinity`。测量过程结束后，布局容器必须返回其所需的大小。 ##### 1.2 ArrangeOverride() 方法 当所有元素都被测量后，就需要使用 `ArrangeOverride()` 方法将它们排列在可用的空间中。 以下是 `ArrangeOverride()` 方法的基本结构： ```csharp protected override Size ArrangeOverride(Size panelSize) { // 遍历所有子元素 foreach (UIElement element in this.Children) { // 为子元素分配边界 Rect elementBounds = new Rect(...); element.Arrange(elementBounds); // 可以通过 element.ActualHeight 和 element.ActualWidth 获取子元素实际使用的大小 } // 指示此面板实际占用的空间，用于设置面板的 ActualHeight 和 ActualWidth 属性 return arrangeSize; } ``` 在排列元素时，不能传递无限大小的值，但可以通过传递子元素的 `DesiredSize` 属性值来给予其所需的大小，也可以给予元素比其所需更多的空间。当元素被设置为大于其所需的大小时，`HorizontalAlignment` 和 `VerticalAlignment` 属性将起作用。 #### 2. 自定义布局容器：UniformGrid `UniformGrid` 是一个自定义的布局容器，它将子元素排列成自动生成的、大小相等的单元格。与常规的 `Grid` 相比，`UniformGrid` 不需要显式定义行和列，也不需要手动将每个子元素放置在正确的单元格中。 以下是 `UniformGrid` 的类声明： ```csharp public class UniformGrid : System.Windows.Controls.Panel { ... } ``` `UniformGrid` 有两个属性 `Rows` 和 `Columns`，可以独立或组合设置，以影响其布局逻辑： - **如果同时设置了 `Rows` 和 `Columns` 属性**：`UniformGrid` 知道如何确定网格的大小，只需按比例划分可用空间以确定每个单元格的大小。如果元素数量超过单元格数量，多余的元素将不会显示。 - **如果只设置了其中一个属性**：`UniformGrid` 会计算另一个属性，假设你想显示所有内部元素。 - **如果两个属性都未设置**：`UniformGrid` 会计算这两个属性，假设你想显示所有元素并希望行和列的数量相等。如果无法精确匹配行和列的数量，`UniformGrid` 会添加一个额外的列。 以下是 `UniformGrid` 中 `CalculateColumns()` 方法的实现： ```csharp private int realColumns; private int realRows; private void CalculateColumns() { // 计算元素数量，如果面板为空则不做任何操作 double elementCount = this.Children.Count; if (elementCount == 0) return; realRows = Rows; realColumns = Columns; // 如果 Rows 和 Columns 属性已设置，则使用它们 if ((realRows != 0) && (realColumns != 0)) return; // 如果两个属性都未设置，先计算列数 if ((realColumns == 0) && realRows == 0) realColumns = (int)Math.Ceiling(Math.Sqrt(elementCount)); // 如果只设置了 Rows 属性，计算列数 if (realColumns == 0) realColumns = (int)Math.Ceiling(elementCount / realRows); // 如果只设置了 Columns 属性，计算行数 if (realRows == 0) realRows = (int)Math.Ceiling(elementCount / realColumns); } ``` 以下是 `UniformGri