Essential Silverlight翻译连载---第四章 续2

还有一个形状不应该忘记：椭圆，使用<Ellipse>元素表现。最重要的属性是 Width和 Height，用来决定了椭圆的尺寸。例4-9显示了一个椭圆，图4-8是它在浏览器中的输出效果。

 

 

图 4-7 椭圆

提示：当椭圆的宽度和高度相同时，可以得到一个圆。

几何元素

绘制形头的另一种方法是使用所谓的几何元素。可以把它比喻为形状（直线，矩形，路径等等），但这些元素不能自绘，而是在其它元素中定义自己的外观。例如， UI对象的Clip属性可以用于给几何元素定义一条路径。这条路径定义了UI对象的轮廓。或者，您可以通过<Path>元素的Data属性使用几何元素，从而提供路径的布局。

有几个几何元素，包括 EllipseGeometry， LineGeometry， PathGeometry和 RectangleGeometry.下面演示了使用路径来包含一幅图像（稍后，例4-16将演示达到相同效果的不同方法）：

< Image Source = "image.png">

    < Image.Clip >

      < EllipseGeometry Center = "150,75"RadiusX="300"RadiusY="150" />

      </ ImageClip >

</ Image >

几何元素也可以组合成组，在 <GeometryGroup>元素下面嵌套它们。

 

元素位置

如果您不指定元素的位置，它将位于显示区域的原点（0,0）。您可以自己做个实验：创建一个Silverlight XAML文件并在里面放置一个 <TextBlock>元素。这些元素中的所有文字将重叠，因为它们都显示在左上角（0,0）。

大多数元素可以通过设置 Canvas.Top和 Canvas.Left属性来改变它们的位置。它们分别指示元素的 x和 y坐标。下面的文本块将显示于向右50个像素，向下100个像素的位置：

< TextBlock Canvas.Left = "50"Canvas.Top="100"Text="Silverlight" />

当有更多的东西需要定位时，可以在<Canvas>元素中实现。一个canvas也可以有位置：

< Canvas Canvas.Left = "50"Canvas.Top="100">

    ...

</ Canvas >

当一个canvas内有多个canvas环绕时，如例4-10，它包含了多个canvas，每个都有属性Canvas.Left=”50”和Canvas.Top=”50”（除了最外层）。最里层的<Canvas>元素的<TextBlock>元素使用Canvas.Left=”50”和Canvas.Top=”50”。它们中的每个都使用了相对于父canvas的相对坐标而不是绝对坐标。从而，每个canvas都距它的父亲向右50个像素，向下50个像素。这些Canvas.Left=”50”和Canvas.Top=”50”属性又称为依赖属性：它们依赖于上一级的<Canvas>元素。同理，<Canvas>元素也可以被称为依赖对象。图4-9显示了它的输出结果。

例4-10 嵌套的canvas ，XAML 文件（Canvas.xaml ）

< Canvas xmlns = "http://schemas.microsoft.com/client/2007"

        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"

        Width = "500"Height="500"Background="Red">

 < Canvas Canvas.Left = "50"Canvas.Top="50"Background="Green"

          Width = "400"Height="400">

    < Canvas Canvas.Left = "50"Canvas.Top="50"Background="Yellow"

            Width = "300"Height="300">

      < Canvas Canvas.Left = "50"Canvas.Top="50"Background="Blue"

              Width = "200"Height="200">

        < TextBlock Canvas.Left = "50"Canvas.Top="50"FontSize="20"

                   Text = "Silverlight"/>

      </ Canvas >

    </ Canvas >

 </ Canvas >

</ Canvas >

（译者注：不知为什么，我的浏览器没有把这张图显示完全）

提示：只有 <Canvas>元素拥有确定的长和宽时才会显示它的背景色。如果您忽略了这些信息，背景色将为默认的白色。

当然，这些canvas互相重叠。Silverlight使用了下面的方法：所有元素相互堆叠，使得它得到视觉上的三维效果。因此，例4-10文字显示在所有canvas的上方，因为它的元素在文档的最后。这就是为什么能看见文本的根本原因。在CSS样式中，这是一个属性，叫 z-index 3，它包含两个矩形： z-index 2和 z-index 1。高的 z-index放置在比它低的 z-index上。然而，外层canvas不会覆盖矩形，虽然它的 z-index 最高。

例4-11对例4-10做了一些改动：除了最外层canvas所有我们加入的矩形都被遮挡。通常它们会象图4-9那样交迭，但这一次我们设置了Canvas.ZIndex，所以内层元素拥有一个低的 z-index，从而使得第一个矩形遮挡了第二个，第二个遮挡了第三个，依此类推。文本被赋予了最低的 z-index，这个文本现在被蓝色矩形覆盖，从而无法显示，如图4-10所示。

例4-11 设置z-index ，XAML 文件（ZIndex.xaml ）

< Canvas xmlns = "http://schemas.microsoft.com/client/2007"

        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"

         Width = "500"Height="500"Background="White">

 < Rectangle Canvas.Left = "50"Canvas.Top="50"Fill="Red"

             Width = "200"Height="200"Canvas.ZIndex="5"/>

 < Rectangle Canvas.Left = "100"Canvas.Top="100"Fill="Green"

             Width = "200"Height="200"Canvas.ZIndex="4"/>

 < Rectangle Canvas.Left = "150"Canvas.Top="150"Fill="Yellow"

             Width = "200"Height="200"Canvas.ZIndex="3"/>

 < Rectangle Canvas.Left = "200"Canvas.Top="200"Fill="Blue"

             Width = "200"Height="200"Canvas.ZIndex="2"/>

 < TextBlock Canvas.Left = "250"Canvas.Top="250"FontSize="20"

             Text = "Silverlight"Canvas.ZIndex="1"/>

</ Canvas >