Bilder inXamarin.FormsImages in Xamarin.Forms

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Images können über Plattformen hinweg gemeinsam genutzt werden Xamarin.Forms , Sie können speziell für jede Plattform geladen werden, oder Sie können zur Anzeige heruntergeladen werden.Images can be shared across platforms with Xamarin.Forms, they can be loaded specifically for each platform, or they can be downloaded for display.

Bilder sind ein wichtiger Bestandteil der Anwendungs Navigation, Benutzerfreundlichkeit und Branding.Images are a crucial part of application navigation, usability, and branding. Xamarin.FormsAnwendungen müssen in der Lage sein, Bilder auf allen Plattformen gemeinsam zu nutzen, aber auch möglicherweise unterschiedliche Images auf jeder Plattform anzuzeigen. applications need to be able to share images across all platforms, but also potentially display different images on each platform.

Für Symbole und Begrüßungs Bildschirme sind auch plattformspezifische Bilder erforderlich. Diese müssen Platt Form bezogen konfiguriert werden.Platform-specific images are also required for icons and splash screens; these need to be configured on a per-platform basis.

Anzeigen von BildernDisplay images

Xamarin.Formsverwendet die- Image Ansicht, um Bilder auf einer Seite anzuzeigen. uses the Image view to display images on a page. Es gibt mehrere wichtige Eigenschaften:It has several important properties:

  • Source-Eine- ImageSource Instanz, entweder Datei, Uri oder Ressource, mit der das anzuzeigende Bild festgelegt wird.Source - An ImageSource instance, either File, Uri or Resource, which sets the image to display.
  • Aspect: Gibt an, wie die Größe des Bilds innerhalb der Grenzen, in denen es angezeigt wirdAspect - How to size the image within the bounds it is being displayed within (whether to stretch, crop or letterbox).

ImageSourceInstanzen können mithilfe statischer Methoden für jeden Typ von Bildquelle abgerufen werden:ImageSource instances can be obtained using static methods for each type of image source:

  • FromFile: Erfordert einen Dateinamen oder einen Dateipfad, der auf jeder Plattform aufgelöst werden kann.FromFile - Requires a filename or filepath that can be resolved on each platform.
  • FromUri-Erfordert ein URI-Objekt, z. b.FromUri - Requires a Uri object, eg. new Uri("http://server.com/image.jpg") .new Uri("http://server.com/image.jpg") .
  • FromResource: Erfordert einen Ressourcen Bezeichner für eine Bilddatei, die in das Anwendungs-oder .NET Standard Bibliotheksprojekt eingebettet ist, mit einer Buildaktion: EmbeddedResource.FromResource - Requires a resource identifier to an image file embedded in the application or .NET Standard library project, with a Build Action:EmbeddedResource.
  • FromStream-Erfordert einen Stream, der Bilddaten bereitstellt.FromStream - Requires a stream that supplies image data.

Die- Aspect Eigenschaft bestimmt, wie das Bild so skaliert wird, dass es in den Anzeigebereich passt:The Aspect property determines how the image will be scaled to fit the display area:

  • Fill-Gestreckt das Bild vollständig und gefüllt den Anzeigebereich.Fill - Stretches the image to completely and exactly fill the display area. Dies kann dazu führen, dass das Bild verzerrt wird.This may result in the image being distorted.
  • AspectFill-Schneidet das Bild ab, sodass es den Anzeigebereich füllt und dabei den Aspekt bewahrt (d. h. keine Verzerrung).AspectFill - Clips the image so that it fills the display area while preserving the aspect (i.e. no distortion).
  • AspectFit-Letterboxes das Bild (falls erforderlich), sodass das gesamte Bild in den Anzeigebereich passt, wobei je nachdem, ob das Bild breit oder hoch ist, leerer Leerraum zum oberen bzw. unteren Rand hinzugefügt wird.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.

