WPF 筆記：繪圖基礎與按鈕內容混排 (Canvas/Path/ScaleTransform)

WPF 繪圖核心在於 **幾何體 + 筆刷/畫筆**，且可任意嵌入控制項內容。本文修正書中過時語法，展示在 Button 中混排 Canvas 繪圖笑臉與文字，並應用 ScaleTransform 整體放大。

修正後完整代碼 (測試通過)

<Button>
  <Button.LayoutTransform>
    <ScaleTransform ScaleX="3" ScaleY="3" /> <!-- 整體放大 3 倍 -->
  </Button.LayoutTransform>
  <StackPanel Orientation="Horizontal">
    <Canvas Width="20" Height="18" VerticalAlignment="Center">
      <!-- 臉部輪廓 -->
      <Ellipse Canvas.Left="1" Canvas.Top="1" Width="16" Height="16" Fill="Yellow" Stroke="Black" />
      <!-- 左眼 -->
      <Ellipse Canvas.Left="4.5" Canvas.Top="5" Width="2.5" Height="3" Fill="Black" />
      <!-- 右眼 -->
      <Ellipse Canvas.Left="11" Canvas.Top="5" Width="2.5" Height="3" Fill="Black" />
      <!-- 嘴巴：弧線 Path -->
      <Path Data="M 5,10 A 3,3 0 0 0 13,10" Stroke="Blue" />
    </Canvas>
    <TextBlock VerticalAlignment="Center">Click! </TextBlock>
  </StackPanel>
</Button>

關鍵技術點

1. Button.Content 複合內容：Button 繼承 ContentControl，可包含**任意單一元素** (此處為 StackPanel)。StackPanel 內再橫向排列 Canvas + TextBlock。
2. Canvas 絕對定位繪圖：Canvas.Left/Top 精確控制幾何體位置。Width/Height 定義畫布邏輯尺寸 (20x18)。
3. 基本圖形：Ellipse (橢圓/圓)、Rectangle、Line、Polygon、Polyline、Path (最強，支援 Path Markup Language)。
4. Path Mini-Language：Data="M 5,10 A 3,3 0 0 0 13,10"
   - M = MoveTo (5,10)
   - A = ArcTo: 半徑 (3,3), xAxisRotation=0, isLargeArc=0, sweepDirection=0 (順時針), 終點 (13,10)
   繪製一個向下的微笑弧。
5. LayoutTransform vs RenderTransform：此處用 LayoutTransform 整體放大，**佈局階段生效**，父容器會按放大後尺寸 (60x54) 分配空間。若用 RenderTransform，按鈕佈局槽位不變，放大後會被裁剪。
6. VerticalAlignment="Center"：Canvas 與 TextBlock 在 StackPanel 中垂直置中對齊。

語法遷移提醒

延伸：幾何體 vs Shape

• Shape (Ellipse, Path...)：繼承 FrameworkElement，可直接放入 UI 樹，有筆刷/畫筆屬性，參與佈局/命中測試/事件。
• Geometry (EllipseGeometry, PathGeometry...)：純幾何定義，**非 UI 元素**，輕量，用於 Path.Data, DrawingContext, Clip, GeometryDrawing 等繪圖上下文。
• 複雜繪圖首選 Geometry + DrawingVisual (可視化層) 效能最優。

掌握 Canvas + Shape + Transform 組合，即可構建豐富的矢量圖形 UI，且完美適配高 DPI 縮放。