WPF 控件专题 Canvas 控件详解

1、Canvas 介绍

    定义一个区域，可在其中使用相对于 Canvas 区域的坐标以显式方式来定位子元素。

    Canvas面板用于使用相对于画布区域的坐标来定位子元素，是唯一没有固有布局特征的面板元素。

**************************************************************************************************************

2、Canvas 常用属性

    Background：背景；
        
    Width/Height：宽度/高度；
        
    Opacity：透明度

    Margin：获取或设置元素的外边距；
        
    Name：元素的标识名称；

    RenderTransform：获取或设置影响此元素的呈现位置的转换信息。

    RenderTransformOrigin：获取或设置由 RenderTransform 声明的任何可能呈现转换的中心点，相对于元素的边界。

    附加属性：Left、Right、Top和Bottom这四个属性决定子元素在Canvas里面的位置
    Bottom：获取或设置该元素底部与其父 Canvas 底部之间的距离。

    Left：获取或设置该元素左侧与其父 Canvas 左侧之间的距离。

    Right：获取或设置该元素右侧与其父 Canvas 右侧之间的距离。

    Top：获取或设置该元素顶部与其父 Canvas 顶部之间的距离。

**************************************************************************************************************

3、具体示例：使用Left、Right、Top和Bottom四个属性控制子元素的位置代码示例如下

<Canvas  Margin="10">
	<Rectangle Fill="Red" Width="200" Height="200" Canvas.Top="98" Panel.ZIndex="0"/>
	<Rectangle Fill="Green" Width="200" Height="200" Canvas.Top="10" Canvas.Left="165"  Panel.ZIndex="0"/>
	<Rectangle Fill="DarkBlue" Width="200" Height="200" Canvas.Top="113" Canvas.Left="306" Panel.ZIndex="0"/>
</Canvas>
 
<!--设置ZIndex顺序 默认为0，同级时，后面定义的优先级更高，优先级高的会覆盖优先级低-->
<Canvas  Margin="10">
	<Rectangle Fill="Red" Width="200" Height="200" Canvas.Top="98" Panel.ZIndex="9"/>
	<Rectangle Fill="Green" Width="200" Height="200" Canvas.Top="10" Canvas.Left="165"  Panel.ZIndex="8"/>
	<Rectangle Fill="DarkBlue" Width="200" Height="200" Canvas.Top="113" Canvas.Left="306" Panel.ZIndex="8"/>
</Canvas>

**************************************************************************************************************

4、效果图，左侧是同级ZIndex的效果图；右侧是设置ZIndex的效果图

  

**************************************************************************************************************

5、总结和扩展

    Canvas 是最简单的布局方式，是通过坐标来布局的；不过在个人使用中，比较少用来布局，毕竟觉得计算位置比较麻烦；常用于绘制几何图形，绘制区域用于标注图片等，比如绘制直线、圆、椭圆、长方形、以及通过Path绘制自定义的步径图；

**************************************************************************************************************