一文掌握WPF Grid：從零基礎到界面布局大師

作者：iamrick 2025-02-27 08:05:47

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支持三種尺寸單位：

固定像素值（如 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等）一起使用，以達到最佳的布局效果。

責任編輯：武曉燕來源：技術老小子