深入解析Silverlight布局容器：从基础到高级应用

### 深入解析Silverlight布局容器：从基础到高级应用 #### 1. 元素大小设置 在布局设计中，每个元素都有 `Height` 和 `Width` 属性，可用于明确设置其大小。不过，多数情况下让元素自适应内容大小更佳。例如，按钮会随文本增加而扩展。必要时，可通过设置最大和最小尺寸将元素锁定在可接受的范围内。若添加尺寸信息，可能会使布局变得脆弱，无法适应变化，甚至截断无法适配的内容。 以下是一个示例，设置 `StackPanel` 中按钮的最大和最小宽度： ```xml <StackPanel Margin="3"> <TextBlock Margin="3" HorizontalAlignment="Center" Text="A Button Stack"></TextBlock> <Button Margin="3" MaxWidth="300" MinWidth="200" Content="Button 1"></Button> <Button Margin="3" MaxWidth="300" MinWidth="200" Content="Button 2"></Button> <Button Margin="3" MaxWidth="300" MinWidth="200" Content="Button 3"></Button> <Button Margin="3" MaxWidth="300" MinWidth="200" Content="Button 4"></Button> </StackPanel> ``` 当 `StackPanel` 为未硬编码尺寸的按钮确定大小时，会考虑以下因素： - **最小尺寸**：按钮始终至少与最小尺寸一样大。 - **最大尺寸**：按钮始终小于最大尺寸（除非错误地将最大尺寸设置得小于最小尺寸）。 - **内容**：若按钮内的内容需要更大宽度，`StackPanel` 会尝试增大按钮。 - **容器大小**：若最小宽度大于 `StackPanel` 的宽度，按钮的一部分将被截断。若未设置最小宽度（或小于 `StackPanel` 的宽度），即使按钮无法容纳所有文本，也不会允许其比 `StackPanel` 更宽。 - **水平对齐方式**：由于按钮默认使用 `HorizontalAlignment` 的 `Stretch` 值，`StackPanel` 会尝试增大按钮以填充 `StackPanel` 的整个宽度。 理解这一过程的关键在于，最小和最大尺寸设定了绝对边界。在这些边界内，`StackPanel` 会尽量尊重按钮的期望大小（以适应其内容）和对齐设置。 #### 2. 实际渲染尺寸获取 在某些情况下，可能需要使用代码检查页面中元素的实际大小。`Height` 和 `Width` 属性表示的是期望的大小设置，可能与实际渲染尺寸不符。可通过读取 `ActualHeight` 和 `ActualWidth` 属性来获取元素的实际渲染尺寸，但需注意，当页面大小或内容改变时，这些值可能会发生变化。 #### 3. WrapPanel 和 DockPanel 仅靠 `StackPanel` 难以创建逼真的用户界面，它需要与其他更强大的布局容器配合使用，才能组装出完整的窗口。 ##### 3.1 WrapPanel `WrapPanel` 可在可用空间中逐行或逐列布局控件。默认情况下，`WrapPanel.Orientation` 属性设置为 `Horizontal`，控件从左到右排列，然后换行。也可将其设置为 `Vertical` 以实现多列布局。 以下是一个示例，将不同对齐方式的按钮放置在 `WrapPanel` 中： ```xml <toolkit:WrapPanel Margin="3"> <Button VerticalAlignment="Top" Content="Top Button"></Button> <Button MinHeight="60" Content="Tall Button"></Button> <Button VerticalAlignment="Bottom" Content="Bottom Button"></Button> <Button Content="Stretch Button"></Button> <Button VerticalAlignment="Center" Content="Centered Button"></Button> </toolkit:WrapPanel> ``` 在水平模式下，`WrapPanel` 会创建一系列虚拟行，每行的高度为该行中最高元素的高度。其他控件可根据 `VerticalAlignment` 属性进行拉伸或对齐。 `WrapPanel` 是 Silverlight 五种布局容器中，其效果无法通过巧妙使用 `Grid` 来复制的容器。 ##### 3.2 DockPanel `DockPanel` 可将控件拉伸到其外边缘之一。子元素通过名为 `Dock` 的附加属性选择停靠的边，该属性可设置为 `Left`、`Right`、`Top` 或 `Bottom`。 以下是一个示例，在 `DockPanel` 的每一侧放置一个按钮： ```xml <toolkit:DockPanel LastChildFill="True"> < ```