Bilder in Xamarin.FormsImages in Xamarin.Forms

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Bilder können auf Plattformen mit Xamarin.Forms freigegeben werden, sie können speziell für jede Plattform geladen werden, oder für die 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.

Images sind ein entscheidender Punkt bei der Navigation in der Anwendung, Nutzbarkeit und branding.Images are a crucial part of application navigation, usability, and branding. Xamarin.Forms-Anwendungen müssen in der Lage, Freigeben von Bildern auf allen Plattformen, aber möglicherweise auch verschiedene Bilder auf jeder Plattform anzuzeigen.Xamarin.Forms applications need to be able to share images across all platforms, but also potentially display different images on each platform.

Clientplattform-spezifische Images sind auch für Symbole und Begrüßungsbildschirme erforderlich; für jede Plattform konfiguriert werden müssen.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.Forms nutzt die Image Ansicht zum Anzeigen von Bildern auf einer Seite.Xamarin.Forms uses the Image view to display images on a page. Es werden zwei wichtige Eigenschaften hat:It has two important properties:

  • Source -Eine ImageSource Instanz, entweder "Datei", "Uri" oder "Ressource, die das anzuzeigende Bild legt diese fest.Source - An ImageSource instance, either File, Uri or Resource, which sets the image to display.
  • Aspect -Gewusst wie: die Imagegröße innerhalb der Grenzen, die sie innerhalb von (ob Stretch "," Zuschneiden "oder" Letterbox) angezeigt wird.Aspect - How to size the image within the bounds it is being displayed within (whether to stretch, crop or letterbox).

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

  • FromFile – Erfordert einen Dateinamen oder ein Dateipfad, der auf jeder Plattform aufgelöst werden kann.FromFile - Requires a filename or filepath that can be resolved on each platform.
  • FromUri – Ein Uri-Objekt, z. B. erfordert.FromUri - Requires a Uri object, eg. new Uri("http://server.com/image.jpg") .new Uri("http://server.com/image.jpg") .
  • FromResource – Erfordert eine Ressourcen-ID in eine Bilddatei eingebettet in der Anwendung oder .NET Standard Library-Projekt mit einem Aktion: EmbeddedResource erstellen.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 Datenstrom, der Image-Daten bereitstellt.FromStream - Requires a stream that supplies image data.

Die Aspect Eigenschaft bestimmt, wie das Bild skaliert wird, um den Anzeigebereich anpassen:The Aspect property determines how the image will be scaled to fit the display area:

  • Fill -Gestreckt wird, das Bild, um vollständig und genau den Anzeigebereich ausfüllen.Fill - Stretches the image to completely and exactly fill the display area. Dies kann in das Bild verzerrt wird führen.This may result in the image being distorted.
  • AspectFill -Schneidet das Bild ab, so dass es sich um den Anzeigebereich ausfüllt, und gleichzeitig den Aspekt (d. h. ohne Verzerrung).AspectFill - Clips the image so that it fills the display area while preserving the aspect (ie. no distortion).
  • AspectFit -Letterbox das Bild (falls erforderlich), damit das gesamte Bild in den Anzeigebereich passt, mit Leerzeichen hinzugefügt, die oben/unten oder den Seiten, je nachdem, ob das Bild ist breit oder hoch.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 Image Ansicht angezeigt werden, indem die Schriftart Symbol Daten in einem FontImageSource-Objekt angegeben werden.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 jedes Anwendungsprojekt hinzugefügt und von Xamarin.Forms freigegebenen Code verwiesen werden.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.

