使用图像
虽然Silverlight是基于矢量的技术，但它也支持像素图像。XAML的<Image>元素用于处理图像。除了默认的属性如Canvas.Left，Canvas.Top，Height和Width，<Image>还需要知道要显示哪张图像。这个信息需要在Source属性中提供。你可以使用本地和远程序的URL，它支持两种图像格式：JPEG和PNG。例4-12是代码，图4-11是相应的输出。
<Canvasxmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ImageSource="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）
<Canvasxmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500"Height="500"Background="White">
<RectangleCanvas.Left="50"Canvas.Top="50"Width="200"Height="200"
Canvas.ZIndex="5">
<Rectangle.Fill>
<SolidColorBrushColor="Red" />
</Rectangle.Fill>
</Rectangle>
<RectangleCanvas.Left="100"Canvas.Top="100"Width="200"Height="200"
Canvas.ZIndex="4">
<Rectangle.Fill>
<SolidColorBrushColor="Green" />
</Rectangle.Fill>
</Rectangle>
<RectangleCanvas.Left="150"Canvas.Top="150"Width="200"Height="200"
Canvas.ZIndex="3">
<Rectangle.Fill>
<SolidColorBrushColor="Yellow" />
</Rectangle.Fill>
</Rectangle>
<RectangleCanvas.Left="200"Canvas.Top="200"Width="200"Height="200"
Canvas.ZIndex="2">
<Rectangle.Fill>
<SolidColorBrushColor="Blue" />
</Rectangle.Fill>
</Rectangle>
<TextBlockCanvas.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）
<Canvasxmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="600"Height="600">
<EllipseWidth="400"Height="400"Stroke="Black">
<Ellipse.Fill>
<RadialGradientBrushCenter="0.5 0.5"GradientOrigin="0.33 0.67"
RadiusX="0.5"RadiusY="0.5">
<GradientStopColor="Red"Offset="0"/>
<GradientStopColor="Green"Offset="0.33"/>
<GradientStopColor="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）
<Canvasxmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="600"Height="600">
<RectangleWidth="600"Height="600"Stroke="Black">
<Rectangle.Fill>
<LinearGradientBrushStartPoint="0.1 0.9"EndPoint="0.9 0.1">
<GradientStopColor="Red"Offset="0"/>
<GradientStopColor="Green"Offset="0.33"/>
<GradientStopColor="Blue"Offset="0.67"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<PathStroke="Black"Data="M 55 535 L 65 545 M 65 535 L 55 545" />
<PathStroke="Black"Data="M 215 375 L 225 385 M 225 375 L 215 385" />
<PathStroke="Black"Data="M 375 215 L 385 225 M 385 215 L 375 225" />
<LineX1="60"Y1="540"X2="540"Y2="60"Stroke="#7f000000" />
</Canvas>
最后和种画刷使用一种特殊的方式进行填充：一张图版或一个视频文件。当您使用图像填充一个对象时，Silverlight会自动拉伸图像以适应舞台。您也可以在一个矩形内椭圆内放置一段视频做为背景。
ImageBrush和VideoBrush的使用非常相似。你需要在相关属性内提供源文件的文件名：<ImageBrush>的ImageSource和<VideoBrush>的SourceName。您可以使用Stretch属性来指示Silverlight使用何种方式在舞台内填充，有以下选项：
None
保持原来的尺寸
Fill
完全填充可用区域，这样将不能保持纵横比
Uniform
进行拉伸并保持纵横比，直到宽或高适合显示区域
UniformToFill
进行拉伸并保持纵横比，直到宽和高都大于或等于显示区域的宽和高，这将导致部分内容被裁减。
例4-16演示了如何使用图像填充椭圆。如图4-14所示，这如我们期望的那样使用其他的形状来显示显示矩形图像和视频。关于使用视频的更多信息请参考第7章。
例4-16 使用图像画刷，XAML文件（ImageBrush.xaml）
<Canvasxmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="600"Height="600">
<EllipseCanvas.Top="75"Width="300"Height="150"Stroke="Black">
<Ellipse.Fill>
<ImageBrushImageSource="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进行了非常棒地介绍。