在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>
图片
复杂布局示例(登录界面)
<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>
注意
- 合理使用尺寸单位
a.固定像素:用于确定大小的元素
b.Auto:根据内容自适应
c.星号(*):按比例分配剩余空间
- 避免嵌套过深
- Grid嵌套不要超过3层
- 考虑使用其他布局控件组合
- 合理使用Margin和Padding
- Margin用于控件之间的间距
- Padding用于控件内容与边框的间距
- 使用Grid.IsSharedSizeScope
- 需要对齐多个Grid的列宽时使用
- 提高布局的一致性
总结
Grid是WPF中最强大的布局控件之一,掌握Grid的使用可以帮助我们创建灵活且专业的用户界面。通过合理使用行列定义、跨行跨列、共享尺寸等特性,可以实现各种复杂的布局需求。在实际开发中,建议结合其他布局控件(如StackPanel、DockPanel等)一起使用,以达到最佳的布局效果。