Silverlight 对象的定位

 

本部分讲述如何在 icrosoft Silverlight 应用中控制对象（如形状、文字和媒体）的位置。

本部分包含下面的小节内容：

• Canvas 对象
• 定位路径、几何对象和其它形状
• 变换
• Z-Order

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
<Canvasxmlns="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 内呈现的结果。

在 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
<Canvasxmlns="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

<Canvasxmlns="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>

下图显示这些代码的呈现结果。

定位 Line（线段）、Polyline（折线）和Path（路径） 对象

变换

改变对象位置的另外一个方法是使用变换。你可以使用变换移动对象，旋转对象、倾斜对象的外形、改变对象的大小（缩放）或者组合使用这些行为。

下面的例子说明 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>

下图说明这些代码的呈现结果。

绕点（0,0）旋转 45 度的矩形

关于变换和如何使用变换的更多信息，请参见 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>

下图说明了这些代码呈现的结果。

重叠的 Ellipse 对象

我们可以通过设置对象的 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>

下图显示了这些代码的呈现结果。

颠倒 Ellipse 对象的 z-order 。