Application de la navigation simple dans les formulaires Xamarin

Comment changer de page dans Xamarin.Forms? Xamarin.Forms nous offre des outils simples mais puissants pour contrôler la navigation dans nos applications.

L'une des fonctionnalités les plus importantes d'une application est de pouvoir naviguer entre différentes pages, car cela nous donne la possibilité d'interagir avec tous les fonctionnalités qu'une application nous fournit. Pour ce faire, nous pouvons utiliser un framework ou simplement l'implémenter de manière simple! Dans ce cas, nous allons apprendre à effectuer des navigations simples dans Xamarin Forms! Les sujets seront divisés en points suivants:

➖ Qu'est-ce que la navigation
➖ Push & Pop
➖ Manipulation de la navigation
➖ Passer des arguments
➖ Conseils supplémentaires

Qu'est-ce que la navigation

] La navigation n'est rien de plus que l'action qui permet de modifier les pages dans nos applications.

Pour l'obtenir, nous utilisons la classe NavigationPage, qui gère la navigation en mode hiérarchique, créant une pile LIFO de pages. LIFO signifie «dernier entré, premier sorti», ce qui signifie que la dernière page à entrer (push) est la première à apparaître.

Push & Pop

Il existe deux façons de naviguer: avec Push ou Pop . Lorsque nous voulons passer à une nouvelle page, cela est ajouté à la pile de navigation – cela s'appelle Push. Mais si nous voulons revenir en arrière, la pile est juste retournée avec la page correspondant à la page précédente dans la pile, supprimant la page active (la page sur laquelle nous sommes maintenant) – cela s'appelle Pop.

Voyons maintenant comment les utiliser!

Push

À utiliser en C #:

 async   void   NextPage   ( ] objet  expéditeur  EventArgs e )  
 {
          wait  Navigation .  PushAsync  ( new   YourPageName  () ) ; 
} 

Pop

À utiliser en C #:

 async   void   BackToPage   ( object  sender  EventArgs e )  
 {
         wait  Navigation .  PopAsync  () ; 
} [19659044] Navigation Manipulation 
 Navigation nous donne également les méthodes  InsertPageBefore  et  RemovePage qui nous permettent de manipuler la page qui sera affichée dans la pile de navigation de notre application. 
 InsertPageBefore 
  
 Cette méthode insère une page spécifique dans la pile de navigation avant une page existante dans la pile. Cette méthode reçoit deux paramètres: la page active et la page précédente. 
 Navigation .  InsertPageBefore   ( new   MainPage   () [19659014] this ) ; 
 RemovePage
 
   
 Cette méthode supprime une page spécifique dans la pile de navigation. Cette méthode ne reçoit qu'un seul paramètre, à savoir la page qui sera supprimée.
 Navigation .  RemovePage   ( new   MainPage ) ; [19659068] Mais… que se passe-t-il si nous voulons supprimer toute la pile de navigation?  🤔 

 Pour ce faire, nous avons la méthode  PopToRootAsync qui se charge de supprimer toutes les pages contenues dans la navigation pile sauf la page racine, ce qui en fait la page active. 
  async   void   ClearNavigationStack   ( object  sender  EventArgs e  ]) 
 {
         wait  Navigation .  PopToRootAsync   () ; 
} 
 Passer des arguments
 Il est très important de établissez la communication entre ces pages, surtout si vous avez besoin de transmettre certaines données. Nous avons deux manières d'obtenir ceci: Via un constructeur   ou un objet  BindingContext . Comprenons chacun d'eux!
 🔹  En utilisant le constructeur nous pouvons l'obtenir en deux étapes:
  Étape 1:  Ajout d'un paramètre dont vous avez besoin dans la page du constructeur. [19659048]  public   MainPage   ( string  YourName ) 
  {
  InitializeComponent   () ; 
 Name  =  YourName ; 
 } 
 
 Étape 2:  Transmettez les données lorsque vous appelez la page utilisée auparavant. (MainPage)
  wait  Navigation .  PushAsync  ( new   YourPageName  ( "MariaWhite" ) ) ]) ; 
 🔹  Utilisation d'un objet Contexte de liaison: 
 Dans cet exemple, créons une méthode nommée FillDataClicked, et à l'intérieur ajoutons des données d'objet (dans ce cas, avec la classe Contact). Passez ensuite l'objet créé dans votre page BindingContext.
  async   void   FillDataClicked   ( object  sender  EventArgs e ) 
 {
     var  contact  =   new   Contact   {
        Nom  =   "Merrie" 
        LastName  =   "Blanc" 
        Pays  =   "USA" 
  } ; 
  
    var  contactsPage  =   new   ContactsPage   ()  ; 
   contactsPage .  BindingContext  =  contact ; 
    wait  Navigation .  PushAsync   ( contactsPage ) [19659021]; 
} 
 Conseils supplémentaires
 ➖  Pour supprimer le bouton arrière:  Il vous suffit d'utiliser la ligne suivante dans vos propriétés XAML.
 NavigationPage.HasBackButton = "False"
 ➖  Pour ajouter un contrôle à votre barre de navigation: 
 Pour accéder au contrôle de la barre de navigation, il vous suffit d'ajouter les balises . À l'intérieur de ces balises, vous pouvez ajouter n'importe quel contrôle dont vous avez besoin. (Par exemple: vous pouvez ajouter un bouton, une étiquette, une image.) Dans l'exemple, j'ai ajouté un sélecteur pour sélectionner une tranche d'âge.
  < NavigationPage .  TitleView > 
        < Picker Title  =  "Sélectionnez la tranche d'âge:" > 
            < Picker .  Items > 
                < x :  Chaîne >  18   -   21  < /  x :  Chaîne > 
                < x :  Chaîne >  21   -   30  < /  x :  Chaîne > 
                < x :  Chaîne >  30  et suivantes  < /  x :  String > 
            < /  Picker .  Items > 
        < /  Picker > 
 < /  Navig ationPage .  TitleView > 
 ➖  Pour masquer la barre de navigation:  Il vous suffit d'utiliser la ligne suivante dans vos propriétés XAML.
 NavigationPage.HasNavigationBar = "false"
 C'est tout pour aujourd'hui! J'espère que cet article vous sera utile!
 Merci d'avoir lu! 💚
  Références:   https://docs.microsoft.com/es-es/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical