HOW TO：使用 Image 項目

更新：2007 年 11 月

本範例示範如何使用 Image 項目，在應用程式中包含影像。

範例

下列範例示範如何呈現寬度為 200 像素的影像。這個可延伸標記語言 (XAML) 範例中使用了屬性 (Attribute) 語法和屬性 (Property) 標記語法來定義影像。如需屬性 (Attribute) 語法和屬性 (Property) 語法的詳細資訊，請參閱相依性屬性概觀。BitmapImage 是用來定義影像的來源資料，而且也針對屬性標記語法範例提供了明確的定義。此外，BitmapImage 的 DecodePixelWidth 也設定為與 Image 的 Width 寬度相同。這項設定的目的是為了以最少的記憶體容量來呈現影像。

注意事項：
一般來說，如果您想指定呈現影像的大小，只需要指定 Width 或 Height，但不能同時指定兩者。如果您只指定其中一項，影像的外觀比例 (Aspect Ratio) 就會保持不變。否則，影像可能會出現非預期的自動縮放 (Stretch) 或扭曲情形。若要控制影像的自動縮放行為，請使用 Stretch 和 StretchDirection 屬性。

注意事項：
當您使用 Width 或 Height 指定影像的大小時，應該將 DecodePixelWidth 或 DecodePixelHeight 一併設定為相同的對應大小。

Stretch 屬性決定了影像如何自動縮放以填滿影像項目。如需詳細資訊，請參閱 Stretch 列舉型別。

<!-- Simple image rendering. However, rendering an image this way may not
     result in the best use of application memory. See markup below which
     creates the same end result but using less memory. -->
<Image Width="200" 
Source="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg"/>

<Image Width="200">
  <Image.Source>
    <!-- To save significant application memory, set the DecodePixelWidth or  
     DecodePixelHeight of the BitmapImage value of the image source to the desired 
     height and width of the rendered image. If you don't do this, the application will 
     cache the image as though it were rendered as its normal size rather then just 
     the size that is displayed. -->
    <!-- Note: In order to preserve aspect ratio, only set either DecodePixelWidth
         or DecodePixelHeight but not both. -->
    <BitmapImage DecodePixelWidth="200"  
     UriSource="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg" />
  </Image.Source>
</Image>

下列範例顯示如何使用程式碼呈現 200 像素寬的影像。

注意事項：
BitmapImage 屬性必須在 BeginInit 和 EndInit 區塊中設定。

' Create Image Element
Dim myImage As New Image()
myImage.Width = 200

' Create source
Dim myBitmapImage As New BitmapImage()

' BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit()
myBitmapImage.UriSource = New Uri("C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg")

' To save significant application memory, set the DecodePixelWidth or  
' DecodePixelHeight of the BitmapImage value of the image source to the desired 
' height or width of the rendered image. If you don't do this, the application will 
' cache the image as though it were rendered as its normal size rather then just 
' the size that is displayed.
' Note: In order to preserve aspect ratio, set DecodePixelWidth
' or DecodePixelHeight but not both.
myBitmapImage.DecodePixelWidth = 200
myBitmapImage.EndInit()
'set image source
myImage.Source = myBitmapImage

// Create Image Element
Image myImage = new Image();
myImage.Width = 200;

// Create source
BitmapImage myBitmapImage = new BitmapImage();

// BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit();
myBitmapImage.UriSource = new Uri(@"C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg");

// To save significant application memory, set the DecodePixelWidth or  
// DecodePixelHeight of the BitmapImage value of the image source to the desired 
// height or width of the rendered image. If you don't do this, the application will 
// cache the image as though it were rendered as its normal size rather then just 
// the size that is displayed.
// Note: In order to preserve aspect ratio, set DecodePixelWidth
// or DecodePixelHeight but not both.
myBitmapImage.DecodePixelWidth = 200;
myBitmapImage.EndInit();
//set image source
myImage.Source = myBitmapImage;

請參閱

工作

影像項目範例

概念

影像處理概觀