2.4 Canvas面板布局

Canvas面板也被称为画布面板，是一种根据子元素所处位置的坐标值来进行定位的布局面板。这与Windows Forms窗体程序设计中，通过将控件放置于窗体Form中，由控件的左上角顶点在窗体Form中的绝对位置来决定控件的位置是相似的。因此，Canvas面板非常适合用于游戏程序设计。

在实际使用中，Canvas面板中的子元素，通过设置附加属性Canvas.Left和Canvas.Top来设定子元素的左上角顶点的坐标。一般以Canvas的左上角顶点作为坐标原点，则Canvas.Left相当于子元素的X轴坐标值，Canvas.Top相当于子元素的Y轴坐标值。

由此，不难发现采用Canvas面板放置子元素比较容易出现子元素重叠的现象。如果多个子元素发生重叠，又需要控制重叠的顺序，可以通过设置Canvas.ZIndex值实现，Canvas.ZIndex值越大，处于最上层。例如，有两个Button出现重叠，Button1的Canvas.ZIndex=1，而Button2的Canvas.ZIndex=2，则Button2会叠在Button1的上面。

在Windows phoneMango手机中，有一个用于显示拨号键盘的图标，如图2-13所示，是由一组浅色的矩形拼合成的。这一图标可以通过Canvas面板来生成，代码如下。

图2-13 显示拨号键盘的图标

XAML代码：Canvas.xaml

<Canvas Width="64" Height="72" Grid.Row="1">
        <!--Add a style to this canvas’s resource dictionary-->
        <Rectangle Width="16" Height="16" Fill="White" />
       <Rectangle Canvas.Left="24" Width="16" Height="16" Fill="White"/>
       <Rectangle Canvas.Left="48" Width="16" Height="16" Fill="White"/>
       <Rectangle Canvas.Top="24" Width="16" Height="16" Fill="White"/>
       <Rectangle Canvas.Left="24" Canvas.Top="24" Width="16" Height="16" Fill="White"/>
       <Rectangle Canvas.Left="48" Canvas.Top="24" Width="16" Height="16" Fill="White"/>
       <Rectangle Canvas.Top="48" Width="16" Height="16" Fill="White"/>
       <Rectangle Canvas.Left="24" Canvas.Top="48" Width="16" Height="16" Fill="White"/>
       <Rectangle Canvas.Left="48" Canvas.Top="48" Width="16" Height="16" Fill="White"/>
       <Rectangle Canvas.Left="24" Canvas.Top="72" Width="16" Height="16" Fill="White"/>
</Canvas>

上述代码中，Rectangle表示矩形控件，Canvas.Left和Canvas.Top分别指定矩形距离Canvas面板左上角顶点的横坐标（X轴）与纵坐标（Y轴）的值，如果未明确指定则默认表示值为0。例如，<Rectangle Width="16" Height="16" Fill="#FFF8F2F2" />矩形未指定Canvas.Left和Canvas.Top值，表示两值都为0，则此矩形的左上角顶点坐标与Canvas左上角顶点坐标重合。

实现上述拨号图标的程序代码如下：

VBnet代码：Canvas2.xaml.vb

Private Sub PhoneApplicationPage_Loaded（sender As System.Object，e As System.Windows.RoutedEventArgs）Handles MyBase.Loaded
    Dim rec As Rectangle '表示图标中白色小方块的矩形
    Dim i As Integer=0
    Dim j As Integer=0
    For i=0 To 2 '
       For j=0 To 2
          rec=New Rectangle
          rec.Fill=New SolidColorBrush（Colors.White）
          rec.Width=16
          rec.Height=16
          '采用Controls.Canvas.SetLeft设置左顶点的X轴坐标值
          Controls.Canvas.SetLeft（rec，j * 24）
          '采用Controls.Canvas.SetTop设置左顶点的Y轴坐标值
          Controls.Canvas.SetTop（rec，i * 24）
          '将rec矩形作为子元素添加到Canvas1面板中
          Me.Canvas1.Children.Add（rec）
       Next
    Next
    rec=New Rectangle With {
      .Height=16，.Width=16，.Fill=New SolidColorBrush（Colors.White）} Controls.Canvas.SetLeft（rec，24）
    Controls.Canvas.SetTop（rec，72）
    Me.Canvas1.Children.Add（rec）
End Sub

代码定义矩形变量作为图标中的白色小方块，通过双重循环往Canvas面板中添加9个矩形。这些矩形添加在Canvas的Children集合中，作为Canvas的子元素。每个矩形的定位通过Controls.Canvas.SetLeft和Controls.Canvas.SetTop来设定，最后又单独添加了一个处于最下端的矩形块。

上一章目录下一章