silverlight
发布时间:2022-05-04 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Essential Silverlight翻译连载---第四章 续2,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
概述
还有一个形状不应该忘记:椭圆,使用<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,每个都有
属性Canva
s.Left=”50”和Canva
s.Top=”50”(除了最外层)。最里层的<Canvas>元素的<TextBlock>元素使用Canva
s.Left=”50”和Canva
s.Top=”50”。它们中的每个都使用了相对于父canvas的相对坐标而不是绝对坐标。从而,每个canvas都距它的父亲向右50个像素,向下50个像素。这些Canva
s.Left=”50”和Canva
s.Top=”50”
属性又称为依赖
属性:它们依赖于上一级的<Canvas>元素。同理,<Canvas>元素也可以被称为依赖对象。图4-9
显示了它的
输出结果。
例4-10
嵌套的canvas
,XAML
文件(Canvas.xaml
)
<
Canvas
xmlns
=
"http://scheR_569_11845@as.microsoft.com/client/2007"
xmlns:x
=
"http://scheR_569_11845@as.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"
</
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那样交迭,但这一次我们设置了Canva
s.ZIndex,所以内层元素拥有
一个低的
z-index,从而使得第
一个矩形遮挡了第二个,第二个遮挡了第三个,依此类推。文本被赋予了最低的
z-index,这个文本现在被蓝色矩形覆盖,从而无法
显示,如图4-10所示。
例4-11
设置z-index
,XAML
文件(ZIndex.xaml
)
<
Canvas
xmlns
=
"http://scheR_569_11845@as.microsoft.com/client/2007"
xmlns:x
=
"http://scheR_569_11845@as.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所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。