布局容器与布局属性详解

### 布局容器与布局属性详解 #### 1. 布局容器基础 在进行界面设计时，布局容器起着关键作用。常见的布局容器有多种，每种都有其独特的布局方式和特点。 ##### 1.1 Grid 容器背景设置 Grid 是一种常用的布局容器，设置其背景颜色有多种方式。例如，简单的设置方式如下： ```xml <Grid x:Name="layoutRoot" Background="Red"> ``` 它等同于更详细的语法： ```xml <Grid x:Name="layoutRoot"> <Grid.Background> <SolidColorBrush Color="Red"></SolidColorBrush> </Grid.Background> </Grid> ``` 如果要使用不同类型的画刷（如线性渐变画刷）来绘制背景，则需要使用更详细的形式。若使用颜色代码，需要采用十六进制表示 R、G、B 值的语法，有 #rrggbb 或 #aarrggbb 两种格式（后者包含 alpha 值）。示例如下： ```xml <Grid x:Name="layoutRoot" Background="#FFFF0000"> ``` 这里 alpha 值为 FF（255），红色值为 FF（255），绿色和蓝色值为 0。默认情况下，布局面板的背景设置为 null 引用，如下： ```xml <Grid x:Name="layoutRoot" Background="{x:Null}"> ``` 当面板背景为 null 时，下面的内容会显示出来，但布局容器无法接收鼠标事件。需要注意的是，画刷支持自动更改通知，即更改附加到控件的画刷时，控件会相应更新。 ##### 1.2 Border 元素 布局容器可以设置背景，但不能设置边框轮廓，而 Border 元素可以弥补这一不足。Border 类很简单，它包含一个嵌套内容（通常是布局面板），并在其周围添加背景或边框。掌握 Border 元素，只需了解以下属性： | 属性名 | 描述 | | ---- | ---- | | Background | 使用画刷对象设置边框内所有内容后面的背景，可以是纯色或其他样式 | | BorderBrush | 使用画刷对象设置 Border 对象边缘的边框填充，常用纯色画刷创建实心边框 | | BorderThickness | 设置每一侧边框的宽度（以像素为单位），该属性包含 System.Windows.Thickness 结构的实例，分别对应上、下、左、右边缘 | | CornerRadius | 使边框的角变圆，值越大，圆角效果越明显 | | Padding | 在边框和内部内容之间添加间距（与 Margin 在边框外部添加间距不同） | 以下是一个围绕基本按钮的简单圆角边框示例： ```xml <Border Margin="25" Background="LightYellow" BorderBrush="SteelBlue" BorderThickness="8" CornerRadius="15"> <Button Margin="10" Content="Click Me"></Button> </Border> ``` #### 2. StackPanel 布局容器 StackPanel 是最简单的布局容器之一，它将子元素按单行或单列堆叠，元素按顺序排列。 ##### 2.1 垂直排列示例 以下是一个包含一个 TextBlock 和四个按钮的页面示例： ```xml <UserControl x:Class="Layout.SimpleStack" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel Background="White"> <TextBlock Text="A Button Stack"></TextBlock> <Button Content="Button 1"></Button> <Button Content="Button 2"></Button> <Button Content="Button 3"></Button> <Button Content="Button 4"></Button> </StackPanel> </UserControl> ``` 默认情况下，StackPanel 从上到下排列元素，每个元素的高度刚好能显示其内容。所有元素会拉伸至 StackPanel 的全宽（即页面宽度）。在这个示例中，页面的 Height 和 Width 属性未设置，页面会自适应 Silverlight 内容区域（通常是整个浏览器窗口）。通过调整浏览器窗口大小，可以观察布局容器如何自适应不同页面尺寸。 ##### 2.2 水平排列示例 通过设置 Orientation 属性，StackPanel 也可用于水平排列元素： ```xml <StackPanel Orientation="Horizontal" Background="White"> ``` 此时元素会获得最小宽度（足以容纳其文本），并拉伸至包含面板的全高。 #### 3. 布局属性 虽然布局由容器决定，但子元素也可以通过布局属性发挥作用。布局面板会尊重以下一组布局属性： | 属性名 | 描述 | | ---- | ---- | | HorizontalAlignment | 当有额外水平空间时，该属性决定子元素在布局容器内的水平位置，可选择 Center、Left、Right 或 Stretch | | VerticalAlignment | 当有额外垂直空间时，该属性决定子元素在布局容器内的垂直位置，可选择 Center、Top、Bottom 或 Stretch | | Margin | 用于在元素周围添加间距，该属性包含 System.Windows.Thickness 结构的实例，分别对应上、下、左、右边缘 | | MinWidth 和 MinHeight | 设置元素的最小尺寸，如果元素太大，会被裁剪以适应布局容器 | | MaxWidth 和 MaxHeight | 设置元素的最大尺寸，即使 HorizontalAlignment 和 VerticalAlignment 属性设置为 Stretch，元素也不会超出此范围 | | Width 和 Height | 显式设置元素的大小，此设置会覆盖 HorizontalAlignment 和 VerticalAlignment 属性的 Stretch 值，但如果超出 MinWidth、MinHeight、MaxWidth 和 MaxHeight 的范围，则不会生效 | 这些属性继承自基类 FrameworkElement，因此 Silverlight 页面中的所有图形控件都支持。 #### 4. 布局属性的应用 ##### 4.1 对齐属性 以之前的垂直 StackPanel 为例，VerticalAlignment 属性在此场景下无效，因为每个元素的高度刚好能显示其内容。而 HorizontalAlignment 属性很重要，它决定每个元素在其行中的位置。默认情况下，标签的 HorizontalAlignment 为 Left，按钮为 Stretch，所以按钮会占据整个列宽。但可以更改这些设置，示例如下： ```xml <StackPanel Background="White"> <TextBlock HorizontalAlignment="Center" Text="A But ```