Canvas，DockPanel，Grid，StackPanel，WrapPanel是WPF中的5個佈局控件.每個佈局控件都有不同的應用場景.如果您要對元素進行精確的定位,那麼就需要使用Canvas了.
可以把Canvas比作一個座標系,所有的元素通過設置座標來決定其在座標系中的位置.這個座標系的原點並不是在中央,而是位於它的左上角.見下圖
元素設置座標的方法共有四個:
l Canvas.Top 設置元素距Canvas頂部的距離
l Canvas.Bottom 設置元素距Canvas底部的距離
l Canvas.Left 設置元素距Canvas左邊界的距離
l Canvas.Right 設置元素距Canvas右邊界的距離
看完了概念的介紹,作些例子加深印象吧J.
來個簡單的先
<Canvas>
<Button>button</Button>
</Canvas>
在上面的xaml中定義了一個Canvas對象,Canvas中包含了一個按鈕.
因爲沒有對按鈕進行任何定位的操作,所以按鈕位於Canvas容器的左上角(即位於原點).見下圖
現在改變一下按鈕的位置
<Canvas>
<Button Canvas.Left="20" Canvas.Top="20" Width="50" Height="20">button</Button>
</Canvas>
對比上圖,按鈕的位置爲向右下偏移了一些. 看來Canvas.Top和Canvas.Left起作用了,我們可以得知按鈕左上角座標爲(20,20)
當然還可以從上面的代碼中得到更多的信息:
l 按鈕左下角的座標 (20,40)
l 按鈕右上角的座標 (70,20)
l 按鈕右下角的座標 (70,40)
我是如何得到這些信息的呢?下面慢慢解釋:
按鈕左下角座標的x值和左上角的一樣,也爲20。其y軸座標在原有的基礎上又增加了一些:加上了按鈕的高度.所以得出了(20,40) .後面兩個座標可依此推出。
您可能還會有些疑問: Canvas.Left可以設置元素左邊距離Canvas左邊界的距離,Canvas.Rigth可以設置元素右邊距離Canvas右邊界的距離,那如果同時設置Canvas.Left屬性和Canvas.Right屬性,會出現什麼情況呢.?
看個例子您就知道了:
<Canvas>
<Button Canvas.Right="20" Canvas.Left="20">Right="20" Left="20"</Button>
</Canvas>
上圖中我們看到,在同時設置了Canvas.Left和Canvas.Right屬性的情況下,只有Canvas.Left屬性起作用，而Canvas.Right失效，實際上Canvas.Top和Canvas.Bottom同時存在時也只是Canvas.Top一個起作用)
看到這裏,估計您對元素在Canvas中的定位已經有了大致的瞭解.下面再深入的介紹一下.
上面的介紹的” 按鈕”代表沒有設置座標的元素在Canvas中的定位.也就是說這些元素的左上角座標爲（0,0）點。那麼那些擁有座標系屬性（請允許我這麼叫）的元素情況又是如何呢(擁有座標系屬性的元素：Line,Polyline,Polyline等等，或者使用Geometry對象填充的一些元素)
以Line元素爲例:
<Canvas>
<Button Canvas.Left="20" Height="20" Width="60">Left="20"</Button>
<Line X1="20" X2="20" Y1="20" Y2="100" Stroke="Black"/>
<Button Canvas.Left="20" Canvas.Top="100" Height="20" Width="60">Left="20"</Button>
</Canvas>
上面的代碼在Canvas繪製了一條起始點爲(20,20)終點爲(20,100)的黑色線段.爲了方便進行觀察,我又在Canvas中添加了兩個按鈕作爲參照.第一個按鈕的高度爲20,寬度爲60,Canvas.Left爲20..第二個按鈕的高度,寬度,Canvas.Left和第一個按鈕相同,單設置了Canvas.Top爲100. 根據計算得出：線段的起始點座標和第一個按鈕坐下角的座標一致，終點座標和第二個按鈕的左上角座標一直。實際效果也是如此：見下圖
再看一個Line的例子，在上面的基礎上再添加一條線段：
<Line X1="20" X2="20" Y1="20" Y2="100" Stroke="Red" Canvas.Left="60"/>
該線段的座標和第一條完全一樣，不同之處是設置了Canvas.Left,並將顏色改成了紅色
<Canvas>
<Button Canvas.Left="20" Height="20" Width="60">Left="20"</Button>
<Line X1="20" X2="20" Y1="20" Y2="100" Stroke="Black"/>
<Line X1="20" X2="20" Y1="20" Y2="100" Stroke="Red" Canvas.Left="60"/>
<Button Canvas.Left="20" Canvas.Top="100" Height="20" Width="60">Left="20"</Button>
</Canvas>
那麼效果會如何呢？
紅色的線段出現在黑色線段的右邊，並且與黑色線段的x軸的值相差了60.您會發現它的效果和以下代碼相同：
<Line X1="80" X2="80" Y1="20" Y2="100" Stroke="Red" />
可以看出,設置了Canvas.Left=60後，紅色線段的兩個x座標相當於均添加了60。
對設置了座標系的元素而言，Canvas.Left會均等的增加其全部座標中x軸的值;
而Canvas.Top會均等增加其全部座標中y軸的值。
文本沒有過多的涉及Canvas.Right和Canvas.Bottom。主要是因爲當Canvas沒有設置Width和Height屬性時，沒有一個所謂的“終點”作爲參照座標（對應原點來說），這樣定位元素就不是很方便了。當然您也可以通過計算Canvas.ActualWeight和Canvas.ActualHeight來計算。有興趣的朋友可以嘗試一下：）
希望本文您能從本文中獲益,感謝您的閱讀
