Udostępnij za pośrednictwem

Xamarin.Forms Strony modalne

  • Artykuł

Xamarin.Forms Zapewnia obsługę modalnych stron. Modalna strona zachęca użytkowników do ukończenia samodzielnego zadania, z którego nie można przejść do momentu ukończenia lub anulowania zadania. W tym artykule pokazano, jak przejść do modalnych stron.

W tym artykule omówiono następujące zagadnienia:

Omówienie

Modalna strona może być dowolnym typem strony obsługiwanym przez Xamarin.Formsusługę . Aby wyświetlić modalną stronę, aplikacja wypchnie ją do stosu modalnego, w którym stanie się aktywna strona, jak pokazano na poniższym diagramie:

Wypychanie strony do stosu modalnego

Aby powrócić do poprzedniej strony, aplikacja wyświetli bieżącą stronę ze stosu modalnego, a nowa najbardziej górna strona stanie się aktywną stroną, jak pokazano na poniższym diagramie:

Wyświetlanie strony ze stosu modalnego

Wykonywanie nawigacji

Modalne metody nawigacji są uwidaczniane przez Navigation właściwość na dowolnych Page typach pochodnych. Metody te zapewniają możliwość wypychania modalnych stron do modalnego stosu i modalnych stron pop z modalnego stosu.

Właściwość Navigation uwidacznia ModalStack również właściwość, z której można uzyskać strony modalne w stosie modalnym. Nie ma jednak pojęcia o wykonywaniu modalnych manipulacji stosem ani pojawiania się na stronie głównej w nawigacji modalnej. Dzieje się tak, ponieważ te operacje nie są powszechnie obsługiwane na platformach bazowych.

Uwaga

Wystąpienie NavigationPage nie jest wymagane do przeprowadzania modalnego nawigacji po stronie.

Wypychanie stron do stosu modalnego

Aby przejść do ModalPage metody , należy wywołać metodę PushModalAsync we Navigation właściwości bieżącej strony, jak pokazano w poniższym przykładzie kodu:

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

ModalPage Powoduje to wypchnięcie wystąpienia do stosu modalnego, w którym staje się aktywną stroną, pod warunkiem, że element został wybrany w ListView wystąpieniuMainPage. Wystąpienie ModalPage zostało pokazane na następujących zrzutach ekranu:

Przykład strony modalnej

Po PushModalAsync wywołaniu wystąpią następujące zdarzenia:

  • Wywołanie PushModalAsync strony ma OnDisappearing wywołaną przesłonięć, pod warunkiem, że podstawowa platforma nie jest systemem Android.
  • Po przejściu do strony jest wywoływana jego OnAppearing przesłonięć.
  • Zadanie PushAsync zostanie ukończone.

Jednak dokładna kolejność występowania tych zdarzeń jest zależna od platformy. Aby uzyskać więcej informacji, zobacz rozdział 24 książki Charlesa Petzolda Xamarin.Forms .

Uwaga

OnDisappearing Wywołania funkcji i OnAppearing przesłonięć nie mogą być traktowane jako gwarantowane wskazania nawigacji strony. Na przykład w systemie iOS przesłonięcia są wywoływane na aktywnej stronie po OnDisappearing zakończeniu działania aplikacji.

Wyświetlanie wyskakujących stron ze stosu modalnego

Aktywną stronę można zwinąć ze stosu modalnego, naciskając przycisk Wstecz na urządzeniu, niezależnie od tego, czy jest to przycisk fizyczny na urządzeniu, czy przycisk na ekranie.

Aby programowo wrócić do oryginalnej strony, ModalPage wystąpienie musi wywołać metodę PopModalAsync , jak pokazano w poniższym przykładzie kodu:

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

ModalPage Powoduje to usunięcie wystąpienia ze stosu modalnego, a nowa najbardziej górna strona staje się aktywną stroną. Po PopModalAsync wywołaniu wystąpią następujące zdarzenia:

  • Wywołanie PopModalAsync strony ma wywołaną OnDisappearing przesłonięć.
  • Zwracana strona ma wywołaną OnAppearing przesłonięć, pod warunkiem że podstawowa platforma nie jest systemem Android.
  • Zadanie PopModalAsync zwraca.

Jednak dokładna kolejność występowania tych zdarzeń jest zależna od platformy. Aby uzyskać więcej informacji, zobacz rozdział 24 książki Charlesa Petzolda Xamarin.Forms .

Wyłączanie przycisku Wstecz

W systemie Android użytkownik może zawsze wrócić do poprzedniej strony, naciskając standardowy przycisk Wstecz na urządzeniu. Jeśli strona modalna wymaga od użytkownika wykonania samodzielnego zadania przed opuszczeniem strony, aplikacja musi wyłączyć przycisk Wstecz . Można to osiągnąć, przesłaniając metodę Page.OnBackButtonPressed na stronie modalnej. Aby uzyskać więcej informacji, zobacz rozdział 24 książki Charlesa Petzolda Xamarin.Forms .

Animowanie przejść strony

Właściwość Navigation każdej strony udostępnia również zastąpione metody wypychania i wyskakujące, które zawierają boolean parametr, który kontroluje, czy wyświetlać animację strony podczas nawigacji, jak pokazano w poniższym przykładzie kodu:

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);
}

Ustawienie parametru boolean w celu false wyłączenia animacji przejścia strony, podczas ustawiania parametru w celu true włączenia animacji przejścia strony, pod warunkiem, że jest obsługiwana przez platformę bazową. Jednak metody wypychania i wyskakujące, które nie mają tego parametru, domyślnie włączają animację.

Przekazywanie danych podczas nawigowania

Czasami konieczne jest przekazanie danych do innej strony podczas nawigacji. Dwie techniki tego celu to przekazywanie danych przez konstruktora strony i ustawienie nowej strony BindingContext na dane. Każda z nich zostanie omówiona z kolei.

Przekazywanie danych za pośrednictwem konstruktora strony

Najprostszą techniką przekazywania danych do innej strony podczas nawigacji jest użycie parametru konstruktora strony, który jest pokazany w poniższym przykładzie kodu:

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

Ten kod tworzy wystąpienie, przekazując bieżącą MainPage datę i godzinę w formacie ISO8601.

MainPage Wystąpienie odbiera dane za pośrednictwem parametru konstruktora, jak pokazano w poniższym przykładzie kodu:

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

Dane są następnie wyświetlane na stronie, ustawiając Label.Text właściwość .

Przekazywanie danych za pośrednictwem elementu BindingContext

Alternatywną metodą przekazywania danych na inną stronę podczas nawigacji jest ustawienie danych nowej strony BindingContext , jak pokazano w poniższym przykładzie kodu:

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);
  }
}

Ten kod ustawia BindingContext DetailPage wystąpienie na Contact wystąpienie, a następnie przechodzi do .DetailPage

Następnie DetailPage używa powiązania danych do wyświetlania Contact danych wystąpienia, jak pokazano w poniższym przykładzie kodu XAML:

<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>

W poniższym przykładzie kodu pokazano, jak można wykonać powiązanie danych w języku C#:

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 ();
  }
}

Dane są następnie wyświetlane na stronie przez serię Label kontrolek.

Aby uzyskać więcej informacji na temat powiązania danych, zobacz Podstawy powiązań danych.

Podsumowanie

W tym artykule pokazano, jak przejść do modalnych stron. Modalna strona zachęca użytkowników do ukończenia samodzielnego zadania, z którego nie można przejść do momentu ukończenia lub anulowania zadania.