Xamarin.Forms: Tutorial zu Bildern
Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zunächst Folgendes erfolgreich abgeschlossen haben:
- Schnellstartanleitung Erstellen Ihrer ersten Xamarin.Forms-App
- Das Tutorial zu StackLayout
In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:
- Erstellen eines Xamarin.Forms
Image
-Elements in XAML - Anpassen der
Image
-Darstellung - Anzeigen einer lokalen Imagedatei von jedem Plattformprojekt
Sie verwenden Visual Studio 2019 oder Visual Studio für Mac, um eine einfache Anwendung zu erstellen, die zeigt, wie Sie ein Bild anzeigen und dessen Darstellung anpassen können. Die folgenden Screenshots zeigen die finale Anwendung:
Außerdem verwenden Sie XAML Hot Reload für Xamarin.Forms, um Änderungen an der Benutzeroberfläche anzuzeigen, ohne die Anwendung neu zu erstellen.
Erstellen eines Bildes
Für dieses Tutorial benötigen Sie das neueste Release von Visual Studio 2019 und die Workload Mobile-Entwicklung mit .NET. Außerdem müssen Sie über einen gekoppelten Mac verfügen, um die Tutorial-App unter iOS zu kompilieren. Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin. Informationen zum Verbinden von Visual Studio 2019 mit einem Mac-Buildhost finden Sie unter Durchführen einer Kopplung mit einem Mac für die Xamarin.iOS-Entwicklung.
Starten Sie Visual Studio, und erstellen Sie eine neue leere Xamarin.Forms-App mit dem Namen ImageTutorial.
Wichtig
Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe ImageTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.
Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.
Doppelklicken Sie im Projektmappen-Explorer im Projekt ImageTutorial auf die Datei MainPage.xaml, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ImageTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" HeightRequest="300" /> </StackLayout> </ContentPage>
Dieser Code definiert deklarativ die Benutzeroberfläche für die Seite, die ein
Image
in einemStackLayout
enthält. DieImage.Source
-Eigenschaft gibt an, welches Bild über einen URI angezeigt wird. DieImage.Source
-Eigenschaft ist vom TypImageSource
, wodurch Bilder aus Dateien, URIs oder Ressourcen eingebunden werden können. Weitere Informationen finden Sie unter Anzeigen von Bildern im Leitfaden zu Bildern in Xamarin.Forms.Die
HeightRequest
-Eigenschaft gibt die Höhe desImage
in geräteunabhängigen Einheiten an.Hinweis
Es ist nicht notwendig, die
WidthRequest
-Eigenschaft in diesem Beispiel festzulegen. Denn standardmäßig behältImage
das Seitenverhältnis des Bilds bei.Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:
Hinweis
Die
Image
-Ansicht speichert heruntergeladene Bilder für 24 Stunden im Cache. Weitere Informationen finden Sie unter Zwischenspeichern heruntergeladener Bilder im Leitfaden zu Bildern in Xamarin.Forms.
Anpassen der Darstellung
Ändern Sie in MainPage.xaml die
Image
-Deklaration, um die Darstellung anzupassen:<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" Aspect="Fill" HeightRequest="{OnPlatform iOS=300, Android=250}" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />
Dieser Code legt die Eigenschaft
Aspect
, die den Skalierungsmodus des Bilds definiert, aufFill
fest. DasFill
-Element wird in der EnumerationAspect
definiert und streckt das Bild so, dass es die Ansicht komplett ausfüllt. Dabei wird nicht berücksichtigt, ob das Bild verzerrt wird. Weitere Informationen zur Bildskalierung finden Sie unter Anzeigen von Bildern im Leitfaden zu Bildern in Xamarin.Forms.Die Markuperweiterung
OnPlatform
ermöglicht Ihnen das plattformspezifische Anpassen der Benutzeroberfläche. In diesem Beispiel wird die Markuperweiterung dazu verwendet, die EigenschaftenHeightRequest
undWidthRequest
unter iOS auf 300 geräteunabhängige Einheiten und unter Android auf 250 geräteunabhängige Einheiten festzulegen. Weitere Informationen zur MarkuperweiterungOnPlatform
finden Sie im Abschnitt OnPlatform-Markuperweiterung im Artikel Verwenden von XAML-Markuperweiterungen.Zusätzlich wird mit der
HorizontalOptions
-Eigenschaft angegeben, dass das Bild horizontal und zentriert ausgerichtet werden soll.Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:
Beenden Sie die Anwendung in Visual Studio.
Anzeigen eines lokalen Bildes
Bilddateien können zu Plattformprojekten hinzugefügt und über freigegebenen Xamarin.Forms-Code referenziert werden. 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.
In dieser Übung passen Sie die Projektmappe ImageTutorial so an, dass anstelle eines Bilds, das über einen URI heruntergeladen wird, ein lokales Bild verwendet wird. Dieses ist das Xamarin-Logo, das Sie mit einem Klick auf die unten gezeigte Schaltfläche herunterladen sollten.
Wichtig
Wenn Sie ein Bild auf allen Plattformen nutzen möchten, muss auf jeder Plattform der gleiche Dateiname verwendet werden. Außerdem sollte es sich um einen gültigen Android-Ressourcennamen handeln, der nur aus Kleinbuchstaben, Zahlen, Unterstrichen und Punkten besteht.
Erweitern Sie im Projektmappen-Explorer im Projekt ImageTutorial.iOS den Knoten Ressourcenkataloge, und doppelklicken Sie auf Ressourcen, um diese zu öffnen. Klicken Sie anschließend auf der Registerkarte Assets.xcassets auf die Schaltfläche Plus und auf Bildgruppe hinzufügen:
Klicken Sie auf der Registerkarte Assets.xcassets auf die neue Bildgruppe, damit der Editor angezeigt wird:
Ziehen Sie XamarinLogo.png von Ihrem Dateisystem für die Kategorie Universell auf das Feld 1x:
Klicken Sie auf der Registerkarte Assets.xcassets mit der rechten Maustaste auf den Namen der neuen Bildgruppe, und benennen Sie sie in XamarinLogo um:
Speichern Sie, und schließen Sie die Registerkarte Assets.xcassets.
Erweitern Sie im Projektmappen-Explorer im Projekt ImageTutorial.Android den Ordner Ressourcen. Ziehen Sie dann XamarinLogo.png von Ihrem Dateisystem in den Ordner drawable:
Hinweis
Visual Studio legt als Buildaktion für das Bild automatisch AndroidResource fest.
Passen Sie im Projekt ImageTutorial in der Datei MainPage.xaml die
Image
-Deklaration so an, dass die lokale Datei von XamarinLogo angezeigt wird:<Image Source="XamarinLogo" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />
In diesem Codeausschnitt wird die
Source
-Eigenschaft für die lokale Datei festgelegt, damit das Logo angezeigt wird. DieWidthRequest
-Eigenschaft wird für iOS auf 300 und für Android auf 250 geräteunabhängige Einheiten festgelegt. Zusätzlich wird mit derHorizontalOptions
-Eigenschaft angegeben, dass das Bild horizontal und zentriert ausgerichtet werden soll.Hinweis
Für PNG-Bilder kann unter iOS die PNG-Erweiterung im Dateinamen weggelassen werden, der in der
Source
-Eigenschaft festgelegt wird. Für andere Bildformate ist die Erweiterung erforderlich.Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten:
Beenden Sie die Anwendung in Visual Studio.
Weitere Informationen zu lokalen Bildern finden Sie unter Lokale Bilder im Leitfaden zu Bildern in Xamarin.Forms.
Herzlichen Glückwunsch!
Glückwunsch, Sie haben das Tutorial erfolgreich abgeschlossen und Folgendes gelernt:
- Erstellen eines Xamarin.Forms
Image
-Elements in XAML - Anpassen der
Image
-Darstellung - Anzeigen einer lokalen Imagedatei von jedem Plattformprojekt
Nächste Schritte
Wenn Sie mehr über die Grundlagen der Erstellung mobiler Apps mit Xamarin.Forms lernen möchten, fahren Sie mit dem Tutorial zu „Grid“ fort.
Tutorial zu Grid
Verwandte Links
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.