一文掌握WPF Grid：从零基础到界面布局大师-51CTO.COM

在Winform中可以用Table控件实现，但说实话在Winform中的Table控件做的实在不好用，不少功能的逻辑实在不敢恭维。Grid（网格）是WPF中最灵活和最常用的布局控件之一。它允许我们将界面划分为行和列，形成类似表格的结构，可以精确控制元素的位置和大小。Grid非常适合创建复杂的用户界面布局。这个可以说是WPF功能最全的布局控件了，这个比Winform中的Table好用太多了。。。

Grid的基本属性

RowDefinitions: 定义行
ColumnDefinitions: 定义列
Grid.Row: 设置元素所在行
Grid.Column: 设置元素所在列
Grid.RowSpan: 设置元素跨越的行数
Grid.ColumnSpan: 设置元素跨越的列数

Grid的尺寸单位

Grid支持三种尺寸单位：

固定像素值（如 Width="100"）
自动大小（Auto）
比例大小（*）

实例演示

基本网格布局

<Window x:Class="AppGrid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AppGrid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <!-- 定义3行2列的网格 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <!-- 自动高度 -->
            <RowDefinition Height="*"/>
            <!-- 占用剩余空间 -->
            <RowDefinition Height="100"/>
            <!-- 固定高度100像素 -->
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <!-- 占用2份宽度 -->
            <ColumnDefinition Width="*"/>
            <!-- 占用1份宽度 -->
        </Grid.ColumnDefinitions>

        <!-- 第一行第一列 -->
        <Button Grid.Row="0" Grid.Column="0" Content="按钮1" Margin="5"/>

        <!-- 第一行第二列 -->
        <Button Grid.Row="0" Grid.Column="1" Content="按钮2" Margin="5"/>

        <!-- 第二行第一列，跨两列 -->
        <TextBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 
                 Margin="5" TextWrapping="Wrap" 
                 Text="这是一个跨列的文本框"/>

        <!-- 第三行第一列 -->
        <ListBox Grid.Row="2" Grid.Column="0" Margin="5">
            <ListBoxItem>列表项1</ListBoxItem>
            <ListBoxItem>列表项2</ListBoxItem>
        </ListBox>

        <!-- 第三行第二列 -->
        <Button Grid.Row="2" Grid.Column="1" Content="按钮3" Margin="5"/>
    </Grid>
</Window>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

图片

复杂布局示例（登录界面）

<Window x:Class="AppGrid.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AppGrid"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="800">
    <Grid>
        <!-- 定义行 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <!-- 标题行 -->
            <RowDefinition Height="*"/>
            <!-- 内容区 -->
            <RowDefinition Height="Auto"/>
            <!-- 按钮行 -->
        </Grid.RowDefinitions>

        <!-- 标题 -->
        <TextBlock Grid.Row="0" Text="用户登录" 
                   FontSize="24" HorizontalAlignment="Center" 
                   Margin="0,20,0,20"/>

        <!-- 登录表单Grid -->
        <Grid Grid.Row="1" Margin="20">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="10"/>
                <!-- 间隔 -->
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!-- 用户名行 -->
            <TextBlock Grid.Row="0" Grid.Column="0" Text="用户名："
                       VerticalAlignment="Center" Margin="0,0,10,0"/>
            <TextBox Grid.Row="0" Grid.Column="1" Height="25"/>

            <!-- 密码行 -->
            <TextBlock Grid.Row="2" Grid.Column="0" Text="密码："
                       VerticalAlignment="Center" Margin="0,0,10,0"/>
            <PasswordBox Grid.Row="2" Grid.Column="1" Height="25"/>
        </Grid>

        <!-- 按钮区域 -->
        <StackPanel Grid.Row="2" Orientation="Horizontal" 
                    HorizontalAlignment="Center" Margin="0,0,0,20">
            <Button Content="登录" Width="80" Height="30" Margin="0,0,20,0"/>
            <Button Content="取消" Width="80" Height="30"/>
        </StackPanel>
    </Grid>
</Window>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

图片

Grid布局技巧

使用Grid.IsSharedSizeScope

当需要多个Grid具有相同的列宽时，可以使用SharedSize特性：

<StackPanel Grid.IsSharedSizeScope="True">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="FirstCol"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="标签1:" Margin="5"/>
        <TextBox Grid.Column="1" Margin="5"/>
    </Grid>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="FirstCol"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="较长的标签2:" Margin="5"/>
        <TextBox Grid.Column="1" Margin="5"/>
    </Grid>
</StackPanel>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

图片

这是两个Grid，通过SharedSizeGroup 绑定控制两个列的宽一样。

使用Grid分隔线

<Grid ShowGridLines="True">
    <!-- 显示网格线，便于开发调试 -->
</Grid>1.
2.
3.

注意

合理使用尺寸单位

a.固定像素：用于确定大小的元素

b.Auto：根据内容自适应

c.星号（*）：按比例分配剩余空间

避免嵌套过深

Grid嵌套不要超过3层
考虑使用其他布局控件组合

合理使用Margin和Padding

Margin用于控件之间的间距
Padding用于控件内容与边框的间距

使用Grid.IsSharedSizeScope

需要对齐多个Grid的列宽时使用
提高布局的一致性

总结

Grid是WPF中最强大的布局控件之一，掌握Grid的使用可以帮助我们创建灵活且专业的用户界面。通过合理使用行列定义、跨行跨列、共享尺寸等特性，可以实现各种复杂的布局需求。在实际开发中，建议结合其他布局控件（如StackPanel、DockPanel等）一起使用，以达到最佳的布局效果。