WPF 筆記：佈局容器概覽 (Panel/DockPanel/StackPanel/Grid/Canvas)

WPF 佈局系統核心是 **Panel** 抽象基類及其四大具體實現。本文作為第 2 章引子，速覽四大容器特性與 Grid 表格佈局語法，並介紹**附加屬性** 機制。

四大 Panel 容器速查

Grid 表格佈局語法 (VS 預設容器)

<Window>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition /> <RowDefinition /> <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">A</Button>
    <Button Grid.Row="0" Grid.Column="2">C</Button>
    <Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2">D</Button>
    <Button Grid.Row="1" Grid.Column="1">E</Button>
    <Button Grid.Row="1" Grid.Column="2">F</Button>
    <Button Grid.Row="2" Grid.Column="1">H</Button>
    <Button Grid.Row="2" Grid.Column="2">I</Button>
  </Grid>
</Window>

• **定義順序**：先 `` 再 ``，最後放置子元素。
• **附加屬性**：`Grid.Row`、`Grid.Column`、`Grid.RowSpan`、`Grid.ColumnSpan` 定義在 **父 Grid**，賦值在 **子元素** — 經典附加屬性模式。
• **預設行/列**：不指定寬高時為 `` = `Height="*"` (比例分配)。

Grid 在按鈕內容佈局中的應用

<Button Width="100" Height="100">
  <Button.Content>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition /> <RowDefinition />
      </Grid.RowDefinitions>
      <Image Grid.Row="0" Source="tom.png" />
      <TextBlock Grid.Row="1" HorizontalAlignment="Center">Tom</TextBlock>
    </Grid>
  </Button.Content>
</Button>

圖片上、文字下，標準「圖文卡片」佈局。

附加屬性設計意圖

**為何不用子元素自身屬性？**
佈局容器 (Grid/DockPanel/Canvas) 定義「槽位」，子元素 (Button/Image/TextBlock) 只需宣告「我要去哪個槽位」。
若每個控制項都自帶 `GridRow`、`Dock` 屬性，會污染控制項模型、違反單一職責。附加屬性實現 **佈局邏輯與控制項解耦** — 任意 `FrameworkElement` 皆可放入 Grid，無需修改控制項代碼。

下一章預告

第 2 章將深入各容器：
2.2 DockPanel、2.3 StackPanel、2.4 Grid (詳細)、2.5 Canvas、2.6 ViewBox、2.7 文字佈局、2.8 常用屬性、2.9-2.10 自定義佈局。

選對容器，佈局事半功倍 — Grid 是瑞士刀，DockPanel 是骨架，StackPanel 是堆疊，Canvas 是畫布。