Bilder und Bildpinsel

  • Artikel

Sie können zum Anzeigen von Bildern das Image-Objekt oder das ImageBrush-Objekt verwenden. Ein Image-Objekt rendert ein Bild. Ein ImageBrush-Objekt zeichnet ein anderes Objekt mit einem Bild.

Sind dies die richtigen Elemente?

Verwenden Sie ein Image-Element, um ein eigenständiges Bild in Ihrer App anzuzeigen.

Verwenden Sie ImageBrush, um ein Image auf ein anderes Objekt anzuwenden. „ImageBrush“ kann u. a. für dekorative Effekte für Text oder Hintergründe für Steuerelemente oder Layoutcontainer verwendet werden.

UWP und WinUI 2

Wichtig

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

APIs für dieses Steuerelement sind in den Namespaces Windows.UI.Xaml.Controls und Windows.UI.Xaml.Media vorhanden.

Es wird empfohlen, die neueste WinUI 2-Version zu verwenden, um die aktuellsten Stile und Vorlagen für alle Steuerelemente abzurufen.

Ab Windows 10, Version 1607, unterstützt das Image-Element animierte GIF-Bilder. Bei Verwendung eines BitmapImage als Source für das Bild können Sie auf BitmapImage-APIs zugreifen, um die Wiedergabe des animierten GIF-Bilds zu steuern. Weitere Informationen findest du in den Anmerkungen auf der Seite für die BitmapImage-Klasse.

Hinweis

Animierte GIF-Unterstützung ist verfügbar, wenn Ihre App für Windows 10, Version 1607, kompiliert und mit Version 1607 (oder höher) ausgeführt wird. Wenn Ihre App für frühere Versionen kompiliert wurde oder auf früheren Versionen ausgeführt wird, wird der erste Frame des GIF-Bilds angezeigt, ist jedoch nicht animiert.

Erstellen eines Images

Öffnen Sie die WinUI 3-Katalog-App, und sehen Sie sich ImageBrushes in Aktion an.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab.

Abbild

In diesem Beispiel wird die Erstellung eines Bilds unter Verwendung des Image-Objekts veranschaulicht.

<Image Width="200" Source="sunset.jpg" />

Hier ist das gerenderte Image-Objekt.

Beispiel für ein Image-Element

In diesem Beispiel gibt die Source-Eigenschaft den Speicherort des Bilds an, das du anzeigen möchtest. Sie können die Quelle festlegen, indem Sie eine absolute URL (z. B. ) oder eine URL angeben, http://contoso.com/myPicture.jpgdie relativ zu Ihrer App-Paketstruktur ist. In unserem Beispiel legen wir die Bilddatei "sunset.jpg" im Stammordner unseres Projekts ab und deklarieren Projekteinstellungen, die die Bilddatei als Inhalt enthalten.

ImageBrush

Mit dem ImageBrush-Objekt kannst du ein Bild verwenden, um einen Bereich zu zeichnen, der ein Brush-Objekt akzeptiert. So kannst du beispielsweise ein ImageBrush-Objekt für den Wert der Fill-Eigenschaft einer Ellipse oder für den Wert der Background-Eigenschaft einer Canvas verwenden.

Im nächsten Beispiel ist dargestellt, wie „ImageBrush“ zum Zeichnen eines Ellipse verwendet wird.

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="sunset.jpg" />
   </Ellipse.Fill>
</Ellipse>

Hier ist die Ellipse, die von „ImageBrush“ gezeichnet wurde.

Eine Ellipse, die mit „ImageBrush“ gezeichnet wurde

Strecken von Bildern

