Une introduction à Xamarin Forms Shell

Parfois, nous investissons trop de temps à créer des applications avec des navigations complexes, ce qui nous fait prolonger la période de livraison de l'application et, par conséquent, les coûts pour nos clients. C'est pourquoi, dans cet article, nous allons en apprendre davantage sur Xamarin.Forms Shell.

Nous allons apprendre les sujets suivants:

➖ Qu'est-ce que Xamarin.Forms Shell?

➖ Ses principaux avantages [19659004] ➖ Comment créer une page dans Shell

➖ Connaître la hiérarchie d'une application dans Shell

➖ Flyout

➖ Navigation

Commençons!

Qu'est-ce que Xamarin.Forms Shell ?

Xamarin.Forms Shell est un conteneur qui vise à améliorer la complexité de navigation de nos applications.

Principaux avantages de Xamarin.Forms Shell

Parmi ses principaux avantages, nous avons les suivants:

? Réduit la complexité du développement d'applications mobiles

? Fournit une expérience utilisateur de navigation commune

? Utilise un schéma de navigation basé sur l'URI

? Dispose d'un contrôleur de recherche intégré

Créons maintenant une page dans Shell! ?‍♀

Pour créer notre page dans Shell, nous devons effectuer les étapes suivantes:

1. Passons au XAML!

Nous allons créer une page appelée AppShell.xaml . Lorsque vous créez un XAML, une structure prédéfinie est automatiquement générée, à laquelle nous n'avons qu'à ajouter les balises et vous devriez avoir une structure comme celle-ci:

2. Hérité de la classe Shell

Lors de la création du XAML, un code-behind de la page a également été généré, qui, selon notre exemple, devrait être appelé AppShell.xaml.cs . Ici, nous devons hériter de la classe Shell :

     classe publique partielle AppShell: Shell
    {
         AppShell public ()
         {
              InitializeComponent ();
         }
    }

Et avec ces deux étapes simples, notre application est prête à fonctionner dans Shell. »

Maintenant, apprenons la hiérarchie d'une application dans Shell

Une fois la page créée, nous devons ajouter les composants qui nous permettra de faire la navigation et la conception de notre application. Ce Shell nous a donné une structure avec laquelle nous pouvons travailler de manière très simple et pratique!

Structure hiérarchique

 1. FlyoutItem ou Tabbar
    2. Onglet
        3. ShellContent

? FlyoutItem ou Tabbar: Représente un ou plusieurs éléments dans le Flyout.

? Onglet: Regroupe le contenu dans des onglets.

? ShellContent: Représente la ContentPage dans l'application. Lorsque plusieurs sont ajoutés, ils sont représentés dans des onglets.

Qu'est-ce que le Flyout?

Parmi les composants que nous devons ajouter à notre page, nous avons le Flyout, qui facilite la navigation et la conception via un menu.

Flyout est un menu déroulant accessible via l'icône du hamburger ou en faisant simplement glisser votre doigt de gauche à droite.

Il est composé des éléments suivants:

? En-tête

? Flyout éléments

Items Éléments de menu

Voyons un exemple de procédure à suivre

    
         ...
        
            
                
                    
                
                
                    
                
            
            
                
            
              
                
            
            
                
            
        
         ...
    

Image et exemple obtenus à partir de la documentation officielle.

Navigation

Une fois nos pages construites, nous devons pouvoir naviguer entre elles. L'une des parties les plus intéressantes de Shell est la facilité avec laquelle il nous permet de naviguer à travers les itinéraires. Voyons voir!

Shell effectue la navigation en spécifiant un URI, qui peut avoir trois composants:

? Route: Définissez le chemin vers le contenu qui fait partie de la hiérarchie visuelle Shell.

? Page: Les pages qui n'existent pas dans la hiérarchie visuelle Shell peuvent être insérées dans la pile de navigation de n'importe où dans une application.

Paramètres de requête: Ce sont des paramètres de requête qui peuvent être transmis à la page de destination lors de la navigation.

Structure URI

Avec les trois éléments précédents, la structure de l'itinéraire sera la suivante: [19659004]

// Route + / page? + QueryParameters = / / route / page? QueryParameters

Enregistrement des itinéraires

Pour enregistrer un itinéraire, nous devons uniquement ajouter la propriété Route suivie du nom de l'itinéraire :

Affichage des routes

Les routes ajoutées ci-dessus prennent la hiérarchie des éléments parents, donc si nous voulons visualiser plus rapidement à quoi ressemblera la structure indiquée, nous obtiendrons un résultat comme celui-ci:

 Animaux
   national
     chats
     chiens
 singes
 éléphants
 ours
à propos

Maintenant, recréons les routes!

Dans les exemples suivants, certains scénarios d'accès aux différentes routes de notre exemple ont été indiqués:

Je veux aller à … ?
? chiens ➡ // animaux / domestiques / chiens
? domestiques ➡ // animaux / domestiques
? environ ➡ // à propos

Enregistrement des pages

Pour enregistrer les pages, il suffit d'ajouter le ligne suivante. Ci-dessous, j'explique sa structure:

Routing.RegisterRoute (+ "nom de page" + " typeof (" + " / Page? " +));
= Routing.RegisterRoute (" monkeydetails ", typeof (MonkeyDetailPage));

Types de routes

Shell a deux types de routes:

Absolue: Parcourez en spécifiant un URI absolu valide comme argument pour la méthode GoToAsync.

Exemple: attendez Shell.Current .GoToAsync ("// animaux / singes");

Relatif: La ​​navigation se fait également en spécifiant un URI relatif valide comme argument pour la méthode GoToAsync. Le système tentera de rechercher des URI qui correspondent à un objet ShellContent.

Exemple: attendre Shell.Current.GoToAsync ("monkeydetails");

Ready!

Notre shell l'application est prête à démarrer! ??

Merci d'avoir lu mon article! ?

Références:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/introduction