Xamarin.Forms NavigationPage

Objectif

• Connaitre la classe Xamarin.Forms ContentPage

Introduction

• Une classe NavigationPage permet d'empiler les pages les unes sur les autres à l'aide de la séquence Dernier entré, premier sorti.
• La NavigationPage classe fournit une navigation hiérarchique où l'utilisateur peut naviguer dans les pages, en avant et en arrière, comme souhaité.
• La classe implémente la navigation en tant que pile de Page d'objets LIFO (dernier entré, premier sorti) .
• Du point de vue du programmeur, la navigation par page est implémentée avec le concept familier de stack.
• Lorsqu'une page accède à une autre, la nouvelle page est poussée sur la stack et devient la page active.
• Lorsque la deuxième page revient à la première page, une page est sortie de la stack et la nouvelle page la plus haute devient alors active.

Pages modales et pages non modales

• Dans la conception de l'interface utilisateur, "modal" fait référence à quelque chose qui nécessite une interaction de l'utilisateur avant que l'application puisse continuer.
• Les applications informatiques sur le bureau affichent parfois des fenêtres modales ou des boîtes de dialogue modales.
• Lorsque l'un de ces objets modaux est affiché, l'utilisateur ne peut pas simplement utiliser la souris pour basculer vers la fenêtre principale de l'application. L'objet modal demande plus d'attention à l'utilisateur avant de disparaître.
• Une fenêtre ou une boîte de dialogue qui n'est pas modale est souvent appelée non modale lorsqu'il est nécessaire de distinguer les deux types.
• Le système de navigation de pages Xamarin.Forms implémente également les pages modales et non modale en définissant deux méthodes différentes qu'une page peut appeler pour accéder à une autre page:
  • Task PushAsync(Page page)
  • Task PushModalAsync(Page page)
• Deux autres méthodes sont définies pour revenir à la page précédente:
  • Task PopAsync()
  • Task PopModalAsync()

Navigation hiérarchique

• Naviguer vers l'avant (Push)
Navigation.PushAsync(new DeuxiemePage());
• Naviguer en Retour une page (Pop)
Navigation.PopAsync();
• Revenir à la première page (PopToRoot)
Navigation.PopToRoot();

Créer la NavigationPage:

• La première page ajoutée à une stack de navigation est appelée la page racine de l'application.
• Pour créer une page racine , suivez les étapes suivantes:
  1. Dans Visual Studio, cliquez sur Créer un nouveau projet...
  
  2. Dans la boîte de dialogue Nouveau projet, cliquez sur Cross-Platform, sélectionnez le modèle Application mobile (Xamarin.Forms), définissez le Nom Les_NavigationPage, choisissez l’emplacement du projet et cliquez sur le bouton OK:
  
  3. Dans la boîte de dialogue Nouvelle application Cross-Platform, cliquez sur Application vide, choisissez Android , iOS et UWP comme plate forme de développement,Xamarin.Forms pour le IU Technologie, sélectionnez .NET Standard comme stratégie de partage de code, et cliquez sur le bouton OK:
  
  4. Cliquez avec le bouton droit de la souris sur votre projet et appuyez sur Nouveau élément.
  5. Sélectionnez la page de contenu de l'onglet Éléments Visual C #.
  6. Donnez-lui un nom et ajoutez-le dans votre projet.
  Après cela, ouvrez votre App.xaml.cs et Remplacer le code actuel par le code suivant:

  {
     InitializeComponent();
     //MainPage = new Les_NavigationPage.MainPage();
     MainPage = new NavigationPage(new Page1());
  }

  7. Pour accéder à Page2 à partir de la page1, nous devons appeler la méthode PushAsync().
  8. Créez la deuxième page en suivant les étapes ci-dessus. Après cela, ouvrez votre Page1.xaml. et créez un bouton en utilisant le code suivant.

  <?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="Navigation_Page.Page1"
               >
      <ContentPage.Content>
          <StackLayout>
                 <Label Text="Page d'accueil"
                  VerticalOptions="CenterAndExpand" 
                  HorizontalOptions="CenterAndExpand"
                  FontSize="Large"
                  TextColor="#184757"
                  Font="bold, 40"
              />      
              <Button Text="Next" Clicked="btnSuivant" />      
          </StackLayout>
      </ContentPage.Content>
  </ContentPage>

  9. Créez le reste des pages.

Découvrez comment procéder