Wenn du den Wert für Width oder Height eines Objekts vom Typ Image nicht festlegst, wird es mit den von Source angegebenen Bilddimensionen angezeigt. Durch das Festlegen von Width und Height wird ein rechteckiger Bereich erstellt, in dem das Bild angezeigt wird. Mithilfe der Stretch-Eigenschaft kannst du angeben, wie das Bild den enthaltenden Bereich ausfüllen soll. Die Stretch-Eigenschaft akzeptiert die folgenden Werte, die durch die Stretch-Enumeration definiert werden:

  • None: Das Bild wird nicht gestreckt, um den Ausgabebereich auszufüllen. Bei dieser Stretch-Einstellung ist Folgendes zu beachten: Ist das Quellbild größer als der enthaltende Bereich, wird das Bild abgeschnitten, was in der Regel nicht wünschenswert ist, da du anders als bei der bewussten Verwendung von Clip keine Kontrolle über den Anzeigebereich hast.
  • Uniform: Das Bild wird auf die Abmessungen der Ausgabe skaliert. Das Seitenverhältnis des Inhalts bleibt jedoch erhalten. Dies ist der Standardwert.
  • UniformToFill: Das Bild wird skaliert, sodass es den Ausgabebereich vollständig ausfüllt, und das ursprüngliche Seitenverhältnis wird beibehalten.
  • Fill: Das Bild wird auf die Abmessungen der Ausgabe skaliert. Da Höhe und Breite des Inhalts unabhängig voneinander dimensioniert werden, wird das ursprüngliche Seitenverhältnis möglicherweise nicht beibehalten. Mit anderen Worten, das Bild wird eventuell verzerrt, um den Ausgabebereich vollständig auszufüllen

Ein Beispiel für Streckeinstellungen

Zuschneiden von Bildern

Mit der Clip-Eigenschaft kannst du einen Bereich der Bildausgabe beschneiden. Die Clip-Eigenschaft wird für eine Geometry-Klasse festgelegt. Das Beschneiden wird derzeit nur für Rechtecke unterstützt.

Im nächsten Beispiel erfährst du, wie du eine RectangleGeometry-Klasse als Zuschneidebereich für ein Bild verwendest. In diesem Beispiel definieren wir ein Image-Objekt mit einer Höhe von 200. Eine RectangleGeometry-Klasse definiert ein Rechteck für den Bereich des Bilds, der angezeigt wird. Die Rect-Eigenschaft ist auf „25,25,100,150“ festgelegt. Dadurch wird ein Rechteck mit der Startposition „25,25“, der Breite „100“ und der Höhe „150“ definiert. Nur der Teil des Bilds, der sich innerhalb des Rechteckbereichs befindet, wird angezeigt.

<Image Source="sunset.jpg" Height="200">
    <Image.Clip>
        <RectangleGeometry Rect="25,25,100,150" />
    </Image.Clip>
</Image>

Hier sehen Sie das zugeschnittene Bild auf einem schwarzen Hintergrund.

Ein Image-Objekt, das mit einer RectangleGeometry-Klasse zugeschnitten wurde

Anwenden von Transparenz

Du kannst eine Deckkraft (Opacity) auf ein Bild anwenden, sodass es halb durchscheinend gerendert wird. Die Transparenzwerte reichen von 0,0 bis 1,0, wobei 1,0 vollständig deckend und 0,0 vollständig durchsichtig bedeutet. Im Beispiel wird dargestellt, wie eine Transparenz von 0,5 auf ein Bild angewendet wird.

<Image Height="200" Source="sunset.jpg" Opacity="0.5" />

Dies ist das gerenderte Bild mit einer Transparenz von 0,5 und einem schwarzen Hintergrund, der durch das teilweise durchlässige Bild zu sehen ist.

Ein Image-Objekt mit einer Transparenz von 0,5.

Bilddateiformate

Image und ImageBrush können die folgenden Bilddateiformate anzeigen:

  • JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)
  • BMP (Bitmap)
  • GIF (Graphics Interchange Format)
  • TIFF (Tagged Image File Format)
  • JPEG XR
  • ICO (Symbole)

Die APIs für Image, BitmapImage und BitmapSource enthalten keine dedizierten Methoden für das Codieren und Decodieren von Medienformaten. Sämtliche Codier- und Decodiervorgänge sind integriert. Aspekte dieser Vorgänge sind auf der Oberfläche allenfalls als Bestandteil von Ereignisdaten für Load-Ereignisse sichtbar. Falls du gezielt mit der Codierung und Decodierung von Bildern arbeiten möchtest, weil deine App beispielsweise Bildkonvertierungen oder Bildbearbeitungsfunktionen ausführt, musst du die im Windows.Graphics.Imaging-Namespace verfügbaren APIs verwenden. Die APIs werden außerdem von der Windows-Bilderstellungskomponente (Windows Imaging Component, WIC) unterstützt.

