WPF 筆記：DockPanel 停靠佈局與 LastChildFill 自動填充

DockPanel 將 WinForms 的 Dock 屬性提升為**容器級佈局策略** — 子元素宣告停靠邊緣，容器按順序分配剩餘空間。適合**頁面級大區塊佈局** (頂部工具列、底部狀態列、左側導航、右側屬性、中間工作區)。

基本語法

<DockPanel LastChildFill="True">
  <Button DockPanel.Dock="Left">Left</Button>
  <Button DockPanel.Dock="Right">Right</Button>
  <Button DockPanel.Dock="Top">Top</Button>
  <Button DockPanel.Dock="Bottom">Bottom</Button>
  <Button>Fill (Center)</Button> <!-- 最後一個，自動填滿 -->
</DockPanel>

關鍵屬性：LastChildFill

• True (預設)：最後一個子元素**不需設定 Dock**，自動佔據所有剩餘空間。
• False：最後一個子元素**必須**設定 Dock，否則 XAML 編譯報錯 (「最後一個子元素必須有 Dock 或 LastChildFill=True」)。
• 作者測試：不設定默認為 True；設為 False 會導致編譯錯誤 (而非運行時)。

停靠順序決定佈局結果

子元素**按 XAML 聲明順序**依次停靠，每個元素佔據當前剩餘空間的邊緣條帶：

1. 第一個 Dock="Left" → 佔左側條帶，剩餘空間縮減。
2. 第二個 Dock="Top" → 佔剩餘空間頂部條帶。
3. ...以此類推。
4. 最後剩餘矩形區域 → 留給最後一個元素 (若 LastChildFill=True)。

順序不同，佈局截然不同 — 設計時需精心安排聲明順序。

頁面級佈局最佳實踐

<DockPanel LastChildFill="True">
  <ToolBarTray DockPanel.Dock="Top">...</ToolBarTray>      <!-- 頂部工具列 -->
  <StatusBar DockPanel.Dock="Bottom">...</StatusBar>    <!-- 底部狀態列 -->
  <TreeView DockPanel.Dock="Left" Width="200">...</TreeView> <!-- 左側導航 -->
  <ContentControl /> <!-- 中央工作區，自動填滿 -->
</DockPanel>

對比：DockPanel vs Grid

常見坑點

1. 忘記 LastChildFill：預設 True 通常無感，但若有意隱藏中心區需設 False 並給所有元素 Dock。
2. DockPanel.Dock 寫在父容器上：❌ `` → ✅ 寫在**子元素**上：``。
3. 寬高未設定導致塌陷：Dock="Left/Right" 元素若無 Width，寬度塌陷為 0 (內容為空時)；建議給側邊欄固定 Width/MinWidth。

DockPanel 是「全局觀」佈局容器 — 一眼望去，頁面骨架清晰可見。