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