Images können aus einer lokalen Datei, einer eingebetteten Ressource, heruntergeladenoder aus einem Stream geladen werden.Images can be loaded from a local file, an embedded resource, downloaded, or loaded from a stream. Außerdem können Schriftart Symbole in der Ansicht angezeigt werden, Image indem die Schriftart Symbol Daten in einem-Objekt angegeben werden FontImageSource .In addition, font icons can be displayed by the Image view by specifying the font icon data in a FontImageSource object. Weitere Informationen finden Sie unter Anzeigen von Schriftart Symbolen im Schriftarten Handbuch.For more information, see Display font icons in the Fonts guide.

Lokale ImagesLocal images

Bilddateien können zu jedem Anwendungsprojekt hinzugefügt und aus frei gegebenem Code referenziert werden Xamarin.Forms .Image files can be added to each application project and referenced from Xamarin.Forms shared code. Diese Vorgehensweise ist zum Verteilen plattformspezifischer Bilder erforderlich. Beispielsweise kann es vorkommen, dass auf verschiedenen Plattformen unterschiedliche Auflösungen oder geringfügig abweichende Designs verwendet werden.This method of distributing images is required when images are platform-specific, such as when using different resolutions on different platforms, or slightly different designs.

Zur Verwendung eines einzelnen Bilds für alle apps muss derselbe Dateiname auf jeder Plattform verwendet werden, und es muss sich um einen gültigen Android-Ressourcennamen handeln (d. h. nur Kleinbuchstaben, Ziffern, Unterstriche und der Zeitraum sind zulässig).To use a single image across all apps, the same filename must be used on every platform, and it should be a valid Android resource name (i.e. only lowercase letters, numerals, the underscore, and the period are allowed).

  • IOS : die bevorzugte Methode zum Verwalten und unterstützen von Images seit IOS 9 ist die Verwendung von Asset Catalog-Image Sätzen, die alle Versionen eines Abbilds enthalten, die zur Unterstützung verschiedener Geräte und Skalierungsfaktoren für eine Anwendung erforderlich sind.iOS - The preferred way to manage and support images since iOS 9 is to use Asset Catalog Image Sets, which should contain all of the versions of an image that are necessary to support various devices and scale factors for an application. Weitere Informationen finden Sie unter Hinzufügen von Bildern zu einem Asset Catalog-Image Satz.For more information, see Adding Images to an Asset Catalog Image Set.
  • Android : Platzieren Sie Images im Ressourcen/drawable- Verzeichnis mit der Buildaktion "androidresource".Android - Place images in the Resources/drawable directory with Build Action: AndroidResource. High-und Low-dpi-Versionen eines Bilds können auch bereitgestellt werden (in entsprechend benannten Ressourcen Unterverzeichnissen wie drawable-ldpi, drawable-hdpiund drawable-xhdpi).High- and low-DPI versions of an image can also be supplied (in appropriately named Resources subdirectories such as drawable-ldpi, drawable-hdpi, and drawable-xhdpi).
  • Universelle Windows-Plattform (UWP) : Standardmäßig sollten Images im Stammverzeichnis der Anwendung mit der Buildaktion "Content" platziert werden.Universal Windows Platform (UWP) - By default, images should be placed in the application's root directory with Build Action: Content. Alternativ können Bilder in einem anderen Verzeichnis platziert werden, das dann mit einem plattformspezifischen angegeben wird.Alternatively, images can be placed in a different directory which is then specified with a platform-specific. Weitere Informationen finden Sie unter Standard Image Verzeichnis unter Windows.For more information, see Default image directory on Windows.

Wichtig

Vor IOS 9 wurden Images in der Regel im Ordner " Resources " mit der Buildaktion "bundleresource" platziert.Prior to iOS 9, images were typically placed in the Resources folder with Build Action: BundleResource. Diese Methode zum Arbeiten mit Bildern in einer IOS-App wurde jedoch von Apple als veraltet markiert.However, this method of working with images in an iOS app has been deprecated by Apple. Weitere Informationen finden Sie unter Bildgrößen und Dateinamen.For more information, see Image Sizes and Filenames.

Die Einhaltung dieser Regeln für Datei Benennung und Platzierung ermöglicht dem folgenden XAML-Code das Laden und Anzeigen des Bilds auf allen Plattformen:Adhering to these rules for file naming and placement allows the following XAML to load and display the image on all platforms:

<Image Source="waterfront.jpg" />

Der entsprechende c#-Code lautet wie folgt:The equivalent C# code is as follows:

