您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> 關於.NET

WPF 筆記：Canvas 絕對定位佈局與 ClipToBounds 裁剪

編輯：關於.NET

Canvas 是 WPF 最原始的佈容器，提供**絕對座標定位**。書作者不建議常規 UI 使用 (因內容尺寸常隨字體/圖片動態變化)，但特定場景 (繪圖、遊戲、拖放、固定版面) 不可或缺。

定位屬性

Canvas.Left / Canvas.Right：距左/右邊緣距離 (互斥，優先 Left)。
Canvas.Top / Canvas.Bottom：距頂/底邊緣距離 (互斥，優先 Top)。
未設定者預設為 0。

代碼示例：雙錨點定位

<Canvas Background="Yellow">
  <TextBlock Canvas.Left="10" Canvas.Top="20">Hello</TextBlock>
  <TextBlock Canvas.Right="10" Canvas.Bottom="20">world!</TextBlock>
</Canvas>

行為觀察：調整視窗大小，第二個 TextBlock 位置隨之變化，**但與右/底邊緣距離恆定 (10, 20)**。這是「右/底錨點」特性。

ClipToBounds：內容裁剪開關

<Canvas Background="Yellow" ClipToBounds="True">
  <Ellipse Canvas.Left="80" Canvas.Top="80" Width="100" Height="100" Fill="Red" />
</Canvas>
<!-- Canvas 150x150 時，圓形右下 1/4 被裁剪 -->

配合 ViewBox 實現響應式固定佈局

<Viewbox Stretch="Uniform">
  <Canvas Width="800" Height="600">
    <!-- 固定座標繪圖/佈局 -->
  </Canvas>
</Viewbox>

邏輯座標系 (800x600) 固定不變，ViewBox 負責整體縮放適配螢幕，結合兩者優點。

Z-Index 控制重疊順序

<Canvas>
  <Rectangle Canvas.Left="10" Canvas.Top="10" Width="50" Height="50" Fill="Red" Canvas.ZIndex="1" />
  <Rectangle Canvas.Left="30" Canvas.Top="30" Width="50" Height="50" Fill="Blue" Canvas.ZIndex="2" /> <!-- 覆蓋紅色 -->
</Canvas>