【WPF 控件】 Canvas画布

 Canvas 画布

 总结

1、canvas 中的元素通过canvas的附件属性left|right、bottom|top 来布局， 不能同时使用left 和right或者top和bottom

2、zindex控制层级。

3、 Canvas画布为容器控件，用于定位，它不会自动调整内部元素的排列(Arrange)及大小(Measure)，所以他性能比较好。

介绍

      Canvas是最基本的面板，只是一个存储控件的容器，它不会自动调整内部元素的排列及大小，它仅支持用显式坐标定位控件，它也允许指定相对任何角的坐标，而不仅仅是左上角。可以使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。

Canvas面板用于使用相对于画布区域的坐标来定位子元素。以下是 Canvas 面板的一些属性。

    Canvas 的 Height 和 Width 属性的默认值为 0。如果不设置这些值，除非子元素自动调整大小，否则您将看不到画布。
    Canvas 上的子元素永远不会调整大小。
    子元素上的垂直和水平对齐不起作用。子元素放置在由 Canvas Left、Top、Right 和 Bottom 属性设置的位置上。
    保证金确实部分起作用。如果设置了 Canvas 的 Left 属性，Right 属性将不起作用。如果设置了 Canvas 的 Top 属性，Bottom 属性将不起作用。

可以把Canvas比作一个坐标系,所有的元素通过设置坐标来决定其在坐标系中的位置.这个坐标系的原点并不是在中央,而是位于它的左上角.见下图

 

 

 定位（X，y，zindex）

元素设置平面坐标的方法共有四个:

        Canvas.Top     设置元素距Canvas顶部的距离

        Canvas.Bottom  设置元素距Canvas底部的距离

        Canvas.Left     设置元素距Canvas左边界的距离

        Canvas.Right    设置元素距Canvas右边界的距离

当同时设置left和right,top和bottom,以left和top为准

元素左上角的坐标 (x,y)就是元素相对于canvas画布坐标系的坐标定位

通过设置Left和Right属性的值表示元素最靠近的那条边，应该与Canvas左边缘或右边缘保持一个固定的距离，设置Top和Bottom的值也是类似的意思。实质上，你在选择每个控件停靠的角时，附加属性的值是作为外边距使用的。如果一个控件没有使 用任何附加属性，它会被放在Canvas的左上方（等同于设置Left和Top为0）。

 ZIndex属性

Canvas面板中可能会有多个相互重叠的元素，可以设置Canvas的ZIndex附加属性，来控制他们的重叠方式 ZIndex属性默认值都是0，属性值必须是整数。

除此之外，我们还可以通过代码的方式设置ZIndex的值，代码如下：Canvas.SetZIndex(this.btn, 2);

裁剪

      Canvas的主要用途是用来画图。Canvas默认不会自动裁减超过自身范围的内容，即溢出的内容会显示在Canvas外面，这是因为默认 ClipToBounds=”False”；我们可以通过设置ClipToBounds=”True”来裁剪多出的内容。

 

 

 如果将ClipToBounds属性设为true，在设计界面将会对子元素的超出部分进行裁剪：