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

概述使用图像 虽然Silverlight是基于矢量的技术，但它也支持像素图像。XAML的< Image>元素用于处理图像。除了默认的属性如 Canvas.Left， Canvas.Top， Height和 Width，< Image>还需要知道要显示哪张图像。这个信息需要在 Source属性中提供。你可以使用本地和远程序的URL，它支持两种图像格式：JPEG和PNG。例4-12是代码，图4-11是相应 使用图像 虽然Silverlight是基于矢量的技术，但它也支持像素图像。XAML的< Image>元素用于处理图像。除了默认的属性如 Canvas.left， Canvas.top， Height和 WIDth，< Image>还需要知道要显示哪张图像。这个信息需要在 Source属性中提供。你可以使用本地和远程序的URL，它支持两种图像格式：JPEG和PNG。例4-12是代码，图4-11是相应的输出。 < Canvas xmlns = "http://schemas.microsoft.com/clIEnt/2007"         xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml">  < Image Source = "silverlight.png" /> </ Canvas >

图 4-11 Silverlight 中的基于像素的图像 提示：使用图像时，可以使用 JavaScript跟踪数据传输，这将在第9章讲解。 使用画刷 最后一个用于设计静态（也就是不需要移动的）UI的基础XAML元素是brush。画刷在使用时就象使用真的画刷绘画一样。尽管如此，Silverlight的画刷提供了更多：可以画不同的颜色，可以画渐变，可以画图像，甚至可以画视频。 您可以对一些属性有选择地使用画刷如： Background， Fill或 stroke。然而，这需要改变语法，而不是直接使用属性。您应该使用子元素<ElementYouWantToBrush.oldAttribute>。例如，填充一个矩形应该使用如下语句：  < Rectangle >     < Rectangle.Fill >       <! — 在这里使用画刷 -->     </ Rectangle.Fill > </ Rectangle > 最简单的画刷叫 SolIDcolorBrush，因为它只使用纯色，没有颜色变化或渐变效果。实际上，在迄今为止本书所使用的属性如 Background， Fill或 stroke中已经隐式地使用了 SolIDcolorBrush。但还是使用选择性语法比较好些。例4-13的输出结果跟例4-11相同，但它使用了< SolIDcolorBrush>元素。需要注意，通过定义它的 color属性来决定画刷的颜色。 例4-13 使用纯色画刷，XAML 文件（SolIDcolorBrush.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"WIDth="200"Height="200"              Canvas.ZIndex = "5">     < Rectangle.Fill >       < SolIDcolorBrush color = "Red" />     </ Rectangle.Fill >  </ Rectangle >  < Rectangle Canvas.left = "100"Canvas.top="100"WIDth="200"Height="200"              Canvas.ZIndex = "4">     < Rectangle.Fill >       < SolIDcolorBrush color = "Green" />     </ Rectangle.Fill >  </ Rectangle >  < Rectangle Canvas.left = "150"Canvas.top="150"WIDth="200"Height="200"              Canvas.ZIndex = "3">     < Rectangle.Fill >       < SolIDcolorBrush color = "Yellow" />     </ Rectangle.Fill >  </ Rectangle >  < Rectangle Canvas.left = "200"Canvas.top="200"WIDth="200"Height="200"              Canvas.ZIndex = "2">     < Rectangle.Fill >       < SolIDcolorBrush color = "Blue" />     </ Rectangle.Fill >  </ Rectangle >  < TextBlock Canvas.left = "250"Canvas.top="250"FontSize="20"              Text = "Silverlight"Canvas.ZIndex="1"/> </ Canvas > 画刷可以做单一的事情。最典型的应用是渐变。普通形式是的渐变是放射状渐变：渐变开始于一个给定的原点（经常是一个对象的中心）并呈放射状变化直到对象的边界。您可以定义一个任意的数字表示终点：这是一些和指定颜色匹配的点。所以您所要做的只是定义终点和相关颜色。Silverlight将自动计算并绘制其中的过渡颜色。画刷的XAML元素是< RadiaGradIEntBrush>.。 使用这种渐变需定义以下几个参数： Center 对象的中点。您需要给x和y坐标提供一个0到1之间的值。Silverlight会根据目标对象的实际尺寸计算实际的坐标值。 GradIEntOrigin 渐变的中心点。也是为坐标值提供一个0到1之间的值。 RadiusX ，RadiusY 渐变的x轴和y轴半径，也是一个0到1之间的值。 终止色使用< GradIEntStop>元素定义。您需要提供颜色（ color属性）和位移（ Offset属性，一个0到1之间的值）。例4-14演示了一个拥有三种终止色的放射状渐变，图4-12是输出效果。 Example 4-14 使用放射状渐变，XAML 文件（RadialGradIEntBrush.xaml ） < Canvas xmlns = "http://schemas.microsoft.com/clIEnt/2007"         xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"         WIDth = "600"Height="600">  < Ellipse WIDth = "400"Height="400"stroke="Black">     < Ellipse.Fill >       < RadialGradIEntBrush Center = "0.5 0.5"GradIEntOrigin="0.33 0.67"                            RadiusX = "0.5"RadiusY="0.5">         < GradIEntStop color = "Red"Offset="0"/>         < GradIEntStop color = "Green"Offset="0.33"/>         < GradIEntStop color = "Blue"Offset="0.67"/>       </ RadialGradIEntBrush >     </ Ellipse.Fill >  </ Ellipse > </ Canvas >

