Canvas 对象

添加一个对象到你的 Canvas

Canvas 包含和安置其它对象。 要添加一个对象到一个 Canvas， 将其插入到 <Canvas> 标签之间。 下面示例添加一个 Ellipse 对象到一个 Canvas。 由于 Canvas 是根元素， 在 XML 中根元素上做一些必要的 xmlns 声明是最好的做法。

[隐藏 XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <Ellipse 
     Height="200" Width="200"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

[隐藏] [重新开始]

一个 Canvas 可以包含任意数量的对象， 即使是其它 Canvas 对象。

安置一个对象

在 Canvas 中安置一个对象，你要设置对象的 Canvas.Left 和 Canvas.Top 附加属性。 附加的 Canvas.Left 属性标识了对象和其父级 Canvas 的左边缘距离， 附加的 Canvas.Top 属性标识了子对象和其父级 Canvas 的上边缘距离。 下面的示例使用了前例中的 Ellipse，并将其从 Canvas 的左边移动 30 像素，从上边移动 30 像素。

[隐藏 XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse 
      Canvas.Left="30" Canvas.Top="30" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

[隐藏] [重新开始]

下面的插图突出显示了 Canvas 坐标系统和上例中 Ellipse 位置。

z-order

默认情况下，Canvas 对象的 z-order 决定于他们声明的顺序。 后声明的对象出现在最先声明的对象的前面。 下面的示例创建三个 Ellipse 对象。 观察最后声明的 Ellipse（石灰色的那一个）在最前面， 位于其它 Ellipse 对象的前面。

[隐藏 XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <Ellipse 
      Canvas.Left="5" Canvas.Top="5" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Silver" />
      
  <Ellipse 
      Canvas.Left="50" Canvas.Top="50" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />      
      
  <Ellipse 
      Canvas.Left="95" Canvas.Top="95" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Lime" />     
              
</Canvas>

[隐藏] [重新开始]

你可以通过设置 Canvas 对象的 Canvas.ZIndex 附加属性来改变这个行为。 越高的值越靠近前台；较低的值更远离前台。 下面的示例类似于先前的一个， 只是 Ellipse 对象的 z-order 颠倒了：最先声明的 Ellipse（银色的那个）现在在前面了。

[隐藏 XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <Ellipse 
      Canvas.ZIndex="3"
      Canvas.Left="5" Canvas.Top="5" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Silver" />
      
  <Ellipse 
      Canvas.ZIndex="2"
      Canvas.Left="50" Canvas.Top="50" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />      
      
  <Ellipse 
      Canvas.ZIndex="1"
      Canvas.Left="95" Canvas.Top="95" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Lime" />     
              
</Canvas>

[隐藏] [重新开始]

控制宽度和高度

Canvas、形状和许多其它元素都有 Width 和 Height 属性用以让你标识它们的大小。 下面的示例创建了一个 200 像素宽和 200 像素高的 Ellipse。 注意百分比大小不被支持。

[隐藏 XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse 
      Canvas.Left="30" Canvas.Top="30" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />

</Canvas>

[隐藏] [重新开始]

下面的示例展示了设置父级 Canvas 的 Width and Height 到 200，并给它一个石灰绿的背景。

[隐藏 XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="200" Height="200"
   Background="LimeGreen">
    
  <Ellipse 
    Canvas.Left="30" Canvas.Top="30" 
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

[隐藏] [重新开始]

当你运行示例， 石灰绿的块是 Canvas ，而灰色背景是承载插件区的一部分，那是 Canvas 没有占用的部分。 注意 Ellipse 没有被剪切， 即使超出了 Canvas 范围。

如果你没有明确为 Width 和 Height 指定值，他们的默认值均为 0。

嵌套 Canvas 对象

Canvas 可以包含其它 Canvas 对象。 下面的示例创建了一个 Canvas， 它自己包含两个其它 Canvas 对象。

[隐藏 XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Height="50" Width="50" Canvas.Left="30" Canvas.Top="30"
      Background="blue"/>
  
  <Canvas Height="50" Width="50" Canvas.Left="130" Canvas.Top="30"
      Background="red"/>
</Canvas>

[隐藏] [重新开始]

下一步是什么？

下一个主题，绘图和喷涂， 描述如何创建一个复杂的形状，如何利用纯色、渐变色和图像进行喷涂。