var image = new Image { Source = "waterfront.jpg" };

Die folgenden Screenshots zeigen das Ergebnis der Anzeige eines lokalen Bilds auf den einzelnen Plattformen:The following screenshots show the result of displaying a local image on each platform:

Beispielanwendung, die ein lokales Image anzeigtSample application displaying a local image

Um mehr Flexibilität Device.RuntimePlatform zu erhalten, kann die-Eigenschaft verwendet werden, um eine andere Bilddatei oder einen anderen Pfad für einige oder alle Plattformen auszuwählen, wie im folgenden Codebeispiel gezeigt:For more flexibility the Device.RuntimePlatform property can be used to select a different image file or path for some or all platforms, as shown in this code example:

image.Source = Device.RuntimePlatform == Device.Android
                ? ImageSource.FromFile("waterfront.jpg")
                : ImageSource.FromFile("Images/waterfront.jpg");

Wichtig

Um denselben Bilddateinamen auf allen Plattformen zu verwenden, muss der Name auf allen Plattformen gültig sein.To use the same image filename across all platforms the name must be valid on all platforms. Für Android-drawables gelten Benennungs Einschränkungen – nur Kleinbuchstaben, Ziffern, Unterstriche und Ziffern sind zulässig – und für die plattformübergreifende Kompatibilität muss dieser auf allen anderen Plattformen befolgt werden.Android drawables have naming restrictions – only lowercase letters, numbers, underscore, and period are allowed – and for cross-platform compatibility this must be followed on all the other platforms too. Der Beispiel Dateiname waterfront.png folgt den Regeln, aber Beispiele für ungültige Dateinamen sind "Wasser front.png", "WaterFront.png", "water-front.png" und "wåterfront.png".The example filename waterfront.png follows the rules, but examples of invalid filenames include "water front.png", "WaterFront.png", "water-front.png", and "wåterfront.png".

Native Auflösungen (Retina und High-dpi)Native resolutions (retina and high-DPI)

IOS, Android und UWP bieten Unterstützung für unterschiedliche Abbild Auflösungen, bei denen das Betriebssystem basierend auf den Funktionen des Geräts zur Laufzeit das geeignete Abbild auswählt.iOS, Android, and UWP include support for different image resolutions, where the operating system chooses the appropriate image at runtime based on the device's capabilities. Xamarin.Formsverwendet die APIs der systemeigenen Plattform zum Laden von lokalen Images, sodass automatisch Alternative Auflösungen unterstützt werden, wenn die Dateien ordnungsgemäß benannt sind und sich im Projekt befinden. uses the native platforms' APIs for loading local images, so it automatically supports alternate resolutions if the files are correctly named and located in the project.

Die bevorzugte Methode zum Verwalten von Abbildern seit IOS 9 ist das Ziehen von Bildern für jede erforderliche Auflösung, die für den passenden Asset Catalog-Image Satz erforderlich ist.The preferred way to manage images since iOS 9 is to drag images for each resolution required to the appropriate asset catalog image set. Weitere Informationen finden Sie unter Hinzufügen von Bildern zu einem Asset Catalog-Image Satz.For more information, see Adding Images to an Asset Catalog Image Set.

Vor IOS 9 konnten Retina-Versionen des Bilds im Ordner " Resources " platziert werden: zwei und dreifache der Auflösung mit einem- @2x oder-Suffix @3x für den Dateinamen vor der Dateierweiterung (z. b.Prior to iOS 9, retina versions of the image could be placed in the Resources folder - two and three times the resolution with a @2x or @3x suffixes on the filename before the file extension (eg. myimage@2x.png).myimage@2x.png). Diese Methode zum Arbeiten mit Bildern in einer IOS-App wurde jedoch von Apple als veraltet markiert.However, this method of working with images in an iOS app has been deprecated by Apple. Weitere Informationen finden Sie unter Bildgrößen und Dateinamen.For more information, see Image Sizes and Filenames.

Images alternativer Android-Auflösung sollten in speziell benannten Verzeichnissen im Android-Projekt platziert werden, wie im folgenden Screenshot zu sehen:Android alternate resolution images should be placed in specially-named directories in the Android project, as shown in the following screenshot:

