建圖像
爲了呈現圖像,您可以使用 Image 或 ImageBrush 對象。下面的示例演示如何創建圖像。
XAML
<Image Source="myPicture.png" />
Dim myImage As Image = New Image
myImage.Source = New BitmapImage(New Uri("myPicture.jpg", UriKind.RelativeOrAbsolute))
LayoutRoot.Children.Add(myImage)
在本例中,Source 屬性用於指定要顯示的圖像的位置。可以通過指定絕對
URL(例如,http://contoso.com/myPicture.jpg)來設置 Source,也可以指定相對於應用程序的 XAP 文件的
URL。對於前一示例,您需要將 XAP 文件放置於 myPicture.png 所在的文件夾。
您使用 ImageBrush 來使用圖像繪製採用畫筆的區域。例如,ImageBrush 可用於 Canvas 或 InkPresenter 的
Background 屬性的值。
說明:
Silverlight 並不支持所有圖像格式。
拉伸圖像
如果您沒有設置 Image 的 Width 或 Height 值(如上例所示),則它將使用 Source 指定的圖像的自然尺寸顯示。設置 Height
和 Width 將創建一個包含矩形區域,圖像將顯示在該區域中。您可以通過使用 Stretch 屬性指定圖像如何填充此包含區域。Stretch 屬性接受
Stretch 枚舉定義的下列值:
None:圖像不拉伸以適合輸出尺寸。
Uniform:圖像進行縮放,以適合輸出尺寸。但保留該內容的縱橫比。這是默認值。
UniformToFill:對圖像進行縮放,從而可以完全填充輸出區域,但保持其原始縱橫比。
Fill:視頻進行縮放,以適合輸出尺寸。由於內容的高度和寬度是獨立縮放的,因此圖像的原始縱橫比可能不會保留。也就是說,爲了完全填充輸出區域,圖像可能會失真。
下面的插圖顯示了不同的 Stretch 設置。
拉伸設置
下面的示例顯示一個 Image,它填充 300 x 300 像素的一個輸出區域,但保留其原始縱橫比,因爲 Stretch 屬性設置爲
UniformToFill。
XAML
<Canvas Width="300" Height="300" Background="Gray">
<Image Source="myImage.jpg" Stretch="UniformToFill" Width="300" Height="300" />
</Canvas>
說明:
在只設置一個約束屬性時(例如 Height),其他屬性(本例中爲 Width)將基於自然圖像的縱橫比自動計算。由於此行爲,設置 Stretch
屬性並不更改該行爲,除非它設置爲 None。
裁切圖像
可以通過使用 Clip 屬性裁切掉圖像輸出的某個區域來裁切圖像。您將 Clip 屬性設置爲
Geometry,這意味着可以從圖像中裁切掉各種幾何形狀(例如,橢圓、直線或複雜路徑)。有關創建幾何圖形的更多信息,請參見幾何圖形。
下面的示例演示如何將 EllipseGeometry 用作圖像的剪輯區域。在此示例中,用 Width 200 和 Height 150 定義了一個
Image 對象。一個 RadiusX 值爲 100、RadiusY 值爲 75、Center 值爲 100,75 的 EllipseGeometry
設置爲圖像的 Clip 屬性。只有位於橢圓區域內部的圖像部分纔會顯示。
XAML
<Grid x:Name="LayoutRoot" Background="White">
<Image Source="Water_lilies.jpg"
Width="200" Height="150">
<Image.Clip>
<EllipseGeometry RadiusX="100" RadiusY="75" Center="100,75"/>
</Image.Clip>
</Image>
</Grid>
用於剪輯圖像的 EllipseGeometry
說明:
除 Image 外的多種對象均可被剪輯。
說明:
創建裁切效果的另一種方法是通過使用漸變來應用 OpacityMask。在此情況下,因爲您使用的是
Opacity,所以可以在裁切中創建模糊邊緣。
應用 OpacityMask
您可以將 OpacityMask 應用於某一圖像,以便創建多種與不透明度相關的照片蒙板技術,例如虛光照效果,如下圖所示。
OpacityMask 創建的虛光照效果的示例
使用圖像繪製 (ImageBrush)
您使用 ImageBrush 來使用圖像繪製採用畫筆的區域。例如,ImageBrush 可用於 Canvas 或 InkPresenter 的
Background 屬性的值。有關畫筆的更多信息,請參見畫筆。
下面的 XAML 示例顯示如何將 Foreground 屬性設置爲 ImageBrush,其圖像將用作 TextBlock 呈現文本的填充。
XAML
<!-- TextBlock with an image brush applied to the text. -->
<TextBlock FontFamily="Verdana" FontSize="72"
FontStyle="Italic" FontWeight="Bold">
SHRUBBERY
<TextBlock.Foreground>
<ImageBrush ImageSource="forest.jpg"/>
</TextBlock.Foreground>
</TextBlock>
下圖顯示此 XAML 示例的結果。
用於填充文本的 ImageBrush
縮放和平移圖像
您可以使用稱作 Deep Zoom 的技術來實現對大型圖像或高分辨率圖像的集合的縮放和平移。
使用 Deep Zoom 的一個例子是 Hard Rock Memorabilia 站點。您可以使用鼠標滾輪進行縮放並通過拖動四處移動圖像。
通常,加載大型圖像並非用戶的最佳體驗,因爲需要等待圖像加載。Deep Zoom
通過以漸進方式加載較高分辨率的圖像,可幫助解決這一難題。這爲用戶帶來"煥然一新"的體驗。此外,用戶可以利用 Deep Zoom
的功能更改其圖像的視圖,並且使用帶給用戶圍繞圖像平滑"移動"印象的彈簧動畫。下面是使用 Deep Zoom 的示例:
探究非常大或高分辨率圖像:有關於此的一個典型示例就是放大一幅大型地圖的各部分,以便看到不同級別的細節,然後使用鼠標圍繞地圖圖面移動視圖。隨着用戶移動視圖,將使用動畫增強在視圖上從一個地方移到另一個地方的印象。另一個例子就是探究構成高分辨率圖形的專業照片合成。
三維攝影:拍攝某一房間的照片,連續拍攝將創建構成該房間的 360 度畫面的照片的集合。現在,用戶可以圍繞房間平移,每張照片都與其他照片混合。
廣告:您可以創建分辨率相對較低的圖像以表達廣告的整個主題,然後,逐漸增加更高分辨率的圖像以容納加深用戶印象的效果以及與產品有關的數據。在首次加載嵌入該廣告的頁面時,通過不斷加載更高分辨率的圖像,廣告將平滑銳化並吸引讀者的注意。此外,如果用戶的鼠標指針進入廣告,廣告的不同部分將放大。