WPF教程（二十四）Canvas

Canvas大概是最简单的面板了。在默认情况下，它什么都不做，你把控件放到它里面，然后通过具体的坐标来指定位置。

如果你之前使用过其他UI库如WinForms，Canvas会让你感觉很亲切。然而它趋向于使用绝对坐标来控制子控件，如果你固定了文字的位置，或者内容是固定大小的，一旦用户调整窗口大小，面板不会做任何事情来调整。

我们先来看例子，看看Canvas在默认情况下是如何工作的：

        
                Button 1
                Button 2
        

如你所见，我们创建了两个按钮，但是它们显示在同一个位置，因此只能看到最后创建的那个。Canvas不会做任何事，除非你给子控件指定坐标。这需要通过Left、Right、Top和Bottom这四个附加属性来设定。

这些属性用来指定相对于Canvas四个边缘的位置。默认情况下都被设置为NaN(Not  a Number)，也就是Canvas的左上角。你可以像下面这样改变它们：

        
                Top left
                Top right
                Bottom left
                Bottom right
        

注意我只设置了我需要的属性。前两个按钮，我只指定X坐标的值，使用Left和Right属性来使它们分别从两端朝中间靠拢。对于两个底部按钮，我使用了Left/Right和Bottom属性来使它们向中间靠拢。通常情况下，你需要指定Top和Bottom其中的一个，以及Left和Right其中的一个。

Canvas可以完全控制控件的位置，但是它不知道是否有足够的空间放下全部控件，也不知道一个是否在另一个上面。这一点非常不利于各种对话框的设计。但是，如Canvas的名字所示，它至少有一个强大的功能：Painting。WPF里面有很多控件支持放入一个Canvas，来展示漂亮的图标。

Z-Index

在下面的例子，我们将使用一组WPF形状相关的控件来例证另外一个使用Canvas时的重要概念：Z-Index。正常情况下，Canvas中的两个控件会重叠在一起，最后一个被定义的将覆盖另外一个。通过使用附加的Z-Index属性，可以轻松改变这种情况。

先来看不使用Z-Index的情况：

由于方框都是在圆之后定义的，因此都覆盖了圆。而方框又按定义的先后被层层覆盖，后定义的覆盖先定义的。后下面我们来作如下改变：

默认的Z-Index值都是0，我们给每一个形状加上值。值大的会在上面，覆盖值小的。如果值相等，那么按定义先后来覆盖。截屏很清楚的展示了Z-Index改变后的样子。