Android-Image Speicherort mit mehreren AuflösungenAndroid multiple-resolution image location

UWP-Bilddateinamen können .scale-xxx vor der Dateierweiterung angehängt werden, wobei xxx der Prozentsatz der Skalierung ist, die auf das Medienobjekt angewendet wird, z. b. myimage.scale-200.png.UWP image file names can be suffixed with .scale-xxx before the file extension, where xxx is the percentage of scaling applied to the asset, e.g. myimage.scale-200.png. Auf Bilder kann dann in Code oder XAML ohne den Skalierungsmodifizierer verwiesen werden, z. b. nur myimage.png.Images can then be referred to in code or XAML without the scale modifier, e.g. just myimage.png. Die Plattform wählt die nächstgelegene geeignete Ressourcen Skala basierend auf dem aktuellen dpi-Wert der Anzeige aus.The platform will select the nearest appropriate asset scale based on the display's current DPI.

Weitere Steuerelemente, die Bilder anzeigenAdditional controls that display images

Einige Steuerelemente verfügen über Eigenschaften, die ein Bild anzeigen, z. b.:Some controls have properties that display an image, such as:

  • Buttonverfügt über eine- ImageSource Eigenschaft, die auf ein Bitmapbild festgelegt werden kann, das auf dem angezeigt werden soll Button .Button has an ImageSource property that can be set to a bitmap image to be displayed on the Button. Weitere Informationen finden Sie unter Verwenden von Bitmaps mit SchaltFlächen.For more information, see Using bitmaps with buttons.

  • ImageButtonverfügt über eine- Source Eigenschaft, die auf das Bild festgelegt werden kann, das im angezeigt werden soll ImageButton .ImageButton has a Source property that can be set to the image to display in the ImageButton. Weitere Informationen finden Sie unter Festlegen der Bildquelle.For more information, see Setting the image source.

  • ToolbarItemverfügt über eine- IconImageSource Eigenschaft, die auf ein Bild festgelegt werden kann, das aus einer Datei, einer eingebetteten Ressource, einem URI oder einem Stream geladen wird.ToolbarItem has an IconImageSource property that can be set to an image that's loaded from a file, embedded resource, URI, or stream.

  • ImageCellverfügt über eine- ImageSource Eigenschaft, die auf ein Bild festgelegt werden kann, das aus einer Datei, einer eingebetteten Ressource, einem URI oder einem Stream abgerufen wurde.ImageCell has an ImageSource property that can be set to an image retrieved from a file, embedded resource, URI, or stream.

  • Page.Page. Jeder Seitentyp, der von abgeleitet wird, Page verfügt über IconImageSource BackgroundImageSource die Eigenschaften und, denen eine Datei, eine eingebettete Ressource, ein URI oder ein Stream zugewiesen werden kann.Any page type that derives from Page has IconImageSource and BackgroundImageSource properties, which can be assigned a file, embedded resource, URI, or stream. Unter bestimmten Umständen, z. b. Wenn ein eine NavigationPage anzeigt ContentPage , wird das Symbol angezeigt, wenn es von der Plattform unterstützt wird.Under certain circumstances, such as when a NavigationPage is displaying a ContentPage, the icon will be displayed if supported by the platform.

    Wichtig

    Unter IOS kann die- Page.IconImageSource Eigenschaft nicht von einem Bild in einem Asset Catalog-Image Satz ausgefüllt werden.On iOS, the Page.IconImageSource property can't be populated from an image in an asset catalog image set. Laden Sie stattdessen Symbolbilder für die Page.IconImageSource Eigenschaft aus einer Datei, einer eingebetteten Ressource, einem URI oder einem Stream.Instead, load icon images for the Page.IconImageSource property from a file, embedded resource, URI, or stream.

Eingebettete BilderEmbedded images

