Freigeben über

Image

  • Artikel

Die .NET Multi-Platform App UI (.NET MAUI) Image zeigt ein Bild an, das aus einer lokalen Datei, einem URI oder einem Datenstrom geladen werden kann. Die standardmäßigen Plattformbildformate werden unterstützt, einschließlich animierter GIFs, und lokale SVG-Dateien (Scalable Vector Graphics) werden ebenfalls unterstützt. Weitere Informationen zum Hinzufügen von Bildern zu einem .NET MAUI-App-Projekt finden Sie unter Hinzufügen von Bildern zu einem .NET MAUI-App-Projekt.

Image definiert die folgenden Eigenschaften:

  • Aspect, vom Typ Aspect, definiert den Skalierungsmodus des Bilds.
  • IsAnimationPlaying, vom Typ bool, bestimmt, ob ein animiertes GIF wiedergegeben oder beendet wird. Der Standardwert dieser Eigenschaft ist false.
  • IsLoading, vom Typ bool, gibt den Ladestatus des Bilds an. Der Standardwert dieser Eigenschaft ist false.
  • IsOpaque, vom Typ bool, gibt an, ob das Renderingmodul das Bild beim Rendern als undurchsichtig behandeln kann. Der Standardwert dieser Eigenschaft ist false.
  • Source, vom Typ ImageSource, gibt die Quelle des Bilds an.

Diese Eigenschaften werden durch BindableProperty Objekte gesichert, was bedeutet, dass sie formatiert werden können und das Ziel von Datenbindungen sein können.

Hinweis

Schriftartsymbole können durch angabe Image der Schriftartsymboldaten als FontImageSource Objekt angezeigt werden. Weitere Informationen finden Sie unter Anzeigeschriftartsymbole.

Die ImageSource Klasse definiert die folgenden Methoden, mit denen ein Bild aus verschiedenen Quellen geladen werden kann:

  • FromFile gibt ein FileImageSource Bild aus einer lokalen Datei zurück.
  • FromUri gibt einen UriImageSource Wert zurück, der ein Bild aus einem angegebenen URI herunterlädt und liest.
  • FromStream gibt ein StreamImageSource Bild aus einem Datenstrom zurück, der Bilddaten bereitstellt.

In XAML können Bilder aus Dateien und URIs geladen werden, indem sie den Dateinamen oder URI als Zeichenfolgenwert für die Source Eigenschaft angeben. Bilder können auch aus Datenströmen in XAML über benutzerdefinierte Markuperweiterungen geladen werden.

Wichtig

Bilder werden in ihrer vollständigen Auflösung angezeigt, es sei denn, die Größe der Image Grafik wird durch das Layout eingeschränkt, oder die HeightRequest Eigenschaft WidthRequest oder Eigenschaft des Image Objekts wird angegeben.

Informationen zum Hinzufügen von App-Symbolen und einem Begrüßungsbildschirm zu Ihrer App finden Sie unter App-Symbole und Begrüßungsbildschirm.

Laden eines lokalen Bilds

Bilder können ihrem App-Projekt hinzugefügt werden, indem sie in den Ordner "Ressourcen\Bilder " Ihres Projekts gezogen werden, in dem die Buildaktion automatisch auf MauiImage festgelegt wird. Zur Erstellungszeit werden Vektorbilder in die richtigen Auflösungen für die Zielplattform und das Gerät geändert und dem App-Paket hinzugefügt. Dies ist erforderlich, da unterschiedliche Plattformen unterschiedliche Bildauflösungen unterstützen, und das Betriebssystem wählt die entsprechende Bildauflösung zur Laufzeit basierend auf den Funktionen des Geräts aus.

Um android-Ressourcenbenennungsregeln einzuhalten, müssen alle lokalen Bilddateinamen kleingeschrieben sein, mit einem Buchstabenzeichen beginnen und enden und nur alphanumerische Zeichen oder Unterstriche enthalten. Weitere Informationen finden Sie in der Übersicht über App-Ressourcen zu developer.android.com.

Wichtig

