WPF记录布局组件及属性

 WPF (Windows Presentation Foundation) 提供了多种布局组件，用于控制UI元素的排列方式。以下是常用的布局组件及其重要属性：

1. Grid (网格布局)

最常用的布局容器，以行和列的形式组织元素。

常用属性：

• RowDefinitions - 定义行的集合

• ColumnDefinitions - 定义列的集合

• Grid.Row (附加属性) - 指定元素所在的行

• Grid.Column (附加属性) - 指定元素所在的列

• Grid.RowSpan (附加属性) - 元素跨越的行数

• Grid.ColumnSpan (附加属性) - 元素跨越的列数

• ShowGridLines - 是否显示网格线(调试用)

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="2*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <Button Grid.Row="0" Grid.Column="0" Content="按钮1"/>
    <Button Grid.Row="1" Grid.Column="1" Content="按钮2"/>
</Grid>

2. StackPanel (堆栈面板)

按水平或垂直方向依次排列子元素。

常用属性：

• Orientation - 排列方向 (Horizontal/Vertical)

• Margin - 外边距

• Padding - 内边距

 

<StackPanel Orientation="Horizontal">
    <Button Content="按钮1"/>
    <Button Content="按钮2"/>
    <Button Content="按钮3"/>
</StackPanel>

3. DockPanel (停靠面板)

子元素可以停靠在面板的各个边缘。

常用属性：

• LastChildFill - 最后一个子元素是否填充剩余空间

• Dock (附加属性) - 指定子元素的停靠位置 (Left/Right/Top/Bottom)

<DockPanel LastChildFill="True">
    <Button DockPanel.Dock="Top" Content="顶部"/>
    <Button DockPanel.Dock="Left" Content="左侧"/>
    <Button Content="填充剩余空间"/>
</DockPanel>

4. WrapPanel (自动换行面板)

当空间不足时自动换行或换列。

常用属性：

• Orientation - 排列方向 (Horizontal/Vertical)

• ItemWidth - 统一设置子项宽度

• ItemHeight - 统一设置子项高度

<WrapPanel>
    <Button Content="按钮1"/>
    <Button Content="按钮2"/>
    <!-- 当空间不足时自动换行 -->
</WrapPanel>

5. Canvas (画布)

通过绝对坐标定位子元素。

常用属性：

• Canvas.Left (附加属性) - 距离左侧的位置

• Canvas.Top (附加属性) - 距离顶部的位置

• Canvas.Right (附加属性) - 距离右侧的位置

• Canvas.Bottom (附加属性) - 距离底部的位置

• ZIndex (附加属性) - 控制重叠元素的显示顺序

<Canvas>
    <Button Canvas.Left="50" Canvas.Top="30" Content="按钮"/>
</Canvas>

6. UniformGrid (均匀网格)

所有单元格大小相同的网格布局。

常用属性：

• Rows - 行数

• Columns - 列数

• FirstColumn - 第一行的起始列(用于不规则排列)

 

<UniformGrid Rows="2" Columns="3">
    <Button Content="1"/>
    <Button Content="2"/>
    <!-- 共6个按钮，2行3列均匀分布 -->
</UniformGrid>

7. Viewbox (视图框)

自动缩放其内容以适应可用空间。

常用属性：

• Stretch - 缩放模式 (None/Fill/Uniform/UniformToFill)

• StretchDirection - 缩放方向 (Both/UpOnly/DownOnly)

<Viewbox Stretch="Uniform">
    <Button Content="自动缩放的按钮"/>
</Viewbox>

通用布局属性

所有布局组件都继承自Panel类，具有以下通用属性：

• Background - 背景色

• Width/Height - 宽度/高度

• MinWidth/MinHeight - 最小尺寸

• MaxWidth/MaxHeight - 最大尺寸

• HorizontalAlignment - 水平对齐方式

• VerticalAlignment - 垂直对齐方式

• Margin - 外边距

• Padding - 内边距

• Visibility - 可见性

选择布局组件时，应根据界面需求选择最合适的容器，也可以嵌套使用多种布局组件来实现复杂界面。