Gewusst wie: Verwenden des Image-Elements
Dieses Beispiel zeigt, wie Sie mit dem Image-Element Bilder in eine Anwendung einbetten.
Beispiel
Das folgende Beispiel zeigt, wie ein Bild auf eine Breite von 200 Pixel gerendert wird. In diesem Extensible Application Markup Language (XAML)-Beispiel werden sowohl Attributsyntax als auch Eigenschaftensyntax für die Definition des Bilds verwendet. Weitere Informationen über Attributsyntax und Eigenschaftensyntax finden Sie unter Übersicht über Abhängigkeitseigenschaften. Ein BitmapImage wird zur Definition der Quelldaten des Bilds verwendet und für das Eigenschaftensyntaxbeispiel explizit definiert. Darüber hinaus wird die DecodePixelWidth von BitmapImage auf dieselbe Breite festgelegt wie die Width von Image. Hierdurch wird sichergestellt, dass zum Rendern des Bilds so wenig Speicher wie möglich benötigt wird.
.gif "Hinweis") Hinweis |
|---|
Im Allgemeinen gilt: Geben Sie zur Definition der Größe eines gerenderten Bilds die Width oder die Height an, jedoch nicht beide Werte.Das Seitenverhältnis des Bilds bleibt erhalten, wenn Sie nur einen Wert angeben.Andernfalls wird das Bild möglicherweise gestreckt oder verzerrt.Um das Streckverhalten des Bilds zu steuern, verwenden Sie die Eigenschaften Stretch und StretchDirection. |
| Hinweis |
|---|
Wenn Sie die Größe eines Bilds mit dem Wert Width oder Height angeben, müssen Sie DecodePixelWidth bzw. DecodePixelHeight auf die entsprechende Größe setzen. |
Mit der Stretch-Eigenschaft wird festgelegt, wie die Bildquelle gestreckt wird, um das Image-Element auszufüllen. Weitere Informationen finden Sie unter der Stretch-Enumeration.
<!-- 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>
Das folgende Beispiel zeigt, wie ein Bild auf eine Breite von 200 Pixel mithilfe von Code gerendert wird.
| Hinweis |
|---|
Sie müssen die BitmapImage-Eigenschaften in einem BeginInit-/EndInit-Block festlegen. |
' 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;