Freigeben über

Bilder und Bildpinsel

  • Artikel

Zum Anzeigen eines Bilds können Sie entweder das Image-Objekt oder das ImageBrush-Objekt verwenden. Ein Image-Objekt rendert ein Bild, und 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 einen ImageBrush , um ein Bild auf ein anderes Objekt anzuwenden. Für einen ImageBrush werden dekorative Effekte für Text oder Hintergründe für Steuerelemente oder Layoutcontainer verwendet.

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.

Wir empfehlen die Verwendung der neuesten WinUI 2 zum Abrufen der aktuellsten Stile und Vorlagen für alle Steuerelemente.

Ab Windows 10, Version 1607, unterstützt das Image-Element animierte GIF-Bilder. Wenn Sie ein BitmapImage als Bildquelle verwenden, 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 und unter Version 1607 (oder höher) kompiliert wird. Wenn Ihre App für frühere Versionen kompiliert oder ausgeführt wird, wird der erste Frame des GIF angezeigt, aber nicht animiert.

Erstellen eines Images

Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie imageBrushes in Aktion.

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

Abbildung

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

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

Hier sehen Sie das gerenderte Image-Objekt.

Beispiel für ein Bildelement

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 zur App-Verpackungsstruktur ist. In unserem Beispiel fügen wir die Bilddatei "sunset.jpg" in den Stammordner unseres Projekts ein 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.

Das nächste Beispiel zeigt, wie Sie mit einem ImageBrush eine Ellipse zeichnen.

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

Hier sehen Sie die Ellipse, die vom ImageBrush gezeichnet wurden.

Eine Ellipse, die von einem ImageBrush gezeichnet wurde.

Strecken eines Bilds

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 Festlegen der Breite und Höhe 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:

  • Keine: Das Bild wird nicht gestreckt, um die Ausgabeabmessungen 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 skaliert, um die Ausgabeabmessungen anzupassen. Das Seitenverhältnis des Inhalts wird jedoch beibehalten. Dies ist der Standardwert.
  • UniformToFill: Das Bild wird skaliert, sodass es den Ausgabebereich vollständig ausfüllt, aber das ursprüngliche Seitenverhältnis behält.
  • Füllung: Das Bild wird skaliert, um die Ausgabeabmessungen anzupassen. Da die Höhe und Breite des Inhalts unabhängig voneinander skaliert werden, bleibt das ursprüngliche Seitenverhältnis des Bilds möglicherweise nicht erhalten. Das heißt, das Bild wird möglicherweise verzerrt, um den Ausgabebereich vollständig auszufüllen.

Ein Beispiel für Stretcheinstellungen.

Bild zuschneiden

Mit der Clip-Eigenschaft kannst du einen Bereich der Bildausgabe beschneiden. Die Clip-Eigenschaft wird für eine Geometry-Klasse festgelegt. Derzeit wird kein rechteckiger Clipping 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. Ein RectangleGeometry 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. Es wird nur der Teil des Bilds angezeigt, der sich im Bereich des Rechtecks befindet.

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

Hier sehen Sie das beschnittene Bild auf einem schwarzen Hintergrund.

Ein Image-Objekt, das von einer RectangleGeometry zugeschnitten wurde.

Anwenden einer Deckkraft

Du kannst eine Deckkraft (Opacity) auf ein Bild anwenden, sodass es halb durchscheinend gerendert wird. Die Deckkraftwerte liegen zwischen 0,0 und 1,0, wobei 1,0 vollständig undurchsichtig ist und 0,0 vollständig transparent ist. In diesem Beispiel wird gezeigt, wie eine Deckkraft von 0,5 auf ein Bild angewendet wird.

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

Hier sehen Sie das gerenderte Bild mit einer Deckkraft von 0,5 und einem schwarzen Hintergrund, der durch die teilweise Deckkraft zeigt.

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

Bilddateiformate

Image und ImageBrush können diese Bilddateiformate anzeigen:

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

Die APIs für Image, BitmapImage und BitmapSource enthalten keine dedizierten Methoden für das Codieren und Decodieren von Medienformaten. Alle Codierungs- und Decodierungsvorgänge sind integriert, und es werden höchstens Aspekte der Codierung oder Decodierung als Teil von Ereignisdaten für Ladeereignisse angezeigt. 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. Diese APIs werden auch von der Windows Imaging Component (WIC) in Windows unterstützt.

Weitere Informationen zu App-Ressourcen und zum Verpacken von Bildquellen in einer App finden Sie unter Laden von Bildern und Ressourcen, die auf Skalierung, Design, hohen Kontrast und andere zugeschnitten 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 ändern 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, als Ressource oder App-Daten vom Benutzer gespeichert oder für andere Szenarien verwendet werden. Ein besonders hilfreiches Szenario ist das Erstellen einer Laufzeitminiaturansicht einer XAML-Seite für ein Navigationsschema. RenderTargetBitmap hat einige Einschränkungen für den Inhalt, der im aufgenommenen Bild angezeigt wird. Weitere Informationen findest du im API-Referenzthema für RenderTargetBitmap.

Bildquellen und Skalierung

Sie sollten Ihre Bildquellen mit mehreren empfohlenen Größen erstellen, um sicherzustellen, dass Ihre App gut aussieht, wenn Windows sie skaliert. Wenn Sie eine Quelle für ein Bild angeben, können Sie eine Benennungskonvention verwenden, die automatisch auf die richtige Ressource für die aktuelle Skalierung verweist. Einzelheiten zur Benennungskonvention und weitere Informationen finden Sie in der Schnellstartanleitung: Verwenden von Datei- oder Bildressourcen.

Weitere Informationen zum Entwerfen der Skalierung finden Sie in den UX-Richtlinien für Layout und Skalierung.

Image und ImageBrush im Code

Es ist typisch, Image- und ImageBrush-Elemente mithilfe von XAML anstelle von Code anzugeben. Dies liegt daran, dass diese Elemente häufig die Ausgabe von Entwurfstools als Teil einer XAML-UI-Definition sind.

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 Ihre Quelle ein URI (wozu auch App-Inhalte gehören, die das Schema ms-appx oder ms-resource verwenden), verwenden Sie den BitmapImage-Konstruktor, der einen URI akzeptiert. Für den Fall, dass beim Abrufen oder Decodieren der Bildquelle Probleme mit der Zeitsteuerung auftreten und Sie den alternativen Inhalt anzeigen müssen, 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