本部分讲述如何在 icrosoft Silverlight 应用中控制对象(如形状、文字和媒体)的位置。
本部分包含下面的小节内容:
Canvas 对象
所有的 Silverlight 对象必须包含在 Canvas 对象之内,并相对于包含它的 Canvas 进行定位。 你可以通过指定 x和y坐标控制 Canvas 内的对象位置。这些坐标以像素为单位,与分辨率无关。x和y坐标通常使用 Canvas.Left 和 Canvas.Top 属性指定。 Canvas.Left指定对象离 Canvas左边的距离(x坐标),Canvas.Top 指定对象离 Canvas 顶部的距离(y坐标)。
下面的例子显示如何距离 Canvas 的左边 30 像素和距离顶部 30 像素定位一个矩形。
XAML |
---|
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" > <Rectangle Canvas.Left="30" Canvas.Top="30" Fill="red" Width="200" Height="200" /> </Canvas> |
下面的图例显示了这些代码在 Canvas 内呈现的结果。
注意 Silverlight 在 Silverlight 1 版本内不支持高 dpi,因此,对象在屏幕上呈现和坐标系统不会随分辨率进行缩放。此外,鼠标事件的左边系统不会受屏幕分辨率影响。
可以嵌套 Canvas 对象,并使用 Canvas.Left 和 Canvas.Top 属性定位它们。当对象嵌套时,每个对象使用的坐标系统是相对于它最近的容器 Canvas。在下面的例子中,根Canvas(白色)包含一个嵌套的 Canvas (蓝色),嵌套的 Canvas 的Canvas.Left属性和 Canvas.Top都是30。嵌套的蓝色 Canvas 包含一个红色的矩形,这个矩形的 Canvas.Left 属性和 Canvas.Top属性值也都是30。
XAML |
---|
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300" Background="White"> <Canvas Width="250" Height="250" Canvas.Left="30" Canvas.Top="30" Background="blue"> <Rectangle Canvas.Left="30" Canvas.Top="30" Fill="red" Width="200" Height="200" /> </Canvas> </Canvas> |
下图显示了这些代码的呈现结果。
注意 在嵌入到页面中的 Silverlight 应用程序中,嵌入 Silverlight 插件的 HTML 元素通常有特定的宽度和高度。由于这个原因,对象定位到视野之外是可能的。 例如,如果你的宿主 HTML 元素只有 300 像素宽,你定位你的 Silverlight 对象向右 400 像素的位置,你的用户将看不到这个对象。
定位路径、几何体和其它形状
并不是所有的对象都可以使用 Canvas.Left 属性和 Canvas.Top 属性进行定位的。然而,它们都采用相对容器 Canvas 的x和y坐标。这些对象的例子包含 Path 对象,各种几何对象和形状,如 Line。下面的例子说明这些对象的定位方法。关于路径、几何体和其它形状的更多信息,请参见 Silverlight 形状和画图概述 , 几何体概述和 路径标记语法。
XAML |
---|
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300" Background="White"> <!-- Simple line gives X and Y coordinates for the start and end of the line. --> <Line X1="280" Y1="10" X2="10" Y2="280" Stroke="Blue" StrokeThickness="5"/> <!-- A Polyline allows you to specify a number of X,Y coordinates to make a series of connected lines --> <Polyline Points="150, 150 150, 250 250, 250 250, 150" Stroke="Yellow" StrokeThickness="10"/> <!-- Path allows you to create more complex shapes including curves. Again, the shape of the Path is specified by coordinates. --> <Path Data="M 10,100 C 10,300 300,-200 250,100z" Stroke="Red" Fill="Orange" Canvas.Left="10" Canvas.Top="10" /> </Canvas> |
下图显示这些代码的呈现结果。
变换
改变对象位置的另外一个方法是使用变换。你可以使用变换移动对象,旋转对象、倾斜对象的外形、改变对象的大小(缩放)或者组合使用这些行为。
下面的例子说明 RotateTransform 绕点(0,0)45度旋转 Rectangle 元素。
XAML |
---|
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="200"> <Rectangle Canvas.Left="100" Canvas.Top="100" Width="50" Height="50" Fill="RoyalBlue"> <Rectangle.RenderTransform> <RotateTransform Angle="45" /> </Rectangle.RenderTransform> </Rectangle> </Canvas> |
下图说明这些代码的呈现结果。
关于变换和如何使用变换的更多信息,请参见 Transforms 概述。
Z-Order
到目前为止,已经重点讨论了在二维空间里定位对象,也可以将对象定位到另外对象的上面。 对象的 z-order 决定了一个对象是在另外一个对象的前面还是后面。默认情况下,Canvas 中对象的 z-order 由它们在 Canvas 中顺序决定。越晚声明的对象呈现在越早声明的对象的前面。下面的例子创建3个 Ellipse 对象, 可以看到后面声明的 Ellipse(lime颜色的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.ZIndex 属性改变这种行为。值越大,越是靠前,值越小,越是靠后。下面的例子与前面的类似,但 Ellipse 对象的 z-order 正好相反。最先声明的 Ellipse (silver颜色)现在已经跑到了最前端。
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> |
下图显示了这些代码的呈现结果。