Weitere Informationen zu App-Ressourcen und zum Verpacken von Bildquellen in einer App finden Sie unter Laden von Bildern und Ressourcen, die für Skalierung, Design, hohen Kontrast usw. angepasst sind.

WriteableBitmap

WriteableBitmap stellt eine Bitmap-Quelle (BitmapSource) bereit, die geändert werden kann und nicht die grundlegende dateibasierte Decodierung aus der WIC verwendet. Sie können Bilder dynamisch bearbeiten und das aktualisierte Bild erneut rendern. Verwende zum Definieren des Pufferinhalts eines WriteableBitmap-Elements die PixelBuffer-Eigenschaft, um auf den Puffer zuzugreifen, und einen Datenstrom oder sprachspezifischen Puffertyp, um ihn zu füllen. Beispielcode findest du unter WriteableBitmap.

RenderTargetBitmap

Die RenderTargetBitmap-Klasse kann die XAML-Benutzeroberflächenstruktur aus einer ausgeführten App erfassen und dann eine Bitmap-Bildquelle darstellen. Nach der Erfassung kann diese Bildquelle auf andere Teile der App angewendet, vom Benutzer als Ressourcen- oder App-Daten gespeichert oder für andere Szenarien verwendet werden. Ein besonders nützliches Szenario ist das Erstellen einer Laufzeitminiaturansicht einer XAML-Seite für ein Navigationsschema. RenderTargetBitmap verfügt über einige Einschränkungen hinsichtlich des Inhalts, der in dem erfassten Bild angezeigt wird. Weitere Informationen findest du im API-Referenzthema für RenderTargetBitmap.

Bildquellen und Skalierung

Erstellen Sie Ihre Bildquellen in mehreren empfohlenen Größen, damit die App immer gut aussieht, wenn Windows sie skaliert. Beim Angeben von Source für Image können Sie eine Benennungskonvention verwenden, die automatisch auf die richtige Ressource für die aktuelle Skalierung verweist. Einzelheiten zur Namenskonvention sowie weiterführende Informationen findest du unter Schnellstart: Verwenden von Datei- oder Bildressourcen.

Weitere Informationen zur Berücksichtigung der Skalierung in Ihrem App-Design finden Sie unter UX-Richtlinien für Layout und Skalierung.

„Image“ und „ImageBrush“ im Code

In der Regel werden das Image- und das ImageBrush-Element mit XAML und nicht mit Code angegeben. Das liegt daran, dass diese Elemente häufig von Entwicklungstools als Teil einer XAML-UI-Definition ausgegeben werden.

Wenn du „Image“ oder „ImageBrush“ mithilfe von Code definierst, verwende die Standardkonstruktoren, und lege anschließend die relevante Quelleigenschaft (Image.Source oder ImageBrush.ImageSource) fest. Für die Quelleigenschaften ist ein BitmapImage-Objekt (kein URI) erforderlich, wenn du sie mithilfe von Code festlegst. Falls es sich bei deiner Quelle um einen Datenstrom handelt, initialisiere den Wert mit der SetSourceAsync-Methode. Ist deine Quelle ein URI (wozu auch App-Inhalte gehören, die das Schema ms-appx oder ms-resource verwenden), verwende den BitmapImage-Konstruktor, der einen URI akzeptiert. Für den Fall, dass beim Abrufen oder Decodieren der Bildquelle Probleme mit der Zeitsteuerung auftreten und du alternativen Inhalt anzeigen musst, bis die Bildquelle verfügbar ist, empfiehlt es sich unter Umständen auch, das ImageOpened-Ereignis zu behandeln. Beispielcode finden Sie im WinUI-Katalogbeispiel.

Hinweis

Wenn du Bilder mithilfe von Code einrichtest, kannst du die automatische Behandlung für den Zugriff auf nicht qualifizierte Ressourcen mit aktuellen Skalierungs- und Kulturqualifizierern verwenden. Alternativ kannst du ResourceManager und ResourceMap mit Qualifizierern für Kultur und Skalierung verwenden, um die Ressourcen direkt abzurufen. Weitere Informationen finden Sie unter Ressourcenverwaltungssystem.

Beispielcode herunterladen