Bild

Die .NET Multi-Platform App UI (.NET MAUI) Image zeigt ein Bild an, das aus einer lokalen Datei, einem URI oder einem Stream 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:

• Aspectvom Typ Aspectdefiniert den Skalierungsmodus des Bilds.
• IsAnimationPlayingvom Typ boolbestimmt, ob ein animiertes GIF wiedergegeben oder angehalten wird. Der Standardwert dieser Eigenschaft ist false.
• IsLoadingvom Typ boolgibt den Ladestatus des Bilds an. Der Standardwert dieser Eigenschaft ist false.
• IsOpaquevom 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.

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

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

In XAML können Bilder aus Dateien und URIs geladen werden, indem der Dateiname oder URI als Zeichenfolgenwert für die eigenschaft Source angegeben wird. Bilder können auch aus Datenströmen in XAML über benutzerdefinierte Markuperweiterungen geladen werden.

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

Laden eines lokalen Bilds

Bilder können Ihrem App-Projekt hinzugefügt werden, indem sie in den Ordner Resources\Images Ihres Projekts gezogen werden, wobei die Build-Aktion automatisch auf MauiImagefestgelegt wird. Beim Erstellen werden Vektorbilder auf die richtigen Auflösungen für die Zielplattform und das Gerät angepasst und Ihrem 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 unter Übersicht über App-Ressourcen auf developer.android.com.

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 eigenschaft Image.Source angegeben werden kann:

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

Laden eines Remoteimages

Remotebilder können heruntergeladen und angezeigt werden, indem man einen URI als Wert der Eigenschaft Source angibt.

<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 der Uriliest. 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.
• CacheValidityvom Typ TimeSpan, gibt an, wie lange das Bild lokal gespeichert wird. Der Standardwert dieser Eigenschaft ist 1 Tag.
• CachingEnabledvom Typ booldefiniert, ob das Zwischenspeichern 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)
};

Ein Schriftart-Symbol laden

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

Laden animierter GIFs

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

<Image Source="demo.gif" />

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 falsehat. Wenn ein animiertes GIF geladen wird, wird es daher erst wiedergegeben, wenn die IsAnimationPlaying-Eigenschaft auf truefestgelegt ist. Die Wiedergabe kann beendet werden, indem die eigenschaft IsAnimationPlaying auf falsezurückgesetzt wird. Beachten Sie, dass diese Eigenschaft beim Anzeigen einer Nicht-GIF-Bildquelle keine Auswirkung hat.

Steuern der Bildskalierung

Die Aspect-Eigenschaft bestimmt, wie das Bild an den Anzeigebereich skaliert wird und auf eines der Member der Aspect-Enumeration festgelegt werden soll:

• AspectFit - Bild (falls erforderlich) mit Balken einrahmen, damit das gesamte Bild in den Anzeigebereich passt. Leerraum wird oben/unten oder an den Seiten hinzugefügt, je nachdem, ob das Bild breit oder hoch ist.
• AspectFill – klammert das Bild aus, sodass es den Anzeigebereich ausfüllt und dabei das Seitenverhältnis beibehalten wird.
• Fill – Streckt das Bild, um den Anzeigebereich vollständig und genau auszufüllen. Dies kann dazu führen, dass das Bild verzerrt wird.
• Center - Das Bild wird im Anzeigebereich zentriert, während das Seitenverhältnis beibehalten wird.