WPF 筆記：ViewBox 縮放容器與 Stretch 模式詳解

ViewBox 是單一子元素的裝飾器，能將子內容**等比或非等比縮放**填充可用空間。常搭配 Canvas 使用，讓固定座標繪圖具備響應式縮放能力。

核心屬性：Stretch

經典搭配：ViewBox + Canvas

<Viewbox Stretch="Uniform">
  <Canvas Width="200" Height="100">
    <Ellipse Canvas.Left="10" Canvas.Top="10" Width="50" Height="50" Fill="Red" />
    <TextBlock Canvas.Left="70" Canvas.Top="20" Text="Hello" FontSize="16" />
  </Canvas>
</Viewbox>

Canvas 內座標為邏輯座標 (200x100)；ViewBox 根據外部空間自動縮放整個 Canvas 及其子元素，**座標關係完全保持**。

關鍵行為

• 單一子元素：ViewBox 繼承 Decorator，只能包含**一個**直接子元素。多元素請用 Grid/StackPanel 包裹後再放入。
• 不改變子元素邏輯尺寸：子元素 DesiredSize、ActualWidth 仍為邏輯值 (200x100)；縮放僅發生在渲染層 (RenderTransform 內部實現)。
• 巢狀 ViewBox：外層 Uniform、內層 Fill 等組合可產生複雜縮放行為，但極少必要。

常見誤區

1. 以為 ViewBox 是 Panel：它是 FrameworkElement → Decorator，不參與子元素佈局協商，只負責最終渲染縮放。
2. Stretch="Uniform" 時內容不居中：預設即居中 (水平/垂直)，無需額外設定。
3. ViewBox 內用 StackPanel 代替 Canvas：同樣可行，但 Canvas 絕對座標更適合「繪圖式」固定佈局。

實用場景

• **圖標庫**：SVG/Path 繪製邏輯尺寸 32x32，ViewBox 任意縮放至 16/24/48/64 像素，銳利無鋸齒。
• **響應式儀表板**：固定邏輯座標繪製圖表，外層 ViewBox Uniform 自適應視窗大小。
• **印刷預覽**：文檔邏輯尺寸 A4，ViewBox 縮放至螢幕寬度預覽。
• **動畫縮放**：對 ViewBox 寬高做動畫，內容自動跟隨縮放，比對每個子元素做 Transform 簡潔得多。

作者註：「老實說這節我沒看太懂，讓我再 try 一下」—— 實踐是檢驗真理的唯一標準，建議在 Kaxaml/LINQPad 即時調試四種 Stretch 模式差異。