Share via

Modale Xamarin.Forms-Seiten

  • Artikel

Xamarin.Forms unterstützt modale Seiten. Eine modale Seite ermutigt Benutzer, eine eigenständige Aufgabe auszuführen. Dabei kann erst dann die Ansicht gewechselt werden, wenn die Aufgabe abgeschlossen oder abgebrochen wurde. In diesem Artikel wird das Navigieren zu modalen Seiten veranschaulicht.

In diesem Artikel werden die folgenden Themen behandelt:

  • Ausführen der Navigation: Veröffentlichen von Seiten auf dem modalen Stapel, Entfernen von Seiten aus dem modalen Stapel per Pop, Deaktivieren der Schaltfläche „Zurück“ und Animieren von Seitenübergängen.
  • Übergeben von Daten beim Navigieren: Übergeben von Daten über einen Seitenkonstruktor und einen BindingContext.

Übersicht

Eine modale Seite kann jeder von Xamarin.Forms unterstützte Typ von Seite sein. Wenn eine modale Seite angezeigt werden soll, überträgt die Anwendung diese Seite per Push in den modalen Stapel, wo sie dann zur aktiven Seite wird. Dieser Vorgang wird im folgenden Diagramm veranschaulicht:

Übertragen von Seiten auf den modalen Stapel

Um zu vorherigen Seite zurückzukehren, entfernt die Anwendung die aktuelle Seite per Pop vom modalen Stapel, und die neue oberste Seite wird zur aktiven Seite. Dieser Vorgang wird im folgenden Diagramm veranschaulicht:

Entfernen von Seiten per Pop aus dem modalen Stapel

Ausführen der Navigation

Modale Navigationsmethoden werden von der Eigenschaft Navigation für einen beliebigen Page-Typ verfügbar gemacht. Diese Methode ermöglicht das Übertragen von modalen Seiten per Push auf den modalen Stapel und das Entfernen von modalen Seiten per Pop aus dem modalen Stapel.

Die Eigenschaft Navigation macht zudem die Eigenschaft ModalStack verfügbar, über welche die modalen Seiten im modalen Stapel abgerufen werden können. Es gibt jedoch kein Konzept für die modale Stapelbearbeitung oder das Entfernen per Pop, um bei der modalen Navigation zur Stammseite zurückzukehren. Grund dafür ist, dass diese Vorgänge auf den zugrunde liegenden Plattformen nicht allgemein unterstützt werden.

Hinweis

Für die Durchführung einer modalen Seitennavigation ist keine NavigationPage-Instanz erforderlich.

Übertragen von Seiten per Push auf den modalen Stapel

Wenn Sie zur ModalPage navigieren möchten, muss die PushModalAsync-Methode für die Eigenschaft Navigation der aktuellen Seite aufgerufen werden. Dies wird im folgenden Codebeispiel veranschaulicht:

async void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
{
  if (listView.SelectedItem != null) {
    var detailPage = new DetailPage ();
    ...
    await Navigation.PushModalAsync (detailPage);
  }
}

Dies bewirkt, dass die ModalPage-Instanz per Push an den modalen Stapel übertragen wird, wo sie zur aktiven Seite wird, wenn in den ListView ein Element auf der MainPage-Instanz ausgewählt wurde. Die ModalPage-Instanz wird in den folgenden Screenshots dargestellt:

Beispiel für die modale Seite

Wenn PushModalAsync aufgerufen wird, treten die folgenden Ereignisse auf:

  • Bei der Seite, die PushModalAsync aufruft, wird OnDisappearing überschrieben, wenn nicht Android als Plattform zugrunde liegt.
  • Bei der Seite, zu der navigiert wird, wird die Überschreibung von OnAppearing aufgerufen.
  • Aufgabe PushAsync wird abgeschlossen.

Die genaue Reihenfolge, in der diese Ereignisse auftreten, ist jedoch plattformabhängig. Weitere Informationen hierzu finden Sie in Kapitel 24 im Xamarin.Forms-Buch von Charles Petzold.

Hinweis

