WPF中Grid的用法

基本概念

• 行（Row）和列（Column） ：Grid 控件通过定义行和列来组织布局。
• 单元格 ：每个行和列的交叉点称为一个单元格，控件可以被放置在单元格内。
• 跨越行和列 ：Grid 允许控件跨越多个行或列。
• 自动尺寸调整 ：Grid 的行和列可以根据内容自动调整大小，也可以固定大小或按照比例分配空间。

Grid.RowDefinitions 和 Grid.ColumnDefinitions

• RowDefinitions 用于定义行的属性。
• ColumnDefinitions 用于定义列的属性。

每个 RowDefinition 和 ColumnDefinition 可以设置高度或宽度，通常有三种常见的设置方式：

1. Auto ：根据控件的内容自动调整大小。
2. ***（星号）**: 使用星号表示剩余空间，多个 * 表示按比例分配剩余空间。例如，* 表示占据所有剩余空间，2* 表示占据两倍的剩余空间。
3. 固定大小 : 可以指定具体的数值（如 100 表示 100 像素）。

放置控件

• 可以使用 Grid.Row 和 Grid.Column 附加属性来指定控件放置在哪一行或哪一列。
• 索引从 0 开始，因此 Grid.Row="0" 和 Grid.Column="0" 指的是第一行和第一列。

控件跨越多行或多列

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <!-- 第一个按钮跨越两列 -->
    <Button Content="Button 1" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
    
    <!-- 第二个按钮跨越两行 -->
    <Button Content="Button 2" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2"/>
</Grid>

在这个示例中：

• Button 1 跨越了第一行的两列，因此它占据了第一行的整个宽度。
• Button 2 跨越了第二列的两行。

Grid 中控件的对齐和边距

使用 HorizontalAlignment 和 VerticalAlignment 控制子控件在单元格中的对齐方式。

<Button Content="Centered" HorizontalAlignment="Center" VerticalAlignment="Center"/>

• HorizontalAlignment 可以设置为 Left、Right、Center 或 Stretch。
• VerticalAlignment 可以设置为 Top、Bottom、Center 或 Stretch。

此外，Margin 可以用来控制控件和单元格边缘之间的距离：

<Button Content="With Margin" Margin="10,20,10,20"/>

Margin 值为 Left, Top, Right, Bottom，表示四个方向上的间距。