Xamarin.Forms: Tutorial zu Popupelementen

Artikel
Developer (Anfänger)
6 Minuten bis zum Abschluss

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

5 Minuten verbleibend

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.

Visual Studio
Visual Studio für Mac

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 einer StackLayout-Klasse besteht. Die Button.Text-Eigenschaften geben den Text an, der in jedem Button-Objekt angezeigt wird, und die Clicked-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 OnDisplayAlertButtonClicked und OnDisplayAlertQuestionButtonClicked hinzu:
```
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. Die OnDisplayAlertButtonClicked-Methode ruft die DisplayAlert-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 der DisplayAlert-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 als boolean zurückgegeben.

Wichtig

Die DisplayAlert-Methode ist asynchron und sollte immer mit dem await-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.

Für dieses Tutorial benötigen Sie Visual Studio für Mac (neuestes Release) mit Plattformunterstützung für iOS und Android. Zudem ist Xcode (neuestes Release) erforderlich. Weitere Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin.

Starten Sie Visual Studio für Mac, 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 Lösungspad 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 einer StackLayout-Klasse besteht. Die Button.Text-Eigenschaften geben den Text an, der in jedem Button-Objekt angezeigt wird, und die Clicked-Ereignisse werden als Ereignishandler festgelegt, die im nächsten Schritt erstellt werden.
Erweitern Sie MainPage.xaml im Lösungspad 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 OnDisplayAlertButtonClicked und OnDisplayAlertQuestionButtonClicked hinzu:
```
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. Die OnDisplayAlertButtonClicked-Methode ruft die DisplayAlert-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 der DisplayAlert-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 als boolean zurückgegeben.

Wichtig

Die DisplayAlert-Methode ist asynchron und sollte immer mit dem await-Schlüsselwort erwartet werden.
Klicken Sie in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator 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 für Mac 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 > Weitere Fenster > Anwendungsausgabe auswählen.

Beenden Sie die Anwendung in Visual Studio für Mac.

Weitere Informationen zum Anzeigen von Warnungen finden Sie unter Anzeigen einer Warnung im Leitfaden Anzeigen von Popupelementen.

Anzeigen eines Aktionsblatts

2 Minuten verbleibend

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.

Visual Studio
Visual Studio für Mac

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 der Button angezeigt wird. Außerdem wird das Clicked-Ereignis auf einen Ereignishandler mit dem Namen OnDisplayActionSheetButtonClicked festgelegt, 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 Button angetippt wird, wird die OnDisplayActionSheetButtonClicked-Methode ausgeführt. Diese Methode ruft die DisplayActionSheet-Methode auf, um dem Benutzer Alternativen zum Durchlaufen einer Aufgabe anzuzeigen. Sobald der Benutzer eine der beiden Alternativen ausgewählt hat, wird die Auswahl als string zurückgegeben.

Wichtig

Die DisplayActionSheet-Methode ist asynchron und sollte immer mit dem await-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 der ContentPage hinzugefü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.

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 der Button angezeigt wird. Außerdem wird das Clicked-Ereignis auf einen Ereignishandler mit dem Namen OnDisplayActionSheetButtonClicked festgelegt, welcher im nächsten Schritt erstellt wird.
Erweitern Sie MainPage.xaml im Lösungspad 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 Button angetippt wird, wird die OnDisplayActionSheetButtonClicked-Methode ausgeführt. Diese Methode ruft die DisplayActionSheet-Methode auf, um dem Benutzer Alternativen zum Durchlaufen einer Aufgabe anzuzeigen. Sobald der Benutzer eine der beiden Alternativen ausgewählt hat, wird die Auswahl als string zurückgegeben.

Wichtig

Die DisplayActionSheet-Methode ist asynchron und sollte immer mit dem await-Schlüsselwort erwartet werden.
Klicken Sie in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten: Tippen Sie anschließend auf die Button, die Sie der ContentPage hinzugefügt haben:

Berücksichtigen Sie nach der Auswahl einer Alternative im Dialogfeld „Aktionsblatt“, dass die Auswahl an das Anwendungsausgabe-Fenster in Visual Studio für Mac ausgegeben wird. Wenn dieses Fenster nicht sichtbar ist, können Sie es anzeigen, indem Sie die Menüoption Ansicht > Weitere Fenster > Anwendungsausgabe auswählen.

Beenden Sie die Anwendung in Visual Studio für Mac.

Weitere Informationen zum Anzeigen von Aktionsblättern finden Sie unter Führen von Benutzern durch Aufgaben im Leitfaden Anzeigen von Popupelementen.

Freigeben über

Xamarin.Forms: Tutorial zu Popupelementen

Anzeigen einer Warnung

Anzeigen eines Aktionsblatts

Herzlichen Glückwunsch!

Nächste Schritte

Freigeben über

Xamarin.Forms: Tutorial zu Popupelementen

Anzeigen einer Warnung

Anzeigen eines Aktionsblatts

Herzlichen Glückwunsch!

Nächste Schritte

Verwandte Links