一文掌握WPF Grid：從零基礎(chǔ)到界面布局大師
作者：iamrick
Grid是WPF中最強(qiáng)大的布局控件之一，掌握Grid的使用可以幫助我們創(chuàng)建靈活且專業(yè)的用戶界面。通過合理使用行列定義、跨行跨列、共享尺寸等特性，可以實(shí)現(xiàn)各種復(fù)雜的布局需求。
在Winform中可以用Table控件實(shí)現(xiàn)，但說實(shí)話在Winform中的Table控件做的實(shí)在不好用，不少功能的邏輯實(shí)在不敢恭維。Grid（網(wǎng)格）是WPF中最靈活和最常用的布局控件之一。它允許我們將界面劃分為行和列，形成類似表格的結(jié)構(gòu)，可以精確控制元素的位置和大小。Grid非常適合創(chuàng)建復(fù)雜的用戶界面布局。這個(gè)可以說是WPF功能最全的布局控件了，這個(gè)比Winform中的Table好用太多了。。。
Grid的基本屬性
- RowDefinitions: 定義行
- ColumnDefinitions: 定義列
- Grid.Row: 設(shè)置元素所在行
- Grid.Column: 設(shè)置元素所在列
- Grid.RowSpan: 設(shè)置元素跨越的行數(shù)
- Grid.ColumnSpan: 設(shè)置元素跨越的列數(shù)
Grid的尺寸單位
Grid支持三種尺寸單位：
- 固定像素值（如 Width="100"）
- 自動(dòng)大?。ˋuto）
- 比例大?。?）
實(shí)例演示
基本網(wǎng)格布局
<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列的網(wǎng)格 -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<!-- 自動(dòng)高度 -->
<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="這是一個(gè)跨列的文本框"/>
<!-- 第三行第一列 -->
<ListBox Grid.Row="2" Grid.Column="0" Margin="5">
<ListBoxItem>列表項(xiàng)1</ListBoxItem>
<ListBoxItem>列表項(xiàng)2</ListBoxItem>
</ListBox>
<!-- 第三行第二列 -->
<Button Grid.Row="2" Grid.Column="1" Content="按鈕3" Margin="5"/>
</Grid>
</Window>
圖片
復(fù)雜布局示例（登錄界面）
<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"/>
<!-- 標(biāo)題行 -->
<RowDefinition Height="*"/>
<!-- 內(nèi)容區(qū) -->
<RowDefinition Height="Auto"/>
<!-- 按鈕行 -->
</Grid.RowDefinitions>
<!-- 標(biāo)題 -->
<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>
<!-- 按鈕區(qū)域 -->
<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
當(dāng)需要多個(gè)Grid具有相同的列寬時(shí)，可以使用SharedSize特性：
<StackPanel Grid.IsSharedSizeScope="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="FirstCol"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="標(biāo)簽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="較長(zhǎng)的標(biāo)簽2:" Margin="5"/>
<TextBox Grid.Column="1" Margin="5"/>
</Grid>
</StackPanel>
圖片
這是兩個(gè)Grid，通過SharedSizeGroup 綁定控制兩個(gè)列的寬一樣。
使用Grid分隔線
<Grid ShowGridLines="True">
<!-- 顯示網(wǎng)格線，便于開發(fā)調(diào)試 -->
</Grid>注意
- 合理使用尺寸單位
a.固定像素：用于確定大小的元素
b.Auto：根據(jù)內(nèi)容自適應(yīng)
c.星號(hào)（*）：按比例分配剩余空間
- 避免嵌套過深
- Grid嵌套不要超過3層
- 考慮使用其他布局控件組合
- 合理使用Margin和Padding
- Margin用于控件之間的間距
- Padding用于控件內(nèi)容與邊框的間距
- 使用Grid.IsSharedSizeScope
- 需要對(duì)齊多個(gè)Grid的列寬時(shí)使用
- 提高布局的一致性
總結(jié)
Grid是WPF中最強(qiáng)大的布局控件之一，掌握Grid的使用可以幫助我們創(chuàng)建靈活且專業(yè)的用戶界面。通過合理使用行列定義、跨行跨列、共享尺寸等特性，可以實(shí)現(xiàn)各種復(fù)雜的布局需求。在實(shí)際開發(fā)中，建議結(jié)合其他布局控件（如StackPanel、DockPanel等）一起使用，以達(dá)到最佳的布局效果。
責(zé)任編輯：武曉燕
來源：
技術(shù)老小子
