Partager via

Xamarin.Forms Pages modales

  • Article

Xamarin.Forms prend en charge les pages modales. Une page modale encourage les utilisateurs à effectuer une tâche autonome et ne peut pas être quittée tant que la tâche n’est pas terminée ou annulée. Cet article explique comment accéder à des pages modales.

Cet article s’articule autour des rubriques suivantes :

  • Navigation - Envoi (push) des pages vers la pile modale, dépilation des pages de la pile modale, désactivation du bouton Précédent et animation des transitions de page.
  • Passage de données durant la navigation - Passage de données via un constructeur de page et via BindingContext.

Vue d’ensemble

Une page modale peut être n’importe quel type de page pris en charge par Xamarin.Forms. Pour afficher une page modale, l’application l’envoie vers la pile modale, où elle devient la page active, comme indiqué dans le diagramme suivant :

Envoi (push) d’une page dans la pile modale

Pour retourner à la page précédente, l’application dépile la page actuelle de la pile modale. La nouvelle page la plus haute de la pile devient la page active, comme indiqué dans le diagramme suivant :

Dépilation d’une page de la pile modale

Navigation

Les méthodes de navigation modale sont exposées par la propriété Navigation sur n’importe quel type dérivé Page. Ces méthodes permettent d’envoyer (push) des pages modales vers la pile modale et de dépiler des pages modales de la pile modale.

La propriété Navigation expose également une propriété ModalStack à partir de laquelle les pages modales de la pile modale peuvent être obtenues. Toutefois, il n’existe aucun concept de manipulation de pile modale ni d’ajout à la page racine dans la navigation modale. En effet, ces opérations ne sont pas universellement prises en charge sur les plateformes sous-jacentes.

Remarque

Aucune instance de NavigationPage n’est requise pour la navigation entre les pages modales.

Envoi de pages vers la pile modale

Pour accéder à ModalPage, il est nécessaire d’appeler la méthode PushModalAsync sur la propriété Navigation de la page active, comme indiqué dans l’exemple de code suivant :

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

Ainsi, l’instance de ModalPage est envoyée vers la pile modale, où elle devient la page active, à condition qu’un élément ait été sélectionné dans ListView sur l’instance de MainPage. L’instance de ModalPage est présentée dans les captures d’écran suivantes :

Exemple de page modale

Quand PushModalAsync est appelé, les événements suivants se produisent :

  • Pour la page qui appelle PushModalAsync, la substitution de OnDisappearing est appelée, à condition que la plateforme sous-jacente ne soit pas de type Android.
  • La substitution OnAppearing de la page cible de la navigation est appelée.
  • La tâche PushAsync est effectuée.

Toutefois, l’ordre précis dans lequel ces événements se produisent dépend de la plateforme. Pour plus d’informations, consultez le chapitre 24 du livre de Xamarin.Forms Charles Petzold.

Remarque

Les appels des substitutions OnDisappearing et OnAppearing ne peuvent pas être considérés comme des indications garanties de la navigation entre les pages. Par exemple, sur iOS, la substitution de OnDisappearing est appelée dans la page active quand l’application se termine.

Dépilation de pages de la pile modale

Vous pouvez dépiler la page active de la pile modale en appuyant sur le bouton Précédent de l’appareil, qu’il s’agisse d’un bouton physique sur l’appareil ou d’un bouton à l’écran.

Pour revenir par programmation à la page d’origine, l’instance de ModalPage doit appeler la méthode PopModalAsync, comme illustré dans l’exemple de code suivant :

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

Cela provoque la suppression de l’instance de ModalPage de la pile modale. Ainsi, la nouvelle page située tout en haut de la pile devient la page active. Quand PopModalAsync est appelé, les événements suivants se produisent :

  • La substitution OnDisappearing de la page qui appelle PopModalAsync est appelée.
  • Pour la page retournée, la substitution de OnAppearing est appelée, à condition que la plateforme sous-jacente ne soit pas de type Android.
  • La tâche PopModalAsync est terminée.

Toutefois, l’ordre précis dans lequel ces événements se produisent dépend de la plateforme. Pour plus d’informations, consultez le chapitre 24 du livre de Xamarin.Forms Charles Petzold.

Désactivation du bouton Précédent

Sur Android, l’utilisateur peut toujours retourner à la page précédente en appuyant sur le bouton Précédent standard de l’appareil. Si la page modale impose à l’utilisateur d’exécuter une tâche autonome avant de quitter la page, l’application doit désactiver le bouton Précédent. Pour ce faire, substituez la méthode Page.OnBackButtonPressed dans la page modale. Pour plus d’informations, consultez le chapitre 24 du livre de Xamarin.Forms Charles Petzold.

Animation des transitions de page

La propriété Navigation de chaque page fournit également des méthodes d’envoi et de dépilation substituées qui incluent un paramètre boolean contrôlant l’affichage d’une animation de page durant la navigation, comme indiqué dans l’exemple de code suivant :

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

Si vous affectez au paramètre boolean la valeur false, l’animation de transition de page est désactivée. En revanche, si vous affectez au paramètre la valeur true l’animation de transition de page est activée, à condition qu’elle soit prise en charge par la plateforme sous-jacente. Toutefois, les méthodes d’envoi et de dépilation qui n’ont pas ce paramètre activent l’animation par défaut.

Passage des données durant la navigation

Il est parfois nécessaire qu’une page passe des données à une autre page durant la navigation. Il existe deux techniques pour y parvenir : passer les données via un constructeur de page et définir le BindingContext de la nouvelle page en fonction des données. Nous allons maintenant examiner chacune de ces techniques.

Passage des données via un constructeur de page

La technique la plus simple pour passer des données à une autre page durant la navigation consiste à utiliser un paramètre de constructeur de page, comme indiqué dans l’exemple de code suivant :

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

Ce code crée une instance de MainPage en passant la date et l’heure actuelles au format ISO8601.

L’instance de MainPage reçoit les données par le biais d’un paramètre de constructeur, comme illustré dans l’exemple de code suivant :

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

Les données sont ensuite affichées dans la page via la définition de la propriété Label.Text.

Transmission de données par le biais d’un BindingContext

Il existe une autre approche pour passer des données à une autre page durant la navigation. Elle consiste à affecter les données au BindingContext de la nouvelle page, comme indiqué dans l’exemple de code suivant :

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

Ce code affecte au BindingContext de l’instanceDetailPage l’instance de Contact, puis accède à DetailPage.

DetailPage utilise ensuite la liaison de données pour afficher les données de l’instance de Contact, comme indiqué dans l’exemple de code XAML suivant :

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

L’exemple de code suivant montre comment la liaison de données peut être effectuée en 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 ();
  }
}

Les données sont ensuite affichées dans la page par une série de contrôles Label.

Pour plus d’informations sur la liaison de données, consultez Notions de base de la liaison de données.

Résumé

Cet article a montré comment accéder aux pages modales. Une page modale encourage les utilisateurs à effectuer une tâche autonome et ne peut pas être quittée tant que la tâche n’est pas terminée ou annulée.