WPF 深入系列.2.布局系统.布局控件.Grid

攻城狮CSU2025-09-29 2:32

WPF (Windows Presentation Foundation) 中的 Grid 控件是一个非常强大的布局控件，它允许你在行和列中定义子控件的布局。Grid 的使用可以说是 WPF 中最常见和重要的技能之一，以下是其详细使用教程：

1. 基本概念

Grid 是一种基于网格的布局系统，它将布局区域划分为行和列。通过设置控件在 Grid 中的 Row 和 Column 属性，你可以将控件放置在特定的行和列中。

2. 创建 Grid

要创建一个 Grid，你可以在 XAML 中定义它，并指定它的行和列

复制代码

<!--定义网格，此处显示了网格线-->
<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="2*"> </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0" FontSize="16">Top Left</Button>
    <Button Grid.Row="0" Grid.Column="1" FontSize="16">Middle Left</Button>
    <Button Grid.Row="1" Grid.Column="2" FontSize="16" Margin="8">Button Right</Button>
    <Button Grid.Row="1" Grid.Column="1" FontSize="16" HorizontalAlignment="Left">Button Middle</Button>
</Grid>

在上面的代码中，Grid 有两行和两列：

RowDefinition 和 ColumnDefinition 用于定义行和列。

Height="Auto" 表示该行的高度根据内容自适应。
Height="*" 表示该行将占用剩余的空间。
Width="120" 定义列的宽度为120像素。
Width="*" 表示该列将占用剩余的空间1/3。

Width="2*" 表示该列将占用剩余的空间2/3。

将控件放入 `Grid` 中时，可以使用 `Grid.Row` 和 `Grid.Column` 附加属性来指定控件所在的行和列。

有时候你可能需要让一个控件跨越多个行或列，这时可以使用 `Grid.RowSpan` 和 `Grid.ColumnSpan` 属性。

最终效果如下：

第二行第二列设置了HorizonAlign=Left 同时大小是Auto ,大小自适应，水平居左对齐

第二行第三列设置了Margin 属性控制外边距