Verwenden Sie ein einzelnes Abbild für alle apps die gleiche Dateinamen muss auf allen Plattformen verwendet werden, und er muss einen gültigen Ressourcennamen für Android (ie. nur Kleinbuchstaben, Ziffern, Unterstriche und den 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 (ie. only lowercase letters, numerals, the underscore, and the period are allowed).

  • iOS : die Möglichkeit zum Verwalten und unterstützen Bilder aus, da iOS 9 ist die Verwendung bevorzugter Bildzusammenstellungen für Asset-Katalog, die enthält alle Versionen der Bilddatei, die sind erforderlich, um Unterstützung für verschiedene Geräte und Skalierungsfaktoren für ein die Anwendung.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 Bilder hinzufügen, um eine Asset-Katalog-Image festzulegen.For more information, see Adding Images to an Asset Catalog Image Set.
  • Android -Platzieren von Bildern in der Ressourcen/drawable -Verzeichnis mit Buildvorgang: AndroidResource.Android - Place images in the Resources/drawable directory with Build Action: AndroidResource. Hohe und niedrige-DPI-Versionen eines Bildes können auch angegeben werden (in entsprechend benannt Ressourcen Unterverzeichnisse, wie z. B. drawable-Ldpi, drawable-Hdpi, und 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) -Platzieren von Bildern im Stammverzeichnis der Anwendung, mit Buildvorgang: Inhalt.Universal Windows Platform (UWP) - Place images in the application's root directory with Build Action: Content.

Wichtig

Vor iOS 9, wurden in der Regel Bilder platziert die Ressourcen Ordner mit Buildvorgang: BundleResource.Prior to iOS 9, images were typically placed in the Resources folder with Build Action: BundleResource. Allerdings ist diese Methode für die Arbeit mit Bildern in einer iOS-app von Apple veraltet.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.

Befolgen die folgenden Regeln für Dateibenennung und Platzierung kann der folgende XAML zum Laden und Anzeigen der Abbildung 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 aus:The equivalent C# code is as follows:

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

Die folgenden Screenshots zeigen das Ergebnis ein lokales Image auf jeder Plattform anzuzeigen: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

Zur Erhöhung der Flexibilität der Device.RuntimePlatform Eigenschaft kann auf eine andere Bilddatei oder den Pfad für einige oder alle Plattformen verwendet werden, wie in diesem Codebeispiel wird dargestellt: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

Verwendung der gleichen Dateiname des Bilds auf allen Plattformen 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. Android zeichenbarer Ressourcen haben benennungseinschränkungen – nur Kleinbuchstaben, Zahlen, einem Unterstrich und Punkt sind zulässig – und für die plattformübergreifende Kompatibilität Dies muss folgen auf den anderen Plattformen zu.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 Dateiname Beispiel waterfront.png folgt den Regeln jedoch Beispiele für ungültige Dateinamen enthalten "Wasser front.png", "WaterFront.png", "Wasser-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 enthalten Unterstützung für verschiedene bildauflösungen, in denen das Betriebssystem das entsprechende Image zur Laufzeit basierend auf die Funktionen des Geräts 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.Forms verwendet der nativen Plattformen-APIs für das Laden von lokalen Images, damit es automatisch alternative Lösungen unterstützt, wenn die Dateien ordnungsgemäß mit dem Namen und dem Projekt ein.Xamarin.Forms 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 Images, da iOS 9 ist, das Bilder für jede Lösung erforderlich, um die Gruppe die entsprechenden Asset-Katalog von Bildern zu ziehen.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 Bilder hinzufügen, um eine Asset-Katalog-Image festzulegen.For more information, see Adding Images to an Asset Catalog Image Set.

Vor iOS 9, Retina-Versionen des Images platziert werden konnte, der Ressourcen Ordner - 2 und 3 Mal die Auflösung mit einem @2x oder @3x Suffixe 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). Allerdings ist diese Methode für die Arbeit mit Bildern in einer iOS-app von Apple veraltet.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.

Bilder mit Android alternativen Auflösung platziert werden soll, im speziell benannte Verzeichnisse im Android-Projekt, wie im folgenden Screenshot gezeigt:Android alternate resolution images should be placed in specially-named directories in the Android project, as shown in the following screenshot:

Speicherort für die Android-Image mit mehreren AuflösungenAndroid multiple-resolution image location

UWP-Bilddateinamen können mit dem Suffix werden .scale-xxx vor der Dateierweiterung, wobei xxx ist der Prozentsatz der Skalierung auf das Medienobjekt angewendet wurde, 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. Images können im Code oder XAML, ohne den Scale-Modifizierer, z. B. nur dann verwiesen werden myimage.png.Images can then be referred to in code or XAML without the scale modifier, e.g. just myimage.png. Die Plattform wird die nächste geeignete Objektskalierung basierend auf der Anzeige des aktuellen DPI ausgewählt.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, wie z. B. angezeigt:Some controls have properties that display an image, such as:

  • Button verfügt über eine ImageSource -Eigenschaft, die auf ein Bitmap-Bild festgelegt werden kann, das auf dem Buttonangezeigt werden soll.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.

  • ImageButton verfügt über eine Source -Eigenschaft, die auf das Bild festgelegt werden kann, das im ImageButtonangezeigt werden soll.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.

  • ToolbarItem verfü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.

  • ImageCell verfü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 Page abgeleitet ist, verfügt über IconImageSource -und BackgroundImageSource -Eigenschaften, 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 NavigationPage zeigt eine ContentPage , das Symbol wird angezeigt, wenn von der Plattform unterstützt.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 die Page.IconImageSource Eigenschaft kann nicht aus einem Image in einem Satz für Asset-Katalog-Image nicht aufgefü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 auch mit einer Anwendung (z. B. lokalen Images) geliefert, aber anstatt eine Kopie des Abbilds in jeder Anwendung Dateistruktur das Image-Datei in der Assembly als Ressource eingebettet ist.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. Dieses Verfahren zum Verteilen von Abbildern wird empfohlen, wenn die identische Images auf jeder Plattform verwendet werden, und eignet sich insbesondere für das Erstellen von Komponenten, wie das Bild mit dem Code im Paket enthalten 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.