.NET MAUI konvertiert SVG-Dateien in PNG-Dateien. Daher sollte beim Hinzufügen einer SVG-Datei zu Ihrem .NET MAUI-App-Projekt aus XAML oder C# mit einer PNG-Erweiterung verwiesen werden.

Die Einhaltung dieser Regeln für die Benennung und Platzierung von Dateien ermöglicht das Laden und Anzeigen eines Bilds durch den folgenden XAML-Code:

<Image Source="dotnet_bot.png" />

Der entsprechende C#-Code lautet:

Image image = new Image
{
    Source = ImageSource.FromFile("dotnet_bot.png")
};

Die ImageSource.FromFile Methode erfordert ein string Argument und gibt ein neues FileImageSource Objekt zurück, das das Bild aus der Datei liest. Es gibt auch einen impliziten Konvertierungsoperator, mit dem der Dateiname als string Argument für die Image.Source Eigenschaft angegeben werden kann:

Image image = new Image { Source = "dotnet_bot.png" };

Laden eines Remoteimages

Remotebilder können heruntergeladen und angezeigt werden, indem sie einen URI als Wert der Source Eigenschaft angeben:

<Image Source="https://aka.ms/campus.jpg" />

Der entsprechende C#-Code lautet:

Image image = new Image
{
    Source = ImageSource.FromUri(new Uri("https://aka.ms/campus.jpg"))
};

Die ImageSource.FromUri Methode erfordert ein Uri Argument und gibt ein neues UriImageSource Objekt zurück, das das Bild aus dem Uri. Es gibt auch eine implizite Konvertierung für Zeichenfolgenbasierte URIs:

Image image = new Image { Source = "https://aka.ms/campus.jpg" };

Zwischenspeichern von Bildern

Das Zwischenspeichern von heruntergeladenen Bildern ist standardmäßig aktiviert, wobei zwischengespeicherte Bilder für 1 Tag gespeichert werden. Dieses Verhalten kann durch Festlegen von Eigenschaften der UriImageSource Klasse geändert werden.

Die UriImageSource-Klasse definiert die folgenden Eigenschaften:

  • Uri, vom Typ Uri, stellt den URI des Bilds dar, das für die Anzeige heruntergeladen werden soll.
  • CacheValidity, vom Typ TimeSpan, gibt an, wie lange das Bild lokal gespeichert wird. Der Standardwert dieser Eigenschaft ist 1 Tag.
  • CachingEnabled, vom Typ bool, definiert, ob die Zwischenspeicherung von Bildern aktiviert ist. Der Standardwert dieser Eigenschaft ist true.

Diese Eigenschaften werden durch BindableProperty Objekte gesichert, was bedeutet, dass sie formatiert werden können und das Ziel von Datenbindungen sein können.

Um einen bestimmten Cachezeitraum festzulegen, legen Sie die Source Eigenschaft auf ein UriImageSource Objekt fest, das seine CacheValidity Eigenschaft festlegt:

<Image>
    <Image.Source>
        <UriImageSource Uri="https://aka.ms/campus.jpg"
                        CacheValidity="10:00:00:00" />
    </Image.Source>
</Image>

Der entsprechende C#-Code lautet:

Image image = new Image();
image.Source = new UriImageSource
{
    Uri = new Uri("https://aka.ms/campus.jpg"),
    CacheValidity = new TimeSpan(10,0,0,0)
};

In diesem Beispiel wird der Zwischenspeicherungszeitraum auf 10 Tage festgelegt.

Laden eines Bilds aus einem Datenstrom

Bilder können aus Datenströmen mit der ImageSource.FromStream Methode geladen werden:

Image image = new Image
{
    Source = ImageSource.FromStream(() => stream)
};

Wichtig

Das Zwischenspeichern von Bildern ist unter Android beim Laden eines Bilds aus einem Stream mit der ImageSource.FromStream Methode deaktiviert. Dies liegt an fehlenden Daten, aus denen ein vernünftiger Cacheschlüssel erstellt werden soll.

Symbol "Schriftart laden"

