WPF之路——Canvas布局(畫布)

 Canvas為容器控件，用於定位

1.基本應用

可以把Canvas比作一個坐標系,所有的元素通過設置坐標來決定其在坐標系中的位置.這個坐標系的原點並不是在中央,而是位於它的左上角.見下圖

 

元素設置坐標的方法共有四個:

        Canvas.Top     設置元素距Canvas頂部的距離

        Canvas.Bottom  設置元素距Canvas底部的距離

        Canvas.Left     設置元素距Canvas左邊界的距離

        Canvas.Right    設置元素距Canvas右邊界的距離

[html]  view plain  copy

 

 

<Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2">  
    <Canvas Background="LightBlue" Width="400" Height="400">  
      <Button Canvas.Top="50">Canvas.Top="50"</Button>  
      <Button Canvas.Bottom="50">Canvas.Bottom="50"</Button>  
      <Button Canvas.Left="50">Canvas.Left="50"</Button>  
      <Button Canvas.Right="50">Canvas.Right="50"</Button>  
    </Canvas>  
  </Border>   

 

2.當同時設置left和right,top和bottom,以left和top為准

 

[html]  view plain  copy

 

 

<Canvas>  
    <Button Canvas.Left="20" Canvas.Top="20" Width="50" Height="20">button</Button>  
  </Canvas>  

 對比上圖,按鈕的位置為向右下偏移了一些. 看來Canvas.Top和Canvas.Left起作用了,我們可以得知按鈕左上角坐標為(20,20)

    當然還可以從上面的代碼中得到更多的信息:

         按鈕左下角的坐標 (20,40)

      按鈕右上角的坐標 (70,20)

         按鈕右下角的坐標 (70,40)

  

我是如何得到這些信息的呢?下面慢慢解釋:

按鈕左下角坐標的x值和左上角的一樣,也為20。其y軸坐標在原有的基礎上又增加了一些:加上了按鈕的高度.所以得出了(20,40) .后面兩個坐標可依此推出。

在同時設置了Canvas.Left和Canvas.Right屬性的情況下,只有Canvas.Left屬性起作用，而Canvas.Right失效，實際上Canvas.Top和Canvas.Bottom同時存在時也只是Canvas.Top一個起作用

3.重疊深度設置

 

[html]  view plain  copy

 

 

<Canvas>  
    <Rectangle Canvas.ZIndex="3" Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" Fill="blue"/>  
    <Rectangle Canvas.ZIndex="1" Width="100" Height="100" Canvas.Top="150" Canvas.Left="150" Fill="yellow"/>  
    <Rectangle Canvas.ZIndex="2" Width="100" Height="100" Canvas.Top="200" Canvas.Left="200" Fill="green"/>  
  
    <!-- Reverse the order to illustrate z-index property -->  
  
    <Rectangle Canvas.ZIndex="1" Width="100" Height="100" Canvas.Top="300" Canvas.Left="200" Fill="green"/>  
    <Rectangle Canvas.ZIndex="3" Width="100" Height="100" Canvas.Top="350" Canvas.Left="150" Fill="yellow"/>  
    <Rectangle Canvas.ZIndex="2" Width="100" Height="100" Canvas.Top="400" Canvas.Left="100" Fill="blue"/>  
  </Canvas>