Silverlight SDK

Silverlight 对象的定位

本部分讲述如何在 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 内呈现的结果。

在 Canvas 内定位矩形
Positioning a rectangle inside the 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>

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

嵌套的对象
Nested objects

注意    在嵌入到页面中的 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>

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

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

变换

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

下面的例子说明 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 度的矩形
A Rectangle rotated 45 degrees about (0,0)

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

我们可以通过设置对象的 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 。
Reversing z-order of the Ellipse objects

请参见

形状和画图概述
几何体概述 Overview
路径标记语法
变换概述 Overview
Silverlight 对象模型
概述