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>