Schnellstart: "Image" und "ImageBrush"
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Schnellstart: „Image“ und „ImageBrush“ (XAML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Hier erfahren Sie, wie Sie Bilder in Ihre Windows-Runtime-App mit C++, C# oder Visual Basic integrieren. Dies schließt auch die Verwendung der APIs der beiden XAML-Hauptklassen ein: Image und ImageBrush.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Siehe:

Image und ImageBrush

Sie können zum Rendern von Bildern 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. In diesem Beispiel wird veranschaulicht, wie ein Bild mit dem Image-Objekt erstellt wird.


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

Hier ist das gerenderte Image-Objekt.

Ein gerendertes Image-Objekt.

Die Source-Eigenschaft in diesem Beispiel gibt den Speicherort des Bilds an, das Sie anzeigen möchten. Sie können die Source festlegen, indem Sie die absolute URL (z. B. http://contoso.com/myPicture.jpg) oder eine URL relativ zu Ihrer App-Verpackungsstruktur angeben. Für die Zwecke dieses Beispiels legen wir die Bilddatei "licorice.jpg" im Stammverzeichnis unseres Projekts ab und deklarieren Projekteinstellungen, die das Bild als Inhalt einbeziehen.

Mit dem ImageBrush-Objekt können Sie ein Bild verwenden, um einen Bereich zu zeichnen, der ein Brush-Objekt aufnimmt. So können Sie beispielsweise einen ImageBrush für den Wert der Fill-Eigenschaft einer Ellipse oder die Background-Eigenschaft eines Canvas verwenden.

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


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

Hier ist die Ellipse, die vom ImageBrush gezeichnet wurde.

Eine Ellipse, die mit einem ImageBrush gezeichnet wurde.

Strecken von Bildern

Wenn Sie den Width-Wert oder Height-Wert eines Image nicht festlegen, wird es mit den von der Source angegebenen Abmessungen des Bilds angezeigt. Durch das Festlegen von Width und Height wird ein rechteckiger Bereich erstellt, in dem das Bild angezeigt wird. Sie können festlegen, wie das Bild den Bereich auffüllt, indem Sie die Stretch-Eigenschaft verwenden. Die Stretch-Eigenschaft akzeptiert die folgenden Werte, die durch die Stretch-Enumeration definiert werden:

  • None: Das Bild wird nicht bis zum Ausfüllen des Ausgabebereichs gestreckt. Beachten Sie bei dieser Stretch-Einstellung Folgendes: Wenn das Quellbild größer als der enthaltende Bereich ist, wird das Bild abgeschnitten. Dies sollte hier normalerweise jedoch vermieden werden, da nicht gesteuert werden kann, welcher Ausschnitt angezeigt wird, wie dies bei einer absichtlichen Clip-Anwendung der Fall ist.
  • Uniform: Die Bildgröße wird so angepasst, dass das Bild in die Abmessungen der Ausgabe passt. Das Seitenverhältnis des Inhalts bleibt jedoch erhalten. Dies ist der Standardwert.
  • UniformToFill: Das Bild wird so skaliert, dass es den Ausgabebereich vollständig ausfüllt, das ursprüngliche Seitenverhältnis jedoch beibehalten wird.
  • Fill: Die Bildgröße wird so angepasst, dass das Bild in die Abmessungen der Ausgabe passt. 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

Sie können die Clip-Eigenschaft verwenden, um einen Bereich der Bildausgabe zuzuschneiden. Die Clip-Eigenschaft wird für eine Geometry festgelegt. Zuschneiden wird derzeit nur für Rechtecke unterstützt.

Im nächsten Beispiel wird dargestellt, wie Sie eine RectangleGeometry als Zuschneidebereich für ein Bild verwenden. In diesem Beispiel definieren wir ein Image-Objekt mit einer Height von 200. Eine RectangleGeometry definiert ein Rechteck für den Bereich des Bilds, der angezeigt wird. Die Rect-Eigenschaft ist auf "25,25,100,150" festgelegt, wodurch ein Rechteck definiert ist, das bei Position "25,25" mit einer Breite von 100 und einer Höhe von 150 startet. Nur der Teil des Bilds, der sich innerhalb des Rechteckbereichs befindet, wird angezeigt


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

Dies ist das zugeschnittene Image-Objekt.

Ein Image-Objekt, das durch eine RectangleGeometry zugeschnitten wurde.

Anwenden von Transparenz

Sie können Opacity auf ein Bild anwenden, sodass das Bild teilweise durchsichtig 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 Image angewendet wird.


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

Dies ist das gerenderte Image-Objekt 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 API für Image, BitmapImage und BitmapSource enthält 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 Sie gezielt mit der Codierung und Decodierung von Bildern arbeiten möchten, weil Ihre App beispielsweise Bildkonvertierungen oder Bildbearbeitungsfunktionen ausführt, sollten Sie die im Windows.Graphics.Imaging-Namespace verfügbaren APIs verwenden. Diese Bildbearbeitungs-APIs können mit Windows-Runtime-Apps mit C++, C# oder Visual Basic oder von Windows-Runtime-Apps mit JavaScript verwendet werden. Die APIs werden außerdem von der Windows-Bilderstellungskomponente (Windows Imaging Component, WIC) von Windows 8 unterstützt.

Weitere Informationen zu App-Ressourcen und zum Packen von Bildquellen in einer App finden Sie unter Definieren von App-Ressourcen.

WriteableBitmap

Eine WriteableBitmap stellt eine 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. Verwenden Sie zum Definieren des Pufferinhalts einer WriteableBitmap die PixelBuffer-Eigenschaft, um auf den Puffer zuzugreifen, und einen Datenstrom oder sprachspezifischen Puffertyp, um ihn zu füllen. Beispielcode finden Sie unter WriteableBitmap.

RenderTargetBitmap

Die RenderTargetBitmap-Klasse ist ab Windows 8.1 verfügbar. Diese Klasse kann die XAML-Benutzeroberflächenstruktur aus 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 hilfreiches Szenario ist die Erstellung eines Laufzeitminiaturbilds einer XAML-Seite für ein Navigationsschema. Dies kann beispielsweise die Bereitstellung eines Bildlinks über ein Hub-Steuerelement sein. RenderTargetBitmap verfügt über einige Einschränkungen hinsichtlich des Inhalts, der in dem erfassten Bild angezeigt wird. Weitere Informationen finden Sie im Referenzthema für RenderTargetBitmap.

Bildquellen und Skalierung

Sie sollten Ihre Bildquellen in mehreren empfohlenen Größen erstellen, damit die App immer top aussieht, wenn Windows 8 sie skaliert. Beim Angeben einer Source für eine Image können Sie eine Benennungskonvention verwenden, die automatisch die richtige Ressource für die aktuelle Skalierung referenziert. Einzelheiten zur Benennungskonvention und weiterführende Informationen finden Sie unter Schnellstart: Verwenden von Datei- oder Bildressourcen.

Weitere Informationen darüber, wie Sie Skalierungen in Ihrem App-Design berücksichtigen, finden Sie unter Richtlinien zum Skalieren auf die Pixeldichte.

Image und ImageBrush im Code

In der Regel werden Image und ImageBrush 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 Sie Image oder ImageBrush mit Code definieren, verwenden Sie die Standardkonstruktoren, und legen Sie dann die relevanten Eigenschaften (Image.Source und ImageBrush.ImageSource) fest. Für diese ist ein BitmapImage (kein URI) erforderlich, wenn Sie sie mithilfe von Code definieren. Falls es sich bei Ihrer Quelle um einen Datenstrom handelt, initialisieren Sie den Wert mit der SetSourceAsync-Methode. Ist Ihre Quelle ein Uniform Resource Identifier (URI), der Ihrer App Inhalt mit dem ms-appx- oder dem ms-resource-Schema hinzufügt, verwenden Sie den BitmapImage-Konstruktor, für den ein URI angegeben wird. Falls beim Abrufen oder Decodieren der Bildquelle Probleme mit der Zeitsteuerung auftreten und Sie alternativen Inhalt anzeigen müssen, bis die Bildquelle verfügbar ist, können Sie auch das ImageOpened-Ereignis behandeln. Beispielcode finden Sie unter Beispiel für XAML-Bilder.

Hinweis  Wenn Sie Bilder mithilfe von Code festlegen, können Sie die automatische Behandlung für das Zugreifen auf nicht qualifizierte Ressourcen mit den aktuellen Skalierungs- und Kulturqualifizierern verwenden. Oder verwenden Sie ResourceManager und ResourceMap mit Qualifizierern für Kultur und Skalierung, um die Ressourcen direkt abzurufen. Weitere Informationen finden Sie unter Ressourcenverwaltungssystem.
 

Bildbeispiele

Weitere Beispiele zur Verwendung von Bildern in Apps finden Sie unter Beispiel für XAML-Bilder. Zudem beinhaltet das Beispiel für eine vektorbasierte XAML-Zeichnung die Verwendung von ImageBrush auf der zugehörigen Seite Szenario 2.

Verwandte Themen

Roadmap für Windows-Runtime-Apps mit C# oder Visual Basic
Roadmap für Windows-Runtime-Apps mit C++
Schnellstart: Verwenden von Datei- oder Bildressourcen
Beispiel für XAML-Bilder
Image
BitmapSource

 

 

Anzeigen:
© 2017 Microsoft