Xamarin.Forms MasterDetailPage

Xamarin.Forms MasterDetailPage

  1. Objectif

    • Connaitre la classe Xamarin.Forms MasterDetailPage
  2. Introduction

    • Le MasterDetailPage affiche deux pages un maître et un détail.
    • Lorsque MasterDetailPage est chargé, la page de détails est affichée.
    • La page maître est généralement utilisée pour afficher les menus ou une liste d’éléments.
    • Lorsqu’un élément est sélectionné, des informations détaillées sur l’élément sélectionné sont affichées dans la page de détail.
    • MasterDetailPage est un excellent outil pour vous aider à créer des applications réactives qui fonctionnent sur un large éventail de types d’appareils et de systèmes d’exploitation.
  3. Spécifier le comportement de séparation ou de survol

    • Le Xamarin.Forms MasterDetailPage peut vous donner un affichage principal-détail classique côte à côte ou un menu tiroir-tiroir.
    • La meilleure option dépend de vos données et des propriétés du périphérique d’exécution.
    • Xamarin.Forms utilise le terme Split pour une vue côte à côte et Popover pour un tiroir coulissant.
      • Précisez votre préférence

      • MasterDetailPage a une propriété appelée MasterBehavior qui vous permet de spécifier votre choix entre split et popover.
      • La valeur est une énumération avec les cinq options indiquées ci-dessous.
        • Défaut:Les détails sont affichés par défaut pour la plate-forme.
        • Popover : Détails pop sur la page.
        • Split : Les détails sont toujours affichés dans un écran divisé.
        • SplitOnLandscape : Les détails sont affichés sur un écran divisé lorsque l’appareil est en orientation paysage.
        • SplitOnPortrait : Les détails sont affichés sur un écran divisé lorsque l’appareil est en orientation portrait.
    • Utilisation

      • Créez l’application Les_MasterDetailPage comme suit :
        1. Dans l’écran Démarrer, lancez Visual Studio.
        2. Dans Visual Studio, cliquez sur Créer un nouveau projet…
        3. 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_MasterDetailPage, choisissez l’emplacement du projet et cliquez sur le bouton OK :
        4. Dans l’Explorateur de solutions, dans le projet Les_MasterDetailPage, double-cliquez sur MainPage.xaml pour l’ouvrir
      • Changer le ContentPage en MasterDetailPage comme suit :
        1. Double cliquer sur le fichier MainPage.xaml pour l’ouvrir
        2. Changer le ContentPage en MasterDetailPage
        3. Les_MasterDetailPage

        4. Ajoutez deux balises entre les MasterdetailPage et /MasterdetailPage
        5. Xamarin.Forms MasterDetailPage est une page qui gère deux pages d’informations connexes:
          Une page maître présentant des éléments:
          Une page détaillée présentant des détails sur les éléments de la page maître: .

        6. il ressemble à ce qui est montré ci-dessous:
        7. Donc, ce que je suis prêt à faire est d’avoir l’écran principal où je peux montrer tous les types de page de Xamarin et toutes les définitions ou les utilisations dans la page de détail et sur la page maître, je vais énumérer tous les éléments de menu.
          • ContentPage
          • MasterDetailPage
          • NavigationPage
          • TabbedPage
          • TemplatedPage
          • CarouselPage
    • Ajoutez les deux pages
    •  
             ..............
          
          
              ................
          
      
    • Dans la page Master créez votre menu
    •  
              
                  
                      
                          
                  
              
           
      
  4. Créez les pages de contenu
    • Cliquez avec le bouton droit de votre sourie sur le nom du projet.
    • Ajouter -> Nouveau fichier … puis dans le menu des formulaires choisissez Formulaires ContentPage Xaml, laissez le nom par défaut Page1.xaml
    • Les_MasterDetailPage

    • Dans cette page, vous pouvez écrire le code XAML suivant:
  5. Créez et remplissez le reste des pages (6 pages en total), en fin il ressemble à ce qui est montré ci-dessous:
  6. Double cliquer sur le fichier MainPage.xaml.cs pour l’ouvrir
  7. Maintenant, il nous reste qu’appeler les pages déjà crées
  • Découvrez comment procéder

  • Abonnez vous à notre chaîne YouTube gratuitement