Canvas 是一个对象用来包含和安置形状和控件。 每一个 Silverlight XAML 文件至少有一个 Canvas, 它用作根元素。 该文档介绍 Canvas 对象,描述如何添加、安置、排列子对象。 本文档包含以下章节。 添加一个对象到你的 CanvasCanvas 包含和安置其它对象。
要添加一个对象到一个 Canvas,
将其插入到 [隐藏 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> [隐藏] [重新开始] Copyright © 2007 Microsoft Corporation. All rights reserved. Legal Notices. 千一网络 译 |