一文掌握WPF Grid:从零基础到界面布局大师

开发 前端
Grid是WPF中最强大的布局控件之一,掌握Grid的使用可以帮助我们创建灵活且专业的用户界面。通过合理使用行列定义、跨行跨列、共享尺寸等特性,可以实现各种复杂的布局需求。

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

Grid的基本属性

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

Grid的尺寸单位

Grid支持三种尺寸单位:

  1. 固定像素值(如 Width="100")
  2. 自动大小(Auto)
  3. 比例大小(*)

实例演示

基本网格布局

<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>

图片图片

复杂布局示例(登录界面)

<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>

图片图片

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>

图片图片

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

使用Grid分隔线

<Grid ShowGridLines="True">
    <!-- 显示网格线,便于开发调试 -->
</Grid>

注意

  1. 合理使用尺寸单位

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

b.Auto:根据内容自适应

c.星号(*):按比例分配剩余空间

  1. 避免嵌套过深
  • Grid嵌套不要超过3层
  • 考虑使用其他布局控件组合
  1. 合理使用Margin和Padding
  • Margin用于控件之间的间距
  • Padding用于控件内容与边框的间距
  1. 使用Grid.IsSharedSizeScope
  • 需要对齐多个Grid的列宽时使用
  • 提高布局的一致性

总结

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

责任编辑:武晓燕 来源: 技术老小子
相关推荐

2017-11-28 15:20:27

Python语言编程

2018-08-31 14:51:30

人工智能深度学习机器学习

2017-10-18 17:16:59

ZeroHeroPython

2020-10-20 14:50:26

Python数字字符串

2023-10-26 08:25:39

KubernetesKubeadm

2020-11-23 09:46:18

Java方法权限

2023-12-21 17:11:21

Containerd管理工具命令行

2022-12-20 07:39:46

2022-10-21 17:24:34

契约测试定位

2021-05-12 18:22:36

Linux 内存管理

2023-10-24 11:44:21

2022-09-27 13:34:49

splice零拷贝原理

2022-04-26 06:04:11

零信任网络安全

2020-10-09 07:56:52

Linux

2023-12-15 09:45:21

阻塞接口

2019-06-23 15:21:42

Google谷歌平板

2025-02-06 13:18:15

2023-09-18 08:02:45

CSS布局属性

2023-10-26 16:27:50

前端 WebCSS开发

2023-03-10 07:57:26

点赞
收藏

51CTO技术栈公众号