Une application typique a besoin au minimum d'une expérience de navigation hiérarchique où l'utilisateur peut naviguer dans les pages en avant et en arrière selon les besoins. MAUI propose une solution le Shell.
Le Shell de MAUI vs Xamarin.Forms
Il a peu de différences entre le Shell des Xamarin.Forms et celui de MAUI, le concept est même rigoureusement le même. C’est pourquoi, en complément au présent article, je conseille au lecteur intéressé par le sujet de se référer à cette série que j’ai écrite pour le Shell Xamarin.Forms :
Et même un petit complément en vidéo à cette adresse :
https://www.e-naxos.com/Blog/post/XamarinForms-Le-Shell-Complement-Video-!.aspx
On trouver même un papier où j’explique l’utilisation du Shell en Modal (ce qui a été ajouté au fil du temps dans les Xamarins.Forms) : https://www.e-naxos.com/Blog/post/Le-Shell-en-Modal.aspx
On notera qu’il s’agit ici d’articles portant sur le Shell des Xamarin.Forms et non de MAUI, forcément plus achevé et plus pratique sous certains aspects. Mais s’agissant de la même fonctionnalité visant le même service rien ne sert de répéter ce que j’ai déjà écrit. A prendre donc malgré tout avec un certain recul à propos de détails qui ont évolué depuis.
La plate-forme .NET MAUI fournit deux formes principales de navigation vers les pages d’une application :
Le Shell
Les pages de navigation de base, telles que FlyoutPage, TabbedPage et NavigationPage.
Dans ce article, je vais vous montrer comment vous pouvez intégrer la navigation par page aidée par le Shell dans votre application .NET MAUI avec des exemples de code.
Navigation dans les pages via le Shell
La navigation de page avec le Shell est recommandée pour fournir une expérience cohérente de navigation dans une application mobile .NET MAUI.
Shell est un contrôle d'interface utilisateur qui héberge les pages et fournit des menus déroulants (Flyout) et des onglets (Tab) pour la navigation. La navigation dans les pages par Shell peut également être effectuée en fonction des URL. Vous pouvez utiliser des modèles de contenu (Content Templates) pour rendre le code plus efficace.
Un modèle d’utilisation de Shell est disponible dans tout nouveau projet .NET MAUI en tant que fichier AppShell.Xaml avec une seule page ajoutée en tant que page principale. Pour utiliser ce modèle :
- Créez une App MAUI. Par défaut l’App de base qui sera générée utilisera le Shell avec une unique page principale.
- Créez les pages supplémentaires dont votre App a besoin. Ici nous en ajouterons deux appelées Add.Xaml et Edit.Xaml.
- Ouvrez le fichier AppShell.Xaml dans lequel la MainPage a déjà été ajoutée comment un contenu. Ajouter les nouvelles pages comme un contenu aussi.
Le code devrait ressembler alors à celui-ci (extrait) :
<Shell
x:Class="ShellPageNavigation.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ShellPageNavigation"
Shell.FlyoutBehavior="Diabled">
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />
<ShellContent
Title="Add"
ContentTemplate="{DataTemplate local:AddPage}"
Route="AddPage" />
<ShellContent
Title="Edit"
ContentTemplate="{DataTemplate local:EditPage}"
Route="EditPage" />
</Shell>
Vous noterez que par défaut le mode Flyout (menu flottant) est désactivé. Pour le rendre opérationnel il suffit d’ajouter la variable Flyout dans l’entête de l’objet Shell :
Shell.FlyoutBehavior="Flyout"
Navigation en utilisant les pages de navigation de base
Les pages de navigation de base sont un autre moyen d'obtenir une navigation par page dans votre application .NET MAUI. elles prennent en charge des pages telles que FlyoutPage , TabbedPage et NavigationPage . Nous pouvons effectuer la navigation à travers les actions Push et Pop .
TabbedPage
Le .NET MAUI TabbedPage contient des onglets, et chaque onglet chargera le contenu dans la zone de détail. Attention, les pages sont chargées et cela prend du temps et de la mémoire. C’est un mode de navigation très pratique pour des pages légères mais qui doit être évité pour des pages chargées.
Voici un exemple de code :
<TabbedPage xmlns = http://schemas.microsoft.com/dotnet/2021/maui
xmlns:x = http://schemas.microsoft.com/winfx/2009/xaml
xmlns:local = "clr-namespace :ShellPageNavigation"
x:Class = "ShellPageNavigation.TabbedPageNavigation" >
<local:MainPage Title = "Home" />
<local:AddPage Title = "Add" />
<local:EditPage Title = "Edit" />
</TabbedPage>
FlyoutPage
La FlyoutPage de .NET MAUI contient une page de détail avec une page de superposition appelée flyout pour présenter les éléments. La page de détail chargera le contenu de la page sélectionnée sur le flyout. C’est un mode de navigation pratique quand on part d’une liste et qu’on souhaite principalement afficher des pages de détails (la fiche d’un article avec son nom, sa disponibilité, son image par exemple). S’il doit y avoir de la saisie, des déplacements dans la page de détail ou d’autres interactions de ce type ce mode n’est pas conseillé.
En voici un exemple :
<FlyoutPage xmlns = http://schemas.microsoft.com/dotnet/2021/maui
xmlns:x = http://schemas.microsoft.com/winfx/2009/xaml
xmlns:local = "clr-namespace :ShellPageNavigation"
x:Class = "ShellPageNavigation.FlyoutPageNavigation" >
<FlyoutPage.Flyout>
<local:FlyMenuPage x:Name = "flyoutMenu" />
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:MainPage/>
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
</FlyoutPage>
NavigationPage
La NavigationPage .NET MAUI est utilisée pour empiler les pages, et il est alors facile de naviguer vers la page requise avec les actions push et pop.
Pousser les pages
La méthode PushAsync de NavigationPage poussera une page dans la pile de navigation.
await Navigation.PushAsync(new DetailsPage());
Page pop
La méthode PopAsync de NavigationPage fera apparaître la dernière page dans la pile de navigation. Cela correspond aussi au bouton (réel ou virtuel) « Back » de la device.
Pour faire un pop :
await Navigation.PopAsync();
Conclusion
Le Shell et les pages de navigation de base de MAUI rendent la navigation très simple tout en étant structurée et cohérente. Les fonctionnalités offertes sont simples mais très complètes.
Où se cache le loup alors ?
Et oui, quand cela parait simple dès le départ c’est qu’il y a souvent un loup caché dans le bois !
Ici le canidé sauvage se cache dans le respect de MVVM ! Naviguer d’une page à l’autre depuis le code Behind des pages ou du Shell est en effet extrêmement simple. Là où les choses se compliquent c’est lorsqu’on souhaite respecter MVVM et pouvoir naviguer depuis les ViewModels et non depuis les pages elles-mêmes. Puis lorsqu’on souhaitera passer des arguments aux pages appelées.
Mais cela est une autre histoire sur laquelle j’ai déjà écrit et sur laquelle je ne manquerai pas de revenir…
Stay Tuned !