Aufrufe von Überschreibungen von OnDisappearing und OnAppearing können nicht als garantierte Anzeichen für eine Seitennavigation behandelt werden. Unter iOS beispielsweise wird die Überschreibung von OnDisappearing auf der aktiven Seite aufgerufen, wenn die Anwendung beendet wird.

Seiten zum Entfernen per Pop aus dem modalen Stapel

Die aktive Seite kann durch Drücken der Schaltfläche Zurück an dem Gerät per Pop vom modalen Stapel entfernt werden, und zwar unabhängig davon, ob es sich um eine physische Schaltfläche an dem Gerät oder um eine Schaltfläche auf dem Bildschirm handelt.

Wenn Sie programmgesteuert zur ursprünglichen Seite zurückkehren möchten, muss die ModalPage-Instanz die PopModalAsync-Methode aufrufen. Dies wird im folgenden Codebeispiel veranschaulicht:

async void OnDismissButtonClicked (object sender, EventArgs args)
{
  await Navigation.PopModalAsync ();
}

Dadurch wird die ModalPage-Instanz aus dem modalen Stapel entfernt, und die neue oberste Seite wird zur aktiven Seite. Wenn PopModalAsync aufgerufen wird, treten die folgenden Ereignisse auf:

  • Bei der Seite, die PopModalAsync aufruft, wird OnDisappearing überschrieben.
  • Bei der Seite, an die zurückgegeben werden soll, wird OnAppearing überschrieben, wenn nicht Android als Plattform zugrunde liegt.
  • Die PopModalAsync-Aufgabe wird zurückgegeben.

Die genaue Reihenfolge, in der diese Ereignisse auftreten, ist jedoch plattformabhängig. Weitere Informationen hierzu finden Sie in Kapitel 24 im Xamarin.Forms-Buch von Charles Petzold.

Deaktivieren der Schaltfläche „Zurück“

Unter Android kann der Benutzer jederzeit zur vorherigen Seite zurückkehren, indem er die Standardschaltfläche Zurück auf dem Gerät drückt. Wenn der Benutzer von der modalen Seite dazu aufgefordert wird, vor dem Verlassen der Seite eine eigenständige Aufgabe abzuschließen, muss die Anwendung die Schaltfläche Zurück deaktivieren. Dies kann durch die Überschreibung der Page.OnBackButtonPressed-Methode auf der modalen Seite erreicht werden. Weitere Informationen hierzu finden Sie in Kapitel 24 im Xamarin.Forms-Buch von Charles Petzold.

Animieren von Seitenübergängen

Die Eigenschaft Navigation jeder Seite bietet auch überschriebene Push- und Pop-Methoden, die einen boolean-Parameter beinhalten, der steuert, ob eine Seitenanimation während des Navigierens angezeigt wird. Dies wird im folgenden Codebeispiel veranschaulicht:

async void OnNextPageButtonClicked (object sender, EventArgs e)
{
  // Page appearance not animated
  await Navigation.PushModalAsync (new DetailPage (), false);
}

async void OnDismissButtonClicked (object sender, EventArgs args)
{
  // Page appearance not animated
  await Navigation.PopModalAsync (false);
}

Wird der boolean-Parameter auf false festgelegt, wird die Seitenübergangsanimation deaktiviert. Wird der Parameter auf true festgelegt, wird die Seitenübergangsanimation aktiviert. Vorausgesetzt sie wird von der zugrunde liegenden Plattform unterstützt. Bei Push- und Pop-Methoden ohne diesen Parameter wird die Animation standardmäßig aktiviert.

Übergeben von Daten beim Navigieren

Beim Navigieren kann es manchmal erforderlich sein, dass Daten an eine andere Seite übergeben werden. Dies kann auf zwei Arten erfolgen. Durch das Übergeben von Daten durch einen Seitenkonstruktor oder durch Festlegen des BindingContext der neuen Seite auf die Daten. Beide werden nun nacheinander erläutert.

Übergeben von Daten durch einen Seitenkonstruktor

