操作說明：使用 Image 元素
此範例會示範如何使用 Image 元素以在應用程式中包括影像。
定義影像
下列範例示範如何轉譯寬度為 200 像素的影像。 在這個 Extensible Application Markup Language (XAML) 範例中，同時使用了屬性語法和屬性標記語法來定義影像。 如需有關屬性 (Attribute) 語法和屬性 (Property) 語法的詳細資訊，請參閱相依性屬性概觀。 BitmapImage 是用來定義影像的來源資料，並且會針對屬性標記語法範例明確定義。 此外，BitmapImage 的 DecodePixelWidth 會設定為 與 Image 的 Width 相同寬度。 這麼做是為了確保僅使用最少量的記憶體來轉譯影像。
注意
一般而言，如果您想要指定轉譯影像的大小，請只指定 Width 或 Height，而不能同時指定兩者。 如果您只指定其中一項，便可維持影像的外觀比例。 否則，影像可能會意外地自動縮放或變形。 若要控制影像的自動縮放行為，請使用 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 than 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
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 than 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
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 than 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
