WPF 筆記：常用佈局屬性詳解 (Margin/Padding/Transform)

WPF 佈局屬性雖繁多，掌握核心區別即可靈活驅動介面。本文聚焦 Margin/Padding 差異、LayoutTransform/RenderTransform 區別 及新版語法遷移。

Margin vs Padding：邊界 vs 內邊距

可同時使用：<Button Margin="10" Padding="5"> 外邊距 10，內邊距 5。

Transform 語法遷移 (Breaking Change)

舊版簡寫已廢棄：

<!-- 舊版 無效 -->
<Button RenderTransform="scale 3" />
<Line LayoutTransform="rotate 50" />

新版標準元素語法：

<!-- 縮放 -->
<Button>
  <Button.LayoutTransform>
    <ScaleTransform ScaleX="3" ScaleY="3" />
  </Button.LayoutTransform>
</Button>

<!-- 旋轉 -->
<Line Stroke="Blue" Y1="30" X2="100">
  <Line.LayoutTransform>
    <RotateTransform Angle="50" />
  </Line.LayoutTransform>
</Line>

LayoutTransform vs RenderTransform：佈局期 vs 渲染期

直觀理解

• LayoutTransform = 「生成前處理」：元素變大/變小/旋轉後，佈局系統重新計算位置，**超出邊界不會被裁剪**，父容器會騰出空間。
• RenderTransform = 「生成後處理」：元素在固定佈局槽位內**「畫」出來時**做矩陣變換，**超出槽位會被裁剪** (除非設定 ClipToBounds=False)，父容器佈局完全不知情。

實用建議

1. **整體縮放/旋轉且需佈局自適應** → LayoutTransform。
2. **動畫、Hover 效果、局部變形** → RenderTransform (配合 RenderTransformOrigin="0.5,0.5" 設定中心點)。
3. ScaleTransform、RotateTransform、TranslateTransform、SkewTransform 可組合 (TransformGroup)。
4. WPF 4.0+ LayoutTransform 支援所有 Transform 類型，早期版本僅支援 Scale/Rotate/Skew。

正確選擇 Transform 類型，能避免「為什麼縮放後按鈕重疊了」或「動畫播放時佈局跳動」等常見坑。