Die einfachste Art, beim Navigieren Daten an eine andere Seite zu übergeben, ist die Verwendung eines Seitenkonstruktors. Dies wird in dem folgenden Codebeispiel gezeigt:

public App ()
{
  MainPage = new MainPage (DateTime.Now.ToString ("u")));
}

Dieser Code erstellt eine MainPage-Instanz, mit Angabe von aktuellem Datum und aktueller Uhrzeit im ISO8601-Format.

Die MainPage-Instanz empfängt die Daten durch einen Konstruktorparameter wie in dem folgenden Codebeispiel gezeigt:

public MainPage (string date)
{
  InitializeComponent ();
  dateLabel.Text = date;
}

Durch Festlegen der Label.Text-Eigenschaft werden die Daten dann auf der Seite angezeigt.

Übergeben von Daten mithilfe von BindingContext

Ein alternativer Ansatz zum Übergeben von Daten an eine andere Seite während der Navigation ist das Festlegen des BindingContext der neuen Seite auf die Daten. Dies wird im folgenden Codebeispiel veranschaulicht:

async void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
{
  if (listView.SelectedItem != null) {
    var detailPage = new DetailPage ();
    detailPage.BindingContext = e.SelectedItem as Contact;
    listView.SelectedItem = null;
    await Navigation.PushModalAsync (detailPage);
  }
}

Dieser Code legt den BindingContext der DetailPage-Instanz auf die Contact-Instanz fest und navigiert dann zur DetailPage.

Die DetailPage nutzt dann Datenbindung, um die Contact-Instanzdaten anzuzeigen, wie im folgenden XAML-Codebeispiel zu sehen ist:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ModalNavigation.DetailPage">
    <ContentPage.Padding>
      <OnPlatform x:TypeArguments="Thickness">
        <On Platform="iOS" Value="0,40,0,0" />
      </OnPlatform>
    </ContentPage.Padding>
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <StackLayout Orientation="Horizontal">
                <Label Text="Name:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
                <Label Text="{Binding Name}" FontSize="Medium" FontAttributes="Bold" />
            </StackLayout>
              ...
            <Button x:Name="dismissButton" Text="Dismiss" Clicked="OnDismissButtonClicked" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Das folgende Codebeispiel zeigt, wie die Datenbindung in C# ausgeführt werden kann:

public class DetailPageCS : ContentPage
{
  public DetailPageCS ()
  {
    var nameLabel = new Label {
      FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
      FontAttributes = FontAttributes.Bold
    };
    nameLabel.SetBinding (Label.TextProperty, "Name");
    ...
    var dismissButton = new Button { Text = "Dismiss" };
    dismissButton.Clicked += OnDismissButtonClicked;

    Thickness padding;
    switch (Device.RuntimePlatform)
    {
        case Device.iOS:
            padding = new Thickness(0, 40, 0, 0);
            break;
        default:
            padding = new Thickness();
            break;
    }

    Padding = padding;
    Content = new StackLayout {
      HorizontalOptions = LayoutOptions.Center,
      VerticalOptions = LayoutOptions.Center,
      Children = {
        new StackLayout {
          Orientation = StackOrientation.Horizontal,
          Children = {
            new Label{ Text = "Name:", FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)), HorizontalOptions = LayoutOptions.FillAndExpand },
            nameLabel
          }
        },
        ...
        dismissButton
      }
    };
  }

  async void OnDismissButtonClicked (object sender, EventArgs args)
  {
    await Navigation.PopModalAsync ();
  }
}

Die Daten werden dann durch eine Reihe von Label-Steuerelementen auf der Seite angezeigt.

Weitere Informationen zur Datenbindung finden Sie unter Data Binding Basics (Datenbindungsgrundlagen).

Zusammenfassung

In diesem Artikel wurde das Navigieren zu modalen Seiten veranschaulicht. Eine modale Seite ermutigt Benutzer, eine eigenständige Aufgabe auszuführen. Dabei kann erst dann die Ansicht gewechselt werden, wenn die Aufgabe abgeschlossen oder abgebrochen wurde.