概述

Silverlight 2 Beta 1版本發布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, IronPython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章將從Silverlight 2基礎知識、數據與通信、自定義控件、動畫、圖形圖像等幾個方面帶您快速進入Silverlight 2開發。

本文將介紹在Silverlight 2中進行圖片的處理，包括圖片的拉伸、裁剪、半透明遮罩等內容。

創建圖片

創建圖片，我們可以直接使用Image控件或者在上一篇講過的ImageBrush，使用ImageBrush可以填充圖形或者控件的前景色、背景色等，只需要指定ImageSource屬性。注意，在Silverlight 2 Beta 1中，目前似乎只支持.png格式的圖片。

<Canvas Background="#CDFCAE">    <Rectangle Canvas.Left="20" Canvas.Top="80"               Width="240" Height="136" RadiusX="15" RadiusY="15">        <Rectangle.Fill>            <ImageBrush ImageSource="a1.png"></ImageBrush>        </Rectangle.Fill>    </Rectangle>    <Image Source="b1.png" Canvas.Left="320" Canvas.Top="80"></Image></Canvas>

運行后如下所示：

圖片拉伸

當我們創建了一個圖片的時候，如果不指定它的寬度和高度，它將會使用默認的規格來顯示；如果指定了高和寬，圖片將顯示在指定高和寬的矩形區域內。可以通過蘇醒Stretch來指定圖片如何填充在該區域內，即圖片拉伸。Stretch屬性具有四個可選值：

None：不對圖片進行拉伸以便填充規定的尺寸。

Uniform：按比例進行拉伸，直到有一邊滿足規定的尺寸區域為止，其余部分不會被填充，按最小尺寸填充。

UniformToFill：按比例進行拉伸，直到完全填充規定的尺寸區域為止，超出該區域的將會被裁剪，按最大尺寸填充。

Fill：不按比例拉伸，完全填充規定的尺寸區域，將會破壞圖像的比例。

Stretch默認的屬性是Uniform，為了更直觀的看到這個四個值的區別，下面看一個例子，我們使用一個規格尺寸為160*90圖片，中間帶一個小的正方形：

在頁面上放置四個Border控件，大小為220*220，并在其中各放置一個Image，圖片的大小也定義為220*220，設置四個Image的Stretch屬性分別為None、Uniform、UniformToFill、Fill，如下所示：

<Canvas Background="#CDFCAE">    <Border BorderBrush="Black" BorderThickness="3"            Width="220" Height="220" Canvas.Left="40" Canvas.Top="50">        <Image Source="a2.png" Stretch="None" Width="220" Height="220"></Image>    </Border>    <Border BorderBrush="Black" BorderThickness="3"            Width="220" Height="220" Canvas.Left="330" Canvas.Top="50">        <Image Source="a2.png" Stretch="Uniform" Width="220" Height="220"></Image>    </Border>    <Border BorderBrush="Black" BorderThickness="3"            Width="220" Height="220" Canvas.Left="330" Canvas.Top="330">        <Image Source="a2.png" Stretch="UniformToFill" Width="220" Height="220"></Image>    </Border>    <Border BorderBrush="Black" BorderThickness="3"            Width="220" Height="220" Canvas.Left="40" Canvas.Top="330">        <Image Source="a2.png" Stretch="Fill" Width="220" Height="220"></Image>    </Border></Canvas>

運行后可以很明顯的看到這個四個值的區別，如下圖所示：

裁剪圖片

有時候我們只需要顯示出圖片的一部分，可以使用Clip屬性對圖片進行裁剪，在Clip屬性中我們可以設置任意的幾何圖形，注意是Geometry而非前面講過的Shape，關于Geometry后面會專門講到。如下面的例子，裁剪出一個橢圓的區域：

<Canvas Background="#CDFCAE">    <Image Source="a1.png" Canvas.Left="40" Canvas.Top="80"></Image>    <Image Source="a1.png" Canvas.Left="320" Canvas.Top="80">        <Image.Clip>            <EllipseGeometry Center="120,68" RadiusX="100" RadiusY="60">            </EllipseGeometry>        </Image.Clip>    </Image></Canvas>

運行后效果如下所示：

半透明遮罩

使用圖片的OpacityMask屬性，可以解釋為通過用OpacityMask屬性指定的畫刷的alpha通道值來遮掩圖片的alpha通道值，可以使用的畫刷有LinearGradientBrush, RadialGradientBrush和ImageBrush，而對于SolidColorBrush則可以直接通過Opacity屬性實現。如下面的例子，我們對圖片做一些漸變的效果：

<Canvas Background="#CDFCAE">    <Image Source="a1.png" Canvas.Left="160" Canvas.Top="80" Opacity="0.7">        <Image.OpacityMask>            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">                <GradientStop Offset="0.0" Color="#00000000" />                <GradientStop Offset="1.0" Color="#FF000000" />            </LinearGradientBrush>        </Image.OpacityMask>    </Image></Canvas>

運行后效果如下：

結束語

本文介紹了Silverlight中對于圖片的處理，在后面我們還將利用這些知識做一個綜合實例——實現圖片的倒影效果。

NET技術：一步一步學Silverlight ：圖片處理，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。