使用圖像
雖然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進行了非常棒地介紹。