WPF/E CTP Quick Start - 第三部分:Canvas对象(翻译)

向您的Canvas里添加一个对象
  一个Canvas包含和定位了其它的对象。如果您希望在Canvas对象内增加一个对象,请在<Canvas>标签内添加新的元素。下面的例子为Canvas添加了一个Ellipse对象。因为Canvas是根元素,因此它包含了一些命名空间的定义。
<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.LeftCanvas.Top附加属性,以确定它在Canvas中的位置。Canvas.Left附加属性指定了对象与其父Canvas左边缘的距离,而Canvas.Top附加属性指定了子对象与它父Canvas上边缘的距离。下面的例子将之前的Ellipse进行了移动,使其与Canvas上边缘和左边缘都相差30像素。
<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对象。

WPF/E CTP Quick Start - 第三部分:Canvas对象(翻译)
控制宽度和高度
  Canvas, 形状,以及其它各种元素都有WidthHeight属性,使您能够指定它们的大小。下面的例子建立了一个200像素宽和200像素高的Ellipase对象。请注意,在这里不支持使用百分比来指定大小。
<Ellipse 
Canvas.Left="30" Canvas.Top="30"
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
  下面的例子设置了父CanvasWidthHeight属性,并且将它的背景设为了绿色。
<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对象,而灰色的背景是ActiveX控件,它并不会受Canvas影响。请注意Ellipse并没有被切除,它超出了Canvas的边缘。
  如果您不设置Width和Height属性,它们在默认情况下都是0。
 
嵌套的Canvas对象
  Canvas能够含有其它的Canvas对象。下面的例子创建了一个包含其它两个Canvas对象的Canvas对象。
<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>
 
下面该做什么呢?
  在下一个部分“绘图和填充”中,您会了解图形和使用画刷来绘制图形。


本文转自 jeffz 51CTO博客,原文链接:http://blog.51cto.com/jeffz/60433,如需转载请自行联系原作者
上一篇:方便的将数字转成字符串类型并在前面补0


下一篇:大咖说|对话路特斯科技副总裁李博:如何看待智能驾驶的未来?