Xamarin.Forms: Tutorial zu Popupelementen
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
- Das Tutorial zu Button.
In diesem Tutorial lernen Sie Folgendes:
- Das Anzeigen einer Warnung, in der der Benutzer eine Auswahl treffen muss
- Das Anzeigen eines Aktionsblatts, das den Benutzer durch eine Aufgabe führen soll
Sie verwenden Visual Studio 2019 oder Visual Studio für Mac, um eine einfache Anwendung zu erstellen, die zeigt, wie sich Popupelemente in Xamarin.Forms anzeigen lassen. Die folgenden Screenshots zeigen die finale Anwendung:
Anzeigen einer Warnung
Xamarin.Forms verfügt über ein modales Popupelement, das als „Warnung“ bezeichnet wird, um Benutzer zu warnen oder ihnen einfache Fragen zu stellen. In dieser Übung verwenden Sie die DisplayAlert-Methode aus der Page-Klasse, um dem Benutzer eine Warnung anzuzeigen und eine einfache Frage zu stellen.
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 PopupsTutorial.
Wichtig
Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe PopupsTutorial 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 PopupsTutorial 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="PopupsTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Button Text="Display alert" Clicked="OnDisplayAlertButtonClicked" /> <Button Text="Display alert question" Clicked="OnDisplayAlertQuestionButtonClicked" /> </StackLayout> </ContentPage>Dieser Code definiert deklarativ die Benutzeroberfläche für die Seite, die aus zwei
Button-Objekten in einerStackLayout-Klasse besteht. DieButton.Text-Eigenschaften geben den Text an, der in jedemButton-Objekt angezeigt wird, und dieClicked-Ereignisse werden als Ereignishandler festgelegt, die im nächsten Schritt erstellt werden.Erweitern Sie MainPage.xaml im Projektmappen-Explorer im Projekt PopupsTutorial, und doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um sie zu öffnen. Fügen Sie anschließend in der Datei MainPage.xaml.cs der Klasse die Ereignishandler
OnDisplayAlertButtonClickedundOnDisplayAlertQuestionButtonClickedhinzu:async void OnDisplayAlertButtonClicked(object sender, EventArgs e) { await DisplayAlert("Alert", "This is an alert.", "OK"); } async void OnDisplayAlertQuestionButtonClicked(object sender, EventArgs e) { bool response = await DisplayAlert("Save?", "Would you like to save your data?", "Yes", "No"); Console.WriteLine("Save data: " + response); }Wenn ein
Button-Objekt angetippt wird, wird die entsprechende Ereignishandlermethode ausgeführt. DieOnDisplayAlertButtonClicked-Methode ruft dieDisplayAlert-Methode auf, um eine modale Warnung mit einer einzelnen Schaltfläche zum Abbrechen anzuzeigen. Sobald die Warnung geschlossen wurde, kann der Benutzer weiter mit der Anwendung interagieren.Die
OnDisplayAlertQuestionButtonClicked-Methode ruft ein Überladen derDisplayAlert-Methode auf, um eine modale Warnung mit einer Schaltfläche zum Akzeptieren und einer Schaltfläche zum Abbrechen anzuzeigen. Sobald der Benutzer eine der beiden Schaltflächen ausgewählt hat, wird die Auswahl alsbooleanzurückgegeben.Wichtig
Die
DisplayAlert-Methode ist asynchron und sollte immer mit demawait-Schlüsselwort erwartet werden.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: Tippen Sie dann auf das erste
Button-Objekt:
Schließen Sie die Warnung, und tippen Sie dann auf das zweite
Button-Objekt:
Sie können sehen, dass die Antwort als Ausgabe im Ausgabefenster von Visual Studio angezeigt wird, nachdem eine Antwort für die Frage ausgewählt wurde. Wenn dieses Fenster nicht sichtbar ist, können Sie es anzeigen, indem Sie die Menüoption Ansicht > Ausgabe auswählen.
Beenden Sie die Anwendung in Visual Studio.
Weitere Informationen zum Anzeigen von Warnungen finden Sie unter Anzeigen einer Warnung im Leitfaden Anzeigen von Popupelementen.
Anzeigen eines Aktionsblatts
Xamarin.Forms verfügt über ein modales Popupelement, das als Aktionsblatt bezeichnet wird und dazu verwendet werden kann, Benutzer durch eine Aufgabe zu führen. In dieser Übung verwenden Sie die DisplayActionSheet-Methode aus der Page-Klasse, um ein Aktionsblatt anzuzeigen, das Benutzer durch eine Aufgabe führt.
Fügen Sie in der Datei MainPage.xaml eine neue
Button-Deklaration hinzu, die ein Aktionsblatt anzeigt:<Button Text="Display action sheet" Clicked="OnDisplayActionSheetButtonClicked" />Die
Button.Text-Eigenschaft gibt den Text an, der auf derButtonangezeigt wird. Außerdem wird dasClicked-Ereignis auf einen Ereignishandler mit dem NamenOnDisplayActionSheetButtonClickedfestgelegt, welcher im nächsten Schritt erstellt wird.Erweitern Sie MainPage.xaml im Projektmappen-Explorer im Projekt PopupsTutorial, und doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um sie zu öffnen. Fügen Sie dann in der Datei MainPage.xaml.cs der Klasse den
OnDisplayActionSheetButtonClicked-Ereignishandler hinzu:async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e) { string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook"); Console.WriteLine("Action: " + action); }Wenn die
Buttonangetippt wird, wird dieOnDisplayActionSheetButtonClicked-Methode ausgeführt. Diese Methode ruft dieDisplayActionSheet-Methode auf, um dem Benutzer Alternativen zum Durchlaufen einer Aufgabe anzuzeigen. Sobald der Benutzer eine der beiden Alternativen ausgewählt hat, wird die Auswahl alsstringzurückgegeben.Wichtig
Die
DisplayActionSheet-Methode ist asynchron und sollte immer mit demawait-Schlüsselwort erwartet werden.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: Tippen Sie anschließend auf die
Button, die Sie derContentPagehinzugefügt haben:
Berücksichtigen Sie nach der Auswahl einer Alternative im Dialogfeld „Aktionsblatt“, dass die Auswahl an das Ausgabe-Fenster in Visual Studio ausgegeben wird. Wenn dieses Fenster nicht sichtbar ist, können Sie es anzeigen, indem Sie die Menüoption Ansicht > Ausgabe auswählen.
Beenden Sie die Anwendung in Visual Studio.
Weitere Informationen zum Anzeigen von Aktionsblättern finden Sie unter Führen von Benutzern durch Aufgaben im Leitfaden Anzeigen von Popupelementen.
Herzlichen Glückwunsch!
Glückwunsch, Sie haben das Tutorial erfolgreich abgeschlossen und Folgendes gelernt:
- Das Anzeigen einer Warnung, in der der Benutzer eine Auswahl treffen muss
- Das Anzeigen eines Aktionsblatts, das den Benutzer durch eine Aufgabe führen soll
Nächste Schritte
Wenn Sie mehr über die Grundlagen bei der Erstellung mobiler Apps mit Xamarin.Forms lernen möchten, fahren Sie mit dem Tutorial zum App-Lebenszyklus fort.
Verwandte Links
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.