Eingebettete Bilder werden ebenfalls mit einer Anwendung ausgeliefert (z. b. lokale Images), aber statt eine Kopie des Bilds in der Dateistruktur jeder Anwendung zu verwenden, wird die Bilddatei als Ressource in die Assembly eingebettet.Embedded images are also shipped with an application (like local images) but instead of having a copy of the image in each application's file structure the image file is embedded in the assembly as a resource. Diese Methode der Verteilung von Bildern wird empfohlen, wenn identische Bilder auf jeder Plattform verwendet werden, und ist besonders für das Erstellen von Komponenten geeignet, da das Bild mit dem Code gebündelt ist.This method of distributing images is recommended when identical images are used on each platform, and is particularly suited to creating components, as the image is bundled with the code.

Wenn Sie ein Bild in ein Projekt einbetten möchten, klicken Sie mit der rechten Maustaste, um neue Elemente hinzuzufügen, und wählen Sie die hinzu zufügenden Images aus.To embed an image in a project, right-click to add new items and select the image/s you wish to add. Standardmäßig hat das Image eine Buildaktion: None; Dies muss auf Buildaktion: EmbeddedResourcefestgelegt werden.By default the image will have Build Action: None; this needs to be set to Build Action: EmbeddedResource.

Buildaktion auf eingebettete Ressource festlegenSet build action to embedded resource

Die Buildaktion kann im Eigenschaften Fenster für eine Datei angezeigt und geändert werden.The Build Action can be viewed and changed in the Properties window for a file.

In diesem Beispiel ist die Ressourcen-ID WorkingWithImages.beach.jpg.In this example the resource ID is WorkingWithImages.beach.jpg. Die IDE hat diesen Standardwert generiert, indem der Standard Namespace für dieses Projekt mit dem Dateinamen verkettet wird, wobei ein Zeitraum (.) zwischen den einzelnen Werten verwendet wird.The IDE has generated this default by concatenating the Default Namespace for this project with the filename, using a period (.) between each value.

Wenn Sie eingebettete Bilder in Ordner innerhalb Ihres Projekts platzieren, werden die Ordnernamen in der Ressourcen-ID auch durch Punkte (.) getrennt.If you place embedded images into folders within your project, the folder names are also separated by periods (.) in the resource ID. Das Verschieben des beach.jpg Bilds in einen Ordner mit dem Namen myImages führt zu einer Ressourcen-ID WorkingWithImages.MyImages.beach.jpgMoving the beach.jpg image into a folder called MyImages would result in a resource ID of WorkingWithImages.MyImages.beach.jpg

Der Code zum Laden eines eingebetteten Bilds übergibt einfach die Ressourcen-ID an die-Methode, ImageSource.FromResource wie unten dargestellt:The code to load an embedded image simply passes the Resource ID to the ImageSource.FromResource method as shown below:

Image embeddedImage = new Image
{
    Source = ImageSource.FromResource("WorkingWithImages.beach.jpg", typeof(MyClass).GetTypeInfo().Assembly)
};

Hinweis

Um das Anzeigen von eingebetteten Bildern im Releasemodus auf dem universelle Windows-Plattform zu unterstützen, ist es erforderlich, die-Überladung von zu verwenden, die ImageSource.FromResource die Quellassembly angibt, in der nach dem Bild gesucht werden soll.To support displaying embedded images in release mode on the Universal Windows Platform, it's necessary to use the overload of ImageSource.FromResource that specifies the source assembly in which to search for the image.

Zurzeit gibt es keine implizite Konvertierung für Ressourcen Bezeichner.Currently there is no implicit conversion for resource identifiers. Stattdessen müssen Sie oder verwenden ImageSource.FromResource new ResourceImageSource() , um eingebettete Bilder zu laden.Instead, you must use ImageSource.FromResource or new ResourceImageSource() to load embedded images.

Die folgenden Screenshots zeigen das Ergebnis der Anzeige eines eingebetteten Bilds auf den einzelnen Plattformen:The following screenshots show the result of displaying an embedded image on each platform:

Beispielanwendung, die ein eingebettetes Bild anzeigtSample application displaying an embedded image

XAMLXAML

Da kein integrierter Typkonverter von in vorhanden ist string ResourceImageSource , können diese Typen von Bildern nicht System intern von XAML geladen werden.Because there is no built-in type converter from string to ResourceImageSource, these types of images cannot be natively loaded by XAML. Stattdessen kann eine einfache benutzerdefinierte XAML-Markup Erweiterung zum Laden von Bildern mithilfe einer in XAML angegebenen Ressourcen-ID geschrieben werden:Instead, a simple custom XAML markup extension can be written to load images using a Resource ID specified in XAML:

[ContentProperty (nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
 public string Source { get; set; }

 public object ProvideValue (IServiceProvider serviceProvider)
 {
   if (Source == null)
   {
     return null;
   }

   // Do your translation lookup here, using whatever method you require
   var imageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);

   return imageSource;
 }
}

Hinweis

Um das Anzeigen von eingebetteten Bildern im Releasemodus auf dem universelle Windows-Plattform zu unterstützen, ist es erforderlich, die-Überladung von zu verwenden, die ImageSource.FromResource die Quellassembly angibt, in der nach dem Bild gesucht werden soll.To support displaying embedded images in release mode on the Universal Windows Platform, it's necessary to use the overload of ImageSource.FromResource that specifies the source assembly in which to search for the image.

Um diese Erweiterung zu verwenden, fügen Sie dem XAML ein benutzerdefiniertes hinzu xmlns , indem Sie den korrekten Namespace und die entsprechenden assemblywerte für das ProjektTo use this extension add a custom xmlns to the XAML, using the correct namespace and assembly values for the project. Die Bildquelle kann dann mithilfe der folgenden Syntax festgelegt werden: {local:ImageResource WorkingWithImages.beach.jpg} .The image source can then be set using this syntax: {local:ImageResource WorkingWithImages.beach.jpg}. Unten ist ein vollständiges XAML-Beispiel dargestellt:A complete XAML example is shown below:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
   xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:local="clr-namespace:WorkingWithImages;assembly=WorkingWithImages"
   x:Class="WorkingWithImages.EmbeddedImagesXaml">
 <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
   <!-- use a custom Markup Extension -->
   <Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" />
 </StackLayout>
</ContentPage>

Problembehandlung für eingebettete BilderTroubleshoot embedded images

Debuggen von CodeDebug code

Da es manchmal schwierig ist zu verstehen, warum eine bestimmte Bildressource nicht geladen wird, kann der folgende Debugcode vorübergehend zu einer Anwendung hinzugefügt werden, um zu bestätigen, dass die Ressourcen ordnungsgemäß konfiguriert sind.Because it is sometimes difficult to understand why a particular image resource isn't being loaded, the following debug code can be added temporarily to an application to help confirm the resources are correctly configured. Er gibt alle bekannten Ressourcen, die in der angegebenen Assembly eingebettet sind, in die Konsole aus, um Probleme beim Laden von Ressourcen zu beheben.It will output all known resources embedded in the given assembly to the Console to help debug resource loading issues.

using System.Reflection;
// ...
// NOTE: use for debugging, not in released app code!
var assembly = typeof(MyClass).GetTypeInfo().Assembly;
foreach (var res in assembly.GetManifestResourceNames())
{
    System.Diagnostics.Debug.WriteLine("found resource: " + res);
}

In andere Projekte eingebettete BilderImages embedded in other projects

Standardmäßig sucht die- ImageSource.FromResource Methode nur nach Bildern in derselben Assembly wie der Code, der die-Methode aufgerufen hat ImageSource.FromResource .By default, the ImageSource.FromResource method only looks for images in the same assembly as the code calling the ImageSource.FromResource method. Mithilfe des obigen debugcodes können Sie feststellen, welche Assemblys eine bestimmte Ressource enthalten, indem Sie die- typeof() Anweisung in eine Type bekannte in jede Assembly ändern.Using the debug code above you can determine which assemblies contain a specific resource by changing the typeof() statement to a Type known to be in each assembly.

Die Quellassembly, die nach einem eingebetteten Image durchsucht wird, kann jedoch als Argument für die-Methode angegeben werden ImageSource.FromResource :However, the source assembly being searched for an embedded image can be specified as an argument to the ImageSource.FromResource method:

var imageSource = ImageSource.FromResource("filename.png",
            typeof(MyClass).GetTypeInfo().Assembly);

Images herunterladenDownload images