Maustaste, um ein Bild in einem Projekt einbetten, um neue Elemente hinzufügen, und wählen Sie die Bild/s, die Sie hinzufügen möchten.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 Bild Buildvorgang: keine; Dies muss festgelegt werden, um Buildvorgang: EmbeddedResource.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 Buildvorgang angezeigt und geändert werden können die Eigenschaften Fenster für eine Datei.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 diese Standardeinstellung generiert, durch die Verkettung der Standard-Namespace verwenden Sie für dieses Projekt mit dem Dateinamen, einen Punkt (.) zwischen den einzelnen Werten.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 Ordnern innerhalb Ihres Projekts ablegen, werden die Ordnernamen durch Punkte (.) in den Ressourcen-ID auch getrenntIf you place embedded images into folders within your project, the folder names are also separated by periods (.) in the resource ID. Verschieben der beach.jpg Image in einen Ordner namens MyImages würde eine Ressourcen-ID der WorkingWithImages.MyImages.beach.jpgMoving the beach.jpg image into a folder called MyImages would result in a resource ID of WorkingWithImages.MyImages.beach.jpg

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

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

Hinweis

Zum Anzeigen von eingebetteten Bildern im Releasemodus auf der universellen Windows-Plattform zu unterstützen, ist es erforderlich, verwenden Sie die Überladung von ImageSource.FromResource , angibt, dass die Assembly der Ereignisquelle in der für das Image 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 besteht keine implizite Konvertierung für die Ressourcen-IDs.Currently there is no implicit conversion for resource identifiers. Sie müssen stattdessen ImageSource.FromResource oder new ResourceImageSource() eingebettete Bilder zu laden.Instead, you must use ImageSource.FromResource or new ResourceImageSource() to load embedded images.

Die folgenden Screenshots zeigen das Ergebnis ein eingebettetes Bild auf jeder Plattform anzuzeigen: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 es ist kein integrierter Typ-Konverter aus string zu ResourceImageSource, diese Arten von Images können nicht systemintern 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-Markuperweiterung geschrieben werden, zum Laden von Bildern, die mit einem Ressourcen-ID in XAML angegeben: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

Zum Anzeigen von eingebetteten Bildern im Releasemodus auf der universellen Windows-Plattform zu unterstützen, ist es erforderlich, verwenden Sie die Überladung von ImageSource.FromResource , angibt, dass die Assembly der Ereignisquelle in der für das Image 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.

Verwenden Sie diese Erweiterung hinzufügen ein benutzerdefinierten xmlns , die XAML verwenden Sie die richtigen Werte für Namespace und Assembly für das Projekt.To use this extension add a custom xmlns to the XAML, using the correct namespace and assembly values for the project. Die Bildquelle festgelegt werden, mit der folgenden Syntax: {local:ImageResource WorkingWithImages.beach.jpg}.The image source can then be set using this syntax: {local:ImageResource WorkingWithImages.beach.jpg}. Ein vollständiges Beispiel für XAML ist unten 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 in einigen Fällen schwer ist zu verstehen, warum eine bestimmte imageressource nicht geladen werden ist, kann die folgenden Debuggen von Code vorübergehend hinzugefügt werden, zu einer Anwendung, um zu bestätigen, dass die Ressourcen korrekt 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. Alle bekannte Ressourcen, die in der angegebenen Assembly eingebettet erfolgt die Ausgabe der Konsole zum Debuggen von Problemen Laden der Ressource.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(EmbeddedImages).GetTypeInfo().Assembly;
foreach (var res in assembly.GetManifestResourceNames())
{
    System.Diagnostics.Debug.WriteLine("found resource: " + res);
}

In andere Projekte eingebettete BilderImages embedded in other projects

In der Standardeinstellung die ImageSource.FromResource Methode sucht nur für Bilder in der gleichen Assembly wie die aufrufende Code die ImageSource.FromResource Methode.By default, the ImageSource.FromResource method only looks for images in the same assembly as the code calling the ImageSource.FromResource method. Verwenden den Debuggen von Code über die Sie ermitteln kann, welche Assemblys eine bestimmte Ressource durch Ändern enthalten die typeof() Anweisung, um eine Type bekannt, dass in jeder Assembly sind.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.

