WPF 版面配置實戰：善用 Grid 控制項打造彈性介面

從 WinForms 到 WPF：版面配置的思維轉變

習慣 Windows Forms 開發的工程師，初接觸 WPF 時常在版面配置上碰壁。WinForms 中選單、工具列、狀態列位置固定，WPF 則賦予元素任意放置的自由度。這雖利於美術設計精美介面，卻讓缺乏美感的技術人員陷入「版面難看」的困境。本文聚焦 Grid 控制項，示範如何以表格化思維快速構建結構清晰、至少不難看的 WPF 視窗。

WPF 版面控制項概覽

所有版面控制項繼承自 System.Windows.Controls.Panel，常用擴充類別包括：

• Canvas（畫布，絕對座標）
• DockPanel（停靠版面）
• Grid（表格，本文主角）
• StackPanel（堆疊版面）
• VirtualizingPanel（虛擬化堆疊）
• WrapPanel（流式換行版面）

對於 WinForms 出身者，Grid 類似 HTML <table>，最符合直覺，能滿足 90% 以上的配置需求。

實戰範例：調查系統客戶端維護工具

視窗結構規劃

將視窗劃分為 3 行 3 列的 Grid：

• 第 0 列：顯示筆數下拉選單、重新整理按鈕（跨 3 欄）
• 第 1 列：左側未發布問卷清單（第 0 欄）、中間 GridSplitter 可拖曳調整寬度（第 1 欄）、右側資料 ListView（第 2 欄）
• 第 2 列：確定、取消按鈕（跨 3 欄）

關鍵 XAML 實作

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="150"/>
    <ColumnDefinition Width="5"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="35"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="35"/>
  </Grid.RowDefinitions>

  <!-- 第 0 列：工具列區 -->
  <DockPanel Grid.ColumnSpan="3" Grid.Row="0" Height="30">
    <Label>顯示多少條目：</Label>
    <ComboBox .../>
    <Button Content="重新整理" .../>
  </DockPanel>

  <!-- 第 1 列：主內容區 -->
  <ListBox Grid.Column="0" Grid.Row="1" .../>
  <GridSplitter Grid.Column="1" Grid.Row="1" Width="10" HorizontalAlignment="Left"/>
  <ListView Grid.Column="2" Grid.Row="1" ...>
    <ListView.View>
      <GridView> ... </GridView>
    </ListView.View>
  </ListView>

  <!-- 第 2 列：按鈕區 -->
  <DockPanel Grid.ColumnSpan="3" Grid.Row="2" Height="30">
    <Button Content="確定" IsDefault="True"/>
    <Button Content="取消" IsCancel="True"/>
  </DockPanel>
</Grid>

Grid 尺寸定義的三種模式

ColumnDefinition 與 RowDefinition 的 Width/Height 屬性型別為 GridLength，支援三種語法：

比例分配示範

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="30"/>        <!-- 固定 30 像素 -->
  <ColumnDefinition Width="Auto"/>      <!-- 依內容 -->
  <ColumnDefinition Width="*"/>         <!-- 剩餘空間 -->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
  <RowDefinition Height="2*"/>         <!-- 佔 2/3 -->
  <RowDefinition Height="*"/>          <!-- 佔 1/3 -->
</Grid.RowDefinitions>

跨欄/跨列與進階技巧

• Grid.ColumnSpan、Grid.RowSpan：讓元素跨越多欄/列（如工具列跨 3 欄）
• GridSplitter：提供使用者拖曳調整欄寬/列高的能力
• 巢狀 Grid：複雜區域可在單元格內再放入 Grid 細分

總結：為什麼 Grid 是技術人員的最佳拍檔？

「以表格劃分版面，再將控制項置入對應格」的思維模型，與傳統表單設計高度一致。無需深厚美術功底，即可產出結構清晰、對齊整齊、響應式良好的介面。對於專注業務邏輯的開發者，Grid 無疑是 WPF 版面配置的首選利器。