Bilder können für die Anzeige automatisch heruntergeladen werden, wie im folgenden XAML-Code dargestellt:Images can be automatically downloaded for display, as shown in the following XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       x:Class="WorkingWithImages.DownloadImagesXaml">
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
    <Label Text="Image UriSource Xaml" />
    <Image Source="https://aka.ms/campus.jpg" />
    <Label Text="campus.jpg gets downloaded from microsoft.com" />
  </StackLayout>
</ContentPage>

Der entsprechende c#-Code lautet wie folgt:The equivalent C# code is as follows:

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

Die ImageSource.FromUri -Methode erfordert ein Uri -Objekt und gibt ein neues zurück UriImageSource , das aus dem liest Uri .The ImageSource.FromUri method requires a Uri object, and returns a new UriImageSource that reads from the Uri.

Es gibt auch eine implizite Konvertierung für URI-Zeichen folgen. das folgende Beispiel funktioniert auch:There is also an implicit conversion for URI strings, so the following example will also work:

webImage.Source = "https://aka.ms/campus.jpg";

Die folgenden Screenshots zeigen das Ergebnis der Anzeige eines Remote Bilds auf den einzelnen Plattformen:The following screenshots show the result of displaying a remote image on each platform:

Beispielanwendung, die ein heruntergeladenes Image anzeigtSample application displaying a downloaded image

Herunterladen von Bild CachingDownloaded image caching

Ein UriImageSource unterstützt auch das Zwischenspeichern von heruntergeladenen Images, die über die folgenden Eigenschaften konfiguriert werden:A UriImageSource also supports caching of downloaded images, configured through the following properties:

  • CachingEnabledGibt an, ob das Caching aktiviert ist ( true standardmäßig).CachingEnabled - Whether caching is enabled (true by default).
  • CacheValidity-Ein TimeSpan , der definiert, wie lange das Bild lokal gespeichert wird.CacheValidity - A TimeSpan that defines how long the image will be stored locally.

Caching ist standardmäßig aktiviert und speichert das Image für 24 Stunden lokal.Caching is enabled by default and will store the image locally for 24 hours. Um das Zwischenspeichern für ein bestimmtes Image zu deaktivieren, instanziieren Sie die Image Quelle wie folgt:To disable caching for a particular image, instantiate the image source as follows:

image.Source = new UriImageSource { CachingEnabled = false, Uri = new Uri("https://server.com/image") };

Zum Festlegen eines bestimmten Cache Zeitraums (z. b. 5 Tage) instanziieren Sie die Image Quelle wie folgt:To set a specific cache period (for example, 5 days) instantiate the image source as follows:

webImage.Source = new UriImageSource
{
    Uri = new Uri("https://aka.ms/campus.jpg"),
    CachingEnabled = true,
    CacheValidity = new TimeSpan(5,0,0,0)
};

Durch die integrierte Zwischenspeicherung ist es sehr einfach, Szenarien wie das Scrollen von Listen mit Bildern zu unterstützen. dabei können Sie ein Bild in jeder Zelle festlegen (oder binden) und dem integrierten Cache das erneute Laden des Bilds ermöglichen, wenn die Zelle wieder in die Ansicht verwandelt wird.Built-in caching makes it very easy to support scenarios like scrolling lists of images, where you can set (or bind) an image in each cell and let the built-in cache take care of re-loading the image when the cell is scrolled back into view.

Animierte GIFsAnimated GIFs

Xamarin.Formsbietet Unterstützung für die Anzeige von kleinen, animierten GIFs. includes support for displaying small, animated GIFs. Dies wird erreicht, indem die- Image.Source Eigenschaft auf eine animierte GIF-Datei festgelegt wird:This is accomplished by setting the Image.Source property to an animated GIF file:

<Image Source="demo.gif" />

Wichtig

Die animierte GIF-Unterstützung in Xamarin.Forms bietet zwar die Möglichkeit, Dateien herunterzuladen, aber es unterstützt nicht das Caching oder Streaming animierter Gifs.While the animated GIF support in Xamarin.Forms includes the ability to download files, it does not support caching or streaming animated GIFs.

