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

使用图像

虽然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进行了非常棒地介绍。