WPF 筆記：Grid 佈局深度解析 (列寬/共享尺寸組/附加屬性)

Grid 是 WPF 最強大、最常用的佈局容器。本文深入剖析列寬定義模式、跨列/跨行、Z-Index 堆疊、共享尺寸組解決多 Grid 對齊難題，並解析附加屬性機制。

列寬/行高三大模式

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="50" />        <!-- 1. 固定像素 -->
  <ColumnDefinition Width="Auto" />       <!-- 2. 自動適應內容 -->
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition Width="2*" />        <!-- 3. 比例分配 (2份) -->
  <ColumnDefinition Width="*" />         <!-- 3. 比例分配 (1份) -->
</Grid.ColumnDefinitions>

附加屬性機制

子元素透過 Grid.Row, Grid.Column, Grid.RowSpan, Grid.ColumnSpan 指定位置 — 這是 **附加屬性** 經典應用：
定義在父容器 (Grid)，賦值在子元素 (Button 等)。

跨列/跨行與 Z-Index 堆疊

<Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">A</Button> <!-- 跨兩列 -->
<Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2">D</Button>   <!-- 跨兩行 -->

• 單元格合併 ≠ HTML colspan/rowspan：Grid 只是讓元素**跨越**多個邏輯單元格，**原單元格仍存在**，其他元素仍可佔用，按 XAML 出現順序 (Z-Index) 疊加。
• 這意味著可構建「重疊式佈局」，如水印、浮層、複雜對齊。

共享尺寸組：多 Grid 列寬同步

問題場景

標題列 Grid + 資料列 Grid (含 ScrollViewer)。滾動時標題固定，但兩 Grid 列寬不同步導致欄位錯位。

解決方案

<DockPanel Grid.IsSharedSizeScope="True"> <!-- 1. 定義共享作用域 -->
  <!-- 標題 Grid -->
  <Grid DockPanel.Dock="Top">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
      <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
      <ColumnDefinition Width="Auto" /> <!-- 滾動條佔位 -->
    </Grid.ColumnDefinitions>
    <Border Grid.Column="2" Grid.ColumnSpan="2" ...><TextBlock>Rank</TextBlock></Border>
    <FrameworkElement Grid.Column="3" Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />
  </Grid>

  <!-- 資料 Grid (在 ScrollViewer 內) -->
  <ScrollViewer>
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
        <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
      </Grid.ColumnDefinitions>
      <!-- 資料行 -->
    </Grid>
  </ScrollViewer>
</DockPanel>

關鍵點解析

1. Grid.IsSharedSizeScope="True"：在共同祖先 (DockPanel) 開啟共享作用域，**隔離外部同名群組**。
2. SharedSizeGroup="Location"：同群組的所有 Auto 列/行，**取最大 DesiredSize** 統一寬高。
3. 標題 Grid 第 4 列**佔位滾動條寬度**：
   Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" 動態獲取系統滾動條寬度。
   因 Rank 跨列 (ColumnSpan=2) 包含此佔位列，Rank 寬度 = 內容寬 + 滾動條寬，從而帶動第 1 列 (*) 對齊。
4. DynamicResource vs StaticResource：系統參數可能隨主題/DPI 變化，必須用 DynamicResource 即時追蹤。

實用技巧匯總

• ShowGridLines="True"：調試神器，顯示網格線。
• Star 分配精度：剩餘空間像素不可整除時，WPF 按比例分配整數像素，最後一列吸收誤差。
• 嵌套 Grid：複雜佈局常嵌套 Grid，內層獨立定義 Row/Column，不受外層影響。
• GridSplitter：拖動調整列寬/行高，需放在獨立列/行且 ResizeBehavior 設定正確。

Grid 看似簡單，實則蘊含「約束求解器」般的佈局智慧，精通其機制是 WPF 佈局大師的必修課。