图 4-12 放射状渐变，您是否看见中点和终止色？ 另外一种渐变是线性渐变：颜色的变化不是呈放射状的，改为沿着一条变轴。相关的XAML元素是< linearGradialBrush>，需要一个起点和终点，再一次使用0到1之间的值，将会被映射为真实的坐标值。例4-15演示了如何使用< linearGradialBrush>，还需要一条表示渐变方向的直线和终点。效果如图4-13所示。 例4-15 使用线性渐变，XAML文件（linearGradIEntBrush.xaml） < Canvas xmlns = "http://schemas.microsoft.com/clIEnt/2007"         xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"         WIDth = "600"Height="600">  < Rectangle WIDth = "600"Height="600"stroke="Black">     < Rectangle.Fill >       < linearGradIEntBrush StartPoint = "0.1 0.9"EndPoint="0.9 0.1">         < GradIEntStop color = "Red"Offset="0"/>         < GradIEntStop color = "Green"Offset="0.33"/>         < GradIEntStop color = "Blue"Offset="0.67"/>       </ linearGradIEntBrush >     </ Rectangle.Fill >  </ Rectangle >  < Path stroke = "Black"Data="M 55 535 L 65 545 M 65 535 L 55 545 " />  < Path stroke = "Black"Data="M 215 375 L 225 385 M 225 375 L 215 385 " />  < Path stroke = "Black"Data="M 375 215 L 385 225 M 385 215 L 375 225 " />  < line X1 = "60"Y1="540"X2="540"Y2="60"stroke="# 7f 000000 " /> </ Canvas >  

最后和种画刷使用一种特殊的方式进行填充：一张图版或一个视频文件。当您使用图像填充一个对象时，Silverlight会自动拉伸图像以适应舞台。您也可以在一个矩形内椭圆内放置一段视频做为背景。 ImageBrush和VIDeoBrush的使用非常相似。你需要在相关属性内提供源文件的文件名：< ImageBrush>的 ImageSource和< VIDeoBrush>的 Sourcename。您可以使用 Stretch属性来指示Silverlight使用何种方式在舞台内填充，有以下选项： None 保持原来的尺寸 Fill 完全填充可用区域，这样将不能保持纵横比 Uniform 进行拉伸并保持纵横比，直到宽或高适合显示区域 UniformToFill 进行拉伸并保持纵横比，直到宽和高都大于或等于显示区域的宽和高，这将导致部分内容被裁减。 例4-16演示了如何使用图像填充椭圆。如图4-14所示，这如我们期望的那样使用其他的形状来显示显示矩形图像和视频。关于使用视频的更多信息请参考第7章。 例4-16 使用图像画刷，XAML文件（ImageBrush.xaml） < Canvas xmlns = "http://schemas.microsoft.com/clIEnt/2007"         xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"         WIDth = "600"Height="600">  < Ellipse Canvas.top = "75"WIDth="300"Height="150"stroke="Black">     < Ellipse.Fill >       < ImageBrush ImageSource = "silverlight.pan" />     </ Ellipse.Fill >  </ Ellipse > </ Canvas > 提示：有另一种方法可以定义对象的轮廓，使用 Clip属性并提供一个几何对象做为它的值，并得到想要的轮廓。参考Silverlight SDK可以得到更多信息（话题是：“Silverlight GeometrIEs OvervIEw”）。

XAML中包含了太多的形状，以至于不能一一说明，但我们讨论了最重要的那部分。说实话UI一般使用设计工具生成；做为一个程序员，您只需要添加相应的功能，我们将马上在下一章讲述这些！ 进阶读物 XAML in a Nutshell（ http://www.oreilly.com/catalog/xamlian/），作者：Lori A. MacVittIE（O’Reilly出版社） 对XAML进行了非常棒地介绍。   总结

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

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