XAML - 畫布面板

Canvas 面板是基本佈局面板，其中子元素可以使用相對於Canvas任何一側（例如左、右、上、下）的座標顯式定位。

Canvas 通常用於 2D 圖形元素（例如 Ellipse、Rectangle 等），但不適用於 UI 元素，因為指定絕對座標在調整 XAML 應用程式的大小、本地化或縮放時會造成麻煩。

Canvas 類的層次繼承如下：

屬性

以下是 Canvas 類常用的屬性。

序號	屬性及說明
1	背景獲取或設定填充面板內容區域的 Brush。（繼承自 Panel）
2	子元素獲取此 Panel 的子元素的 UIElementCollection。（繼承自 Panel。）
3	高度獲取或設定元素的建議高度。（繼承自 FrameworkElement。）
4	項高度獲取或設定一個值，該值指定 WrapPanel 中包含的所有項的高度。
5	項寬度獲取或設定一個值，該值指定 WrapPanel 中包含的所有項的寬度。
6	邏輯子元素獲取一個列舉器，該列舉器可以迭代此 Panel 元素的邏輯子元素。（繼承自 Panel。）
7	邏輯方向面板的方向，如果面板僅支援在一個維度上進行佈局。（繼承自 Panel。）
8	LeftProperty 標識 Canvas.Left XAML 附加屬性。
9	邊距獲取或設定元素的外邊距。（繼承自 FrameworkElement。）
10	名稱獲取或設定元素的標識名稱。名稱提供一個引用，以便程式碼隱藏（例如事件處理程式程式碼）在 XAML 處理器在處理過程中構造標記元素後引用它。（繼承自 FrameworkElement。）
11	方向獲取或設定一個值，該值指定排列子內容的維度。
12	父級獲取此元素的邏輯父元素。（繼承自 FrameworkElement。）
13	資源獲取或設定本地定義的資源字典。（繼承自 FrameworkElement。）
14	樣式獲取或設定此元素呈現時使用的樣式。（繼承自 FrameworkElement。）
15	TopProperty 標識 Canvas.Top XAML 附加屬性。
16	寬度獲取或設定元素的寬度。（繼承自 FrameworkElement。）
17	ZIndexProperty 標識 Canvas.ZIndex XAML 附加屬性。

方法

以下是 Canvas 常用的方法。

序號	方法及說明
1	GetLeft 獲取目標元素的 Canvas.Left XAML 附加屬性的值。
2	GetTop 獲取目標元素的 Canvas.Top XAML 附加屬性的值。
3	GetZIndex 獲取目標元素的 Canvas.ZIndex XAML 附加屬性的值。
4	SetLeft 設定目標元素的 Canvas.Left XAML 附加屬性的值。
5	SetTop 設定目標元素的 Canvas.Top XAML 附加屬性的值。
6	SetZIndex 設定目標元素的 Canvas.ZIndex XAML 附加屬性的值。

示例

以下示例演示如何將子元素新增到 Canvas。這是在 Canvas 內建立矩形並使用不同偏移屬性的 XAML 實現。

<Window x:Class = "XAMLCanvas.Window1" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "400" Width = "604"> 
	
   <Grid> 
      <Canvas Width = "580" Height = "360" > 
         <Rectangle Canvas.Left = "30" Canvas.Top = "30" Fill = "Red" Width = "70" Height = "40" /> 
         <Rectangle Canvas.Right = "30" Canvas.Top = "30" Fill = "Blue" Width = "70" Height = "40" /> 
         <Rectangle Canvas.Left = "30" Canvas.Bottom = "30" Fill = "Gainsboro" Width = "70" Height = "40" /> 
         <Rectangle Canvas.Right = "30" Canvas.Bottom = "30" Fill = "SaddleBrown" Width = "70" Height = "40" /> 
      </Canvas> 
   </Grid> 
	
</Window>

編譯並執行上述程式碼後，將產生以下輸出：

我們建議您執行上述示例程式碼，並嘗試一些其他屬性。

xaml_layouts.htm

列印頁面