Win10系列：UWP界面布局进阶7

Canvas

Canvas元素用于定义一个区域，可以向这个区域中添加不同的XAML界面元素。Canvas会对其内部的元素采用绝对布局方式进行布局，下面通过三个示例来介绍Canvas的使用方法。

（1）Canvas相对定位与嵌套

在定义Canvas子元素的位置时，需要设置这个元素的Canvas.Left或Canvas.Top属性，其中Canvas.Left属性表示该元素与Canvas左侧边框之间的距离，而Canvas.Top属性表示与Canvas顶部边框之间的距离。同时Canvas是可以互相嵌套的，在一个Canvas中可以放置另一个Canvas，内层Canvas同样可以使用上面介绍的两个属性来设置其相对于外层Canvas的位置。

在一个打开的Windows应用商店项目中新建一个空白页，并命名为CanvasPage，打开CanvasPage.xaml文件，在默认的Grid元素中添加Canvas元素，并定义Canvas元素的宽度和高度均为280像素。再在Canvas元素中添加一个内层Canvas元素，设置其Width、Height属性的值都为240，接着向内层Canvas中添加一个矩形，并设置其填充色为黄色，高度和宽度分别为125像素和160像素。最后分别设置内层Canvas和矩形的Canvas.Left及Canvas.Top属性值均为40，代码如下所示：

<Canvas Width="280" Height="280" >

<Canvas Width="240" Height="240" Canvas.Left="40" Canvas.Top="40">

<Rectangle Canvas.Left="40" Canvas.Top="40" Fill="Yellow" Width="160" Height="125"/>

</Canvas>

</Canvas>

在设计器中将鼠标移至矩形四周区域时会显示出矩形所在的内层Canvas以及外层Canvas的边框，矩形与内外层Canvas的相对位置如图5-15所示。

图5-15 Canvas相对定位与嵌套

（2）Canvas的Z轴顺序

有时Canvas中的多个元素之间会相互重叠，为了使元素按照预想的方式显示，可以通过元素的Canvas.ZIndex属性来设置元素间的层次关系，Canvas.ZIndex属性值越大表示元素将会在越靠前的位置显示，也就是说ZIndex属性值大的元素将覆盖在ZIndex属性值小的元素之上。

在CanvasPage页面的CanvasPage.xaml文件中继续添加一个Canvas元素，并在Canvas元素中添加两个椭圆，分别设置两个椭圆的Canvas.ZIndex属性值为2和3，并定义椭圆的大小、颜色及椭圆与Canvas元素边框间的距离，代码如下所示：

<Canvas Margin="213,279,851,191" >

<Ellipse Canvas.ZIndex="3" Canvas.Left="30" Canvas.Top="30" Height="150" Width="150" Fill="Yellow"/>

<Ellipse Canvas.ZIndex="2" Canvas.Left="80" Canvas.Top="80" Height="200" Width="200" Fill="Red "/>

</Canvas>

在设计器中可以看到，当元素重叠时Canvas.ZIndex属性值为3的椭圆会覆盖与属性值为2的椭圆的重叠区域，效果如图5-16所示。

图5-16元素重叠显示效果

在元素重叠时，如果没有为其设置重叠的元素设置Canvas.ZIndex属性或重叠元素的Canvas.ZIndex属性值相同，会默认按照向Canvas中添加元素的顺序进行排序，即前面所添加的元素的会被显示在后面元素的下面。

（3）为Canvas设置边框和背景颜色

可以通过Canvas的Background属性为其设置背景颜色，但Canvas并没有用来设置边框宽度和颜色的属性，将Canvas包含在一个Border元素中能实现这一效果。

在CanvasPage页面的CanvasPage.xaml文件中继续添加一个Border元素，并分别设置Border元素的BorderThickness属性和BorderBrush属性来定义Border元素边框的宽度和颜色，同时还可以设置CornerRadius属性来定义边框样式为圆角。在Border元素中添加一个Canvas元素，并设置Canvas的Background属性值为Yellow，代码如下所示：

<Border BorderThickness="30" BorderBrush="Red" CornerRadius="30" Height="221" Width="266">

<Canvas Background="Yellow"/>

</Border>

在设计器中可以看到已经为Canvas设置了背景颜色及边框，显示效果如图5-17所示。

图5-17 为Canvas设置背景及添加边框

一个Border元素中只能包含一个子元素，如果需要同时放置一个以上的XAML元素，可以在Border元素中添加一个Canvas，再将其他需要显示的元素置于Canvas中即可。