WPF Grid 布局详解

Xioa.

已于 2025-04-30 09:03:04 修改

阅读量479

点赞数 10

分类专栏：轻松掌握WPF 文章标签： wpf c#

于 2025-04-29 10:10:34 首次发布

本文链接：https://blog.csdn.net/weixin_52501264/article/details/147601937

版权

轻松掌握WPF 专栏收录该内容

9 篇文章

订阅专栏

1. Grid 简介

Grid 是 WPF 中最强大的布局控件之一，它允许我们创建基于行和列的灵活布局。类似于 HTML 表格，但功能更加强大和灵活。

2. 基本用法

2.1 定义行和列

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
</Grid>

2.2 高度和宽度类型

Auto : 根据内容自动调整
* : 占用剩余空间
2* : 按比例分配（这里是占用剩余空间的2份）
固定值: 如 100

3. 元素定位

3.1 基本定位

<Grid>
    <Button Grid.Row="0" Grid.Column="0" Content="按钮1"/>
    <TextBox Grid.Row="1" Grid.Column="1" Text="文本框"/>
</Grid>

3.2 跨行跨列


    <Button Grid.Row="0" 
            Grid.Column="0" 
            Grid.RowSpan="2" 
            Grid.ColumnSpan="2" 
            Content="大按钮"/>

4. 高级特性

4.1 Grid Splitter 分割线

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="5"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <ListBox Grid.Column="0"/>
    <GridSplitter Grid.Column="1" 
                  Width="5" 
                  HorizontalAlignment="Stretch"/>
    <TextBox Grid.Column="2"/>
</Grid>

4.2 共享尺寸组

Grid.IsSharedSizeScope="True"

启用共享尺寸范围
允许在这个Grid范围内的列或行可以共享相同的尺寸
SharedSizeGroup="FirstCol"

定义了一个名为"FirstCol"的共享尺寸组
所有使用相同SharedSizeGroup名称的列将共享相同的宽度
宽度会自动调整为该组中最宽的列的宽度

<StackPanel>
    <!-- 第一个Grid -->
    <Grid Grid.IsSharedSizeScope="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="FirstCol"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="短文本"/>
        <TextBox Grid.Column="1" Text="内容1"/>
    </Grid>
    
    <!-- 第二个Grid -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="FirstCol"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="这是一个较长的文本"/>
        <TextBox Grid.Column="1" Text="内容2"/>
    </Grid>
</StackPanel>

在上面的示例中：

1. 两个Grid中的第一列都属于"FirstCol"共享组
2. 两个Grid的第一列会自动调整为相同的宽度
3. 宽度会适应最长的内容（"这是一个较长的文本"）
4. 保证了界面的对齐性和一致性
这个功能特别适用于：

创建对齐的表单布局
制作数据网格
需要多个Grid保持列宽一致的场景

5. 常见应用场景

5.1 表单布局

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
    <Label Grid.Row="0" Grid.Column="0" Content="用户名:"/>
    <TextBox Grid.Row="0" Grid.Column="1" Margin="5"/>
    
    <Label Grid.Row="1" Grid.Column="0" Content="密码:"/>
    <PasswordBox Grid.Row="1" Grid.Column="1" Margin="5"/>
    
    <Button Grid.Row="2" Grid.Column="1" 
            Content="登录" 
            HorizontalAlignment="Right" 
            Margin="5"/>
</Grid>

5.2 仪表板布局

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <Border Grid.Row="0" Grid.Column="0" Margin="5" Background="#FFE4E4">
        <TextBlock Text="面板1" HorizontalAlignment="Center"/>
    </Border>
    <Border Grid.Row="0" Grid.Column="1" Margin="5" Background="#E4FFE4">
        <TextBlock Text="面板2" HorizontalAlignment="Center"/>
    </Border>
    <Border Grid.Row="1" Grid.Column="0" Margin="5" Background="#E4E4FF">
        <TextBlock Text="面板3" HorizontalAlignment="Center"/>
    </Border>
    <Border Grid.Row="1" Grid.Column="1" Margin="5" Background="#FFE4FF">
        <TextBlock Text="面板4" HorizontalAlignment="Center"/>
    </Border>
</Grid>