Wenn eine animierte GIF geladen wird, wird Sie standardmäßig nicht wiedergegeben.By default, when an animated GIF is loaded it will not be played. Dies liegt daran, IsAnimationPlaying dass die-Eigenschaft, mit der gesteuert wird, ob ein animiertes GIF wiedergegeben oder angehalten wird, den Standardwert aufweist false .This is because the IsAnimationPlaying property, that controls whether an animated GIF is playing or stopped, has a default value of false. Diese Eigenschaft vom Typ bool wird durch ein BindableProperty -Objekt unterstützt. Dies bedeutet, dass Sie das Ziel einer Datenbindung sein kann und formatiert wird.This property, of type bool, is backed by a BindableProperty object, which means that it can be the target of a data binding, and styled.

Wenn ein animiertes GIF geladen wird, wird es daher erst wiedergegeben, wenn die- IsAnimationPlaying Eigenschaft auf festgelegt ist true .Therefore, when an animated GIF is loaded it will not be played until the IsAnimationPlaying property is set to true. Die Wiedergabe kann dann durch Festlegen der- IsAnimationPlaying Eigenschaft auf beendet werden false .Playback can then be stopped by setting the IsAnimationPlaying property to false. Beachten Sie, dass diese Eigenschaft keine Auswirkung hat, wenn eine nicht-GIF-Bildquelle angezeigt wird.Note that this property has no effect when displaying a non-GIF image source.

Hinweis

Unter Android erfordert die animierte GIF-Unterstützung, dass Ihre Anwendung schnelle Renderer verwendet, und funktioniert nicht, wenn Sie sich für die Verwendung der Legacy-Renderer entschieden haben.On Android, animated GIF support requires that your application is using fast renderers, and won't work if you've opted into using the legacy renderers. Bei UWP erfordert die animierte GIF-Unterstützung mindestens eine Version von Windows 10 Anniversary Update (Version 1607).On UWP, animated GIF support requires a minimum release of Windows 10 Anniversary Update (version 1607).

Symbole und Begrüßungs BildschirmeIcons and splash screens

ImageAnwendungs Symbole und Begrüßungs Bildschirme sind zwar nicht mit der Ansicht verknüpft, aber auch Anwendungs Symbole und Begrüßungs Bildschirme sind eine wichtige Verwendung von Bildern in Xamarin.Forms Projekten.While not related to the Image view, application icons and splash screens are also an important use of images in Xamarin.Forms projects.

Das Festlegen von Symbolen und Begrüßungs Bildschirmen für Xamarin.Forms apps erfolgt in jedem Anwendungsprojekt.Setting icons and splash screens for Xamarin.Forms apps is done in each of the application projects. Dies bedeutet, dass Sie Images mit ordnungsgemäßer Größe für IOS, Android und UWP erstellen.This means generating correctly sized images for iOS, Android, and UWP. Diese Images sollten entsprechend den Anforderungen der einzelnen Plattformen benannt werden.These images should be named and located according to each platforms' requirements.

SymboleIcons

Weitere Informationen zum Erstellen dieser Anwendungs Ressourcen finden Sie unter IOS-arbeiten mit Images, Google Iconographyund UWP-Richtlinien für Kachel-und Symbol Ressourcen.See the iOS Working with Images, Google Iconography, and UWP Guidelines for tile and icon assets for more information on creating these application resources.

Außerdem können Schriftart Symbole in der Ansicht angezeigt werden, Image indem die Schriftart Symbol Daten in einem-Objekt angegeben werden FontImageSource .In addition, font icons can be displayed by the Image view by specifying the font icon data in a FontImageSource object. Weitere Informationen finden Sie unter Anzeigen von Schriftart Symbolen im Schriftarten Handbuch.For more information, see Display font icons in the Fonts guide.

BegrüßungsbildschirmeSplash screens

Nur IOS-und UWP-Anwendungen erfordern einen Begrüßungsbildschirm (auch als Startbildschirm oder Standardbild bezeichnet).Only iOS and UWP applications require a splash screen (also called a startup screen or default image).

Weitere Informationen finden Sie in der Dokumentation zu IOS arbeiten mit Bildern und Begrüßungs Bildschirmen im Windows dev Center.Refer to the documentation for iOS Working with Images and Splash screens on the Windows Dev Center.