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

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

概述还有一个形状不应该忘记:椭圆,使用<Ellipse>元素表现。最重要的属性是 Width和 Height,用来决定了椭圆的尺寸。例4-9显示了一个椭圆,图4-8是它在浏览器中的输出效果。     图 4-7 椭圆 提示:当椭圆的宽度和高度相同时,可以得到一个圆。 几何元素 绘制形头的另一种方法是使用所谓的几何元素。可以把它比喻为形状(直线,矩形,路径等等),但这些元素不能自绘,而是在其它元素中定义 还有一个形状不应该忘记:椭圆,使用<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 >  

  总结

以上是内存溢出为你收集整理的Essential Silverlight翻译连载---第四章 续2全部内容,希望文章能够帮你解决Essential Silverlight翻译连载---第四章 续2所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/web/1058503.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存