Mit der FontImage Markuperweiterung können Sie ein Schriftartsymbol in jeder Ansicht anzeigen, in der ein ImageSourceZeichen angezeigt werden kann. Es bietet die gleiche Funktionalität wie die FontImageSource Klasse, aber mit einer präziseren Darstellung.

Die Markuperweiterung FontImage wird von der Klasse FontImageExtension unterstützt, in der die folgenden Eigenschaften definiert werden:

  • FontFamily vom Typ string, die Schriftartfamilie, zu der das Schriftartsymbol gehört.
  • Glyph des Typs string, der Unicode-Zeichenwert des Schriftartsymbols.
  • Color vom Typ Color, die Farbe, die beim Anzeigen des Schriftartsymbols verwendet werden soll.
  • Size vom Typ double, der Größe des gerenderten Schriftartsymbols in geräteunabhängigen Einheiten. Der Standardwert ist 30. Darüber hinaus kann diese Eigenschaft auf einen benannten Schriftgrad festgelegt werden.

Hinweis

Im XAML-Parser kann die Klasse FontImageExtension zu FontImage abgekürzt werden.

Die Glyph Eigenschaft ist die Inhaltseigenschaft von FontImageExtension. Daher können Sie für XAML-Markupausdrücke, die mit geschweiften Klammern ausgedrückt werden, den Glyph= Teil des Ausdrucks entfernen, vorausgesetzt, es ist das erste Argument.

Das folgende XAML-Beispiel zeigt, wie die FontImage Markuperweiterung verwendet wird:

<Image BackgroundColor="#D1D1D1"
       Source="{FontImage &#xf30c;, FontFamily=Ionicons, Size=44}" />

In diesem Beispiel wird die gekürzte Version des FontImageExtension Klassennamens verwendet, um ein XBox-Symbol aus der Schriftfamilie Ionicons in einer Image:

Screenshot of the FontImage markup extension.

Während das Unicode-Zeichen für das Symbol lautet \uf30c, muss es in XAML escapet werden und so wird &#xf30c;.

Informationen zum Anzeigen von Schriftartsymbolen durch Angeben der Schriftsymboldaten in einem FontImageSource Objekt finden Sie unter Anzeigen von Schriftartsymbolen.

Laden animierter GIFs

.NET MAUI enthält Unterstützung für die Anzeige kleiner animierter GIFs. Dazu legen Sie die Source Eigenschaft auf eine animierte GIF-Datei fest:

<Image Source="demo.gif" />

Wichtig

Während die animierte GIF-Unterstützung in .NET MAUI die Möglichkeit zum Herunterladen von Dateien enthält, unterstützt sie das Zwischenspeichern oder Streamen animierter GIFs nicht.

Wenn ein animiertes GIF geladen wird, wird es standardmäßig nicht wiedergegeben. Dies liegt daran, dass die IsAnimationPlaying Eigenschaft, die steuert, ob ein animiertes GIF wiedergegeben oder angehalten wird, einen Standardwert von false. Wenn ein animiertes GIF geladen wird, wird es daher erst wiedergegeben, wenn die IsAnimationPlaying Eigenschaft auf festgelegt trueist. Die Wiedergabe kann beendet werden, indem die IsAnimationPlaying Eigenschaft auf false. Beachten Sie, dass diese Eigenschaft beim Anzeigen einer Nicht-GIF-Bildquelle keine Auswirkung hat.

Steuern der Bildskalierung

Die Aspect Eigenschaft bestimmt, wie das Bild so skaliert wird, dass es an den Anzeigebereich angepasst wird, und sollte auf eines der Member der Aspect Enumeration festgelegt werden:

  • AspectFit - letterboxes the image (if required) so that the entire image fits into the display area, with blank space added to the top/bottom or sides depending on whether the image is wide or tall.
  • AspectFill: Beschneidet das Bild so, dass es den Anzeigebereich ausfüllt und gleichzeitig das Seitenverhältnis beibehalten wird.
  • Fill: Streckt das Bild so, dass es den Anzeigebereich vollständig und genau ausfüllt. Dies kann dazu führen, dass das Bild verzerrt wird.
  • Center - Zentrieren Sie das Bild im Anzeigebereich, während das Seitenverhältnis beibehalten wird.