Allerdings kann die Assembly der Ereignisquelle für ein eingebettetes Bild zu durchsuchenden angegeben werden, als Argument an die ImageSource.FromResource Methode: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 in den folgenden XAML dargestellt:Images can be automatically downloaded for display, as shown in the following XAML:

<?xml version="1.0" encoding="utf-8" ?>
<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://xamarin.com/content/images/pages/forms/example-app.png" />
    <Label Text="example-app.png gets downloaded from xamarin.com" />
  </StackLayout>
</ContentPage>

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

var webImage = new Image { 
     Source = ImageSource.FromUri(
        new Uri("https://xamarin.com/content/images/pages/forms/example-app.png")
     ) };

Die ImageSource.FromUri Methode erfordert eine Uri Objekt aus, und gibt ein neues UriImageSource , liest aus der 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-Zeichenfolgen, daher kann im folgenden Beispiel wird auch verwendet werden:There is also an implicit conversion for URI strings, so the following example will also work:

webImage.Source = "https://xamarin.com/content/images/pages/forms/example-app.png";

Die folgenden Screenshots zeigen das Ergebnis zum Anzeigen von remotebilds auf jeder Plattform: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 die Zwischenspeicherung von heruntergeladenen Bilder, die über die folgenden Eigenschaften konfiguriert:A UriImageSource also supports caching of downloaded images, configured through the following properties:

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

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

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

Instanziieren Sie die Bildquelle wie folgt, um einen bestimmten Cache Zeitraum (z. B. 5 Tage) festlegen:To set a specific cache period (for example, 5 days) instantiate the image source as follows:

webImage.Source = new UriImageSource
{
    Uri = new Uri("https://xamarin.com/content/images/pages/forms/example-app.png"),
    CachingEnabled = true,
    CacheValidity = new TimeSpan(5,0,0,0)
};

Integriertes Zwischenspeichern erleichtert Szenarios wie die Liste der Images, in dem Sie festgelegt (ein Bild oder binden können) in jeder Zelle Bildlauf unterstützen und den integrierten Cache kümmert sich erneute Laden das Image, wenn die Zelle zurück in die Ansicht gescrollt 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. Forms bietet Unterstützung für die Anzeige von kleinen, animierten GIFs.Xamarin.Forms 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

Während die animierte GIF-Unterstützung in xamarin. Forms die Möglichkeit bietet, Dateien herunterzuladen, unterstützt das Caching oder Streaming animierte GIFs nicht.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, dass die IsAnimationPlaying-Eigenschaft, mit der gesteuert wird, ob ein animiertes GIF wiedergegeben oder angehalten wird, über den Standardwert falseverfügt.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 es sich um das Ziel einer Datenbindung handeln und formatiert werden kann.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 truefestgelegt ist.Therefore, when an animated GIF is loaded it will not be played until the IsAnimationPlaying property is set to true. Die Wiedergabe kann dann beendet werden, indem die IsAnimationPlaying-Eigenschaft auf falsefestgelegt wird.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üßungsbildschirmeIcons and splash screens

Während die nicht im Zusammenhang mit der Image anzeigen, Symbole und Begrüßungsbildschirme sind ebenfalls eine wichtige Aufgabe von Bildern in Xamarin.Forms-Projekte.While not related to the Image view, application icons and splash screens are also an important use of images in Xamarin.Forms projects.

Festlegen, Symbole und Begrüßungsbildschirme für Xamarin.Forms-apps erfolgt in jedes der Anwendungsprojekte.Setting icons and splash screens for Xamarin.Forms apps is done in each of the application projects. Dies bedeutet, dass die Größe der Bilder für iOS, Android und UWP ordnungsgemäß generieren.This means generating correctly sized images for iOS, Android, and UWP. Diese Images mit dem Namen und entsprechend den Anforderungen der einzelnen Plattformen gefunden.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 Image Ansicht angezeigt werden, indem die Schriftart Symbol Daten in einem FontImageSource-Objekt angegeben werden.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 einen Begrüßungsbildschirm (auch als ein Start-Bildschirm oder Standard-Image) ist erforderlich.Only iOS and UWP applications require a splash screen (also called a startup screen or default image).

Lesen Sie die Dokumentation für iOS arbeiten mit Bildern und Begrüßungsbildschirmen im Windows Dev Center.Refer to the documentation for iOS Working with Images and Splash screens on the Windows Dev Center.