Maîtriser le shell .NET MAUI – Partie 1

Apprenez tout ce dont vous avez besoin pour maîtriser l’utilisation de Shell dans vos applications .NET MAUI. Premièrement : créez un fichier Shell et ajoutez plus d’éléments à la hiérarchie de l’application.

Dans cette série dédiée à .NET MAUI Shell, vous apprendrez tout ce dont vous avez besoin pour maîtriser l’utilisation de Shell dans vos applications .NET MAUI. Commençons !

Qu’est-ce que le shell .NET MAUI ?

C’est la première question à laquelle nous devons répondre au cas où vous n’auriez jamais entendu parler de ce terme. Shell est une fonctionnalité incluse dans .NET MAUI, qui réduit la complexité du développement d’applications en fournissant les fonctionnalités fondamentales requises par toute application.

Comment ça le réduit ? Eh bien, à travers diverses fonctionnalités :

• Utilisation d’un fichier unique où l’on définit la structure de l’application via des pages
• Schémas de navigation familiers aux utilisateurs, tels que les menus volants et les onglets
• Système de navigation basé sur une URL qui permet de naviguer vers n’importe quelle page de l’application, même en passant des paramètres
• Gestionnaire de recherche intégré

Voyons comment créer une application à l’aide de .NET MAUI Shell.

Créer votre premier shell

Lorsque vous créez un nouveau projet à l’aide de Application .NET MAUI modèle, un fichier appelé AppShell.xaml est automatiquement créé. Cependant, pour mieux comprendre le fonctionnement de ce fichier, créons notre propre fichier Shell. Pour ce faire, créez un nouvel élément à l’aide du Page de contenu .NET MAUI (XAML) modèle, que nous appellerons MyShell.xaml.

Pour indiquer que ce fichier sera le fichier Shell de l’application, c’est-à-dire où nous définirons la structure hiérarchique de l’application, nous devons remplacer le ContentPage tapez avec Shell tapez et supprimez le contenu initial, ce qui donne le code suivant :

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MAUIUtils.MyShell"
             Title="MyShell">
              
</Shell>

De même, dans MyShell.xaml.csnous devons changer le type dont il hérite, en passant de ContentPage à Shell:

public partial class MyShell : Shell
{
	public MyShell()
	{
		InitializeComponent();
	}
}

Enfin, dans le App.xaml.cs fichier, nous remplacerons AppShell avec une nouvelle instance de MyShellqui est le Shell que nous souhaitons utiliser dans notre application :

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new MyShell();
    }
}

Avec cela, nous disposons d’un fichier propre avec lequel nous pouvons expérimenter et analyser différentes fonctionnalités de Shell.

Premier utilitaire : générateur de couleurs

Une fois que nous avons notre fichier Shell, nous devons ajouter des éléments à la hiérarchie des pages. Pour cet exercice, nous allons créer plusieurs pages contenant des mini utilitaires pour les utilisateurs. Le premier utilitaire que nous allons créer sera dans une nouvelle ContentPage appelée RandomColor.xamlce qui nous permettra de combiner les valeurs de trois curseurs pour obtenir une couleur RVB.

Pour cet utilitaire, nous utiliserons les composants suivants :

• UN VerticalStackLayout qui regroupera les contrôles sur la page
• UN Grid qui changera de couleur en fonction des valeurs du curseur
• Trois RadSliders qui nous permettent de combiner leurs valeurs pour créer une nouvelle couleur RVB
• UN Label qui affichera la valeur hexadécimale finale

Grâce à la polyvalence du RadSlider contrôle, nous pouvons changer la couleur de chaque curseur afin que l’utilisateur sache en un coup d’œil de quelle couleur il s’agit, ce qui donne le code XAML suivant :

<ContentPage.Resources>
    <Style x:Key="RedTrackStyle" TargetType="telerik:SliderRangeTrack">
        <Setter Property="TrackThickness" Value="8" />
        <Setter Property="Fill" Value="#E57373" />
        <Setter Property="Stroke" Value="#FFCDD2" />
        <Setter Property="StrokeThickness" Value="1" />
    </Style>
    <Style x:Key="RedThumbStyle" TargetType="telerik:SliderThumb">
        <Setter Property="Fill" Value="#F44336" />
        <Setter Property="Stroke" Value="#E53935" />
        <Setter Property="StrokeThickness" Value="2" />
    </Style>
    <Style x:Key="BlueTrackStyle" TargetType="telerik:SliderRangeTrack">
        <Setter Property="TrackThickness" Value="8" />
        <Setter Property="Fill" Value="#64B5F6" />
        <Setter Property="Stroke" Value="#BBDEFB" />
        <Setter Property="StrokeThickness" Value="1" />
    </Style>
    <Style x:Key="BlueThumbStyle" TargetType="telerik:SliderThumb">
        <Setter Property="Fill" Value="#2196F3" />
        <Setter Property="Stroke" Value="#1976D2" />
        <Setter Property="StrokeThickness" Value="2" />
    </Style>
    <Style x:Key="GreenTrackStyle" TargetType="telerik:SliderRangeTrack">
        <Setter Property="TrackThickness" Value="8" />
        <Setter Property="Fill" Value="#81C784" />
        <Setter Property="Stroke" Value="#C8E6C9" />
        <Setter Property="StrokeThickness" Value="1" />
    </Style>
    <Style x:Key="GreenThumbStyle" TargetType="telerik:SliderThumb">
        <Setter Property="Fill" Value="#4CAF50" />
        <Setter Property="Stroke" Value="#388E3C" />
        <Setter Property="StrokeThickness" Value="2" />
    </Style>
</ContentPage.Resources>
<VerticalStackLayout>
    <Grid
        x:Name="GeneratedColor"
        Background="Black"
        HeightRequest="250" />
    <telerik:RadSlider
        x:Name="rSlider"
        Maximum="1"
        Minimum="0"
        RangeTrackStyle="{StaticResource RedTrackStyle}"
        ThumbStyle="{StaticResource RedThumbStyle}"
        ValueChanging="Slider_ValueChanging"
        Value="0" />
    <telerik:RadSlider
        x:Name="gSlider"
        Maximum="1"
        Minimum="0"
        RangeTrackStyle="{StaticResource GreenTrackStyle}"
        ThumbStyle="{StaticResource GreenThumbStyle}"
        ValueChanging="Slider_ValueChanging"
        Value="0" />
    <telerik:RadSlider
        x:Name="bSlider"
        Maximum="1"
        Minimum="0"
        RangeTrackStyle="{StaticResource BlueTrackStyle}"
        ThumbStyle="{StaticResource BlueThumbStyle}"
        ValueChanging="Slider_ValueChanging"
        Value="0" />
    <Label
        x:Name="HexColor"
        FontAttributes="Bold"
        FontSize="Title"
        HorizontalOptions="Center"
        Text="#000000" />
</VerticalStackLayout>

Le code derrière l’utilitaire est le suivant :

public partial class RandomColor : ContentPage
{
	public RandomColor()
	{
		InitializeComponent();
	}

    private void Slider_ValueChanging(object sender, Telerik.Maui.ValueChangingEventArgs e)
    {
		var r = rSlider.Value;
		var g = gSlider.Value;
		var b = bSlider.Value;
		var color = Color.FromRgb(r, g, b);

		GeneratedColor.Background = color;
		HexColor.Text = $"#{(int)(r * 255):X2}{(int)(g * 255):X2}{(int)(b * 255):X2}";
    }
}

Ajout d’un élément à la hiérarchie

Une fois que nous avons ajouté notre Shell et le premier utilitaire de l’application, il est temps de les intégrer. Si nous essayons d’exécuter l’application à ce moment-là, nous obtiendrons l’erreur suivante :

L’erreur indique que nous n’avons pas ajouté d’éléments au fichier Shell, il est donc temps d’aller à MyShell.xaml et commencez à ajouter des éléments. La façon dont nous ajoutons des éléments à la hiérarchie des applications consiste à utiliser le ShellContent balise comme indiqué ci-dessous :

<ShellContent ContentTemplate="{DataTemplate UtilPages:RandomColor}" />

Un point à souligner est qu’avec le code précédent, une ContentPage sera créée à la demande, c’est-à-dire pas tant que l’utilisateur n’aura pas consulté la page. Cela se produit grâce au DataTemplate extension de balisage, qui permet de définir le ContentTemplate propriété de chacun ShellContent à un objet ContentPage. En lançant l’application, nous obtenons le résultat suivant :

Il convient de noter qu’à l’heure actuelle, avec un seul ShellContent élément dans la hiérarchie, aucun élément de navigation tel qu’un menu volant ou des barres d’onglets n’apparaît. C’est normal, car cela n’aurait aucun sens d’avoir des éléments de navigation si l’on veut créer une application avec une seule page en utilisant Shell.

Deuxième utilitaire : URL vers le code QR

Il est temps d’ajouter de nouveaux utilitaires à notre application, nous allons donc créer une nouvelle ContentPage appelée URLToQR.xaml. Cette page est composée des éléments suivants :

• UN VerticalStackLayout pour aligner les éléments sur la page
• UN RadEntry pour que l’utilisateur saisisse une URL
• UN Button pour lancer la génération du code QR
• UN RadBarcode qui affichera le code QR généré

Le RadBarcode Le contrôle nous permet de générer des QR ou des codes-barres de manière très simple, en utilisant des composants fiables et robustes. Aussi, le RadEntry Le contrôle permet de personnaliser différents aspects d’une zone de texte dans nos applications.

Le code XAML qui définira l’utilitaire est le suivant :

<VerticalStackLayout Margin="25" Spacing="25">
    <telerik:RadEntry
        x:Name="URLEntry"
        BackgroundColor="LightBlue"
        FontSize="14"
        Placeholder="Enter your URL to convert to QR code:"
        PlaceholderColor="#99000000" />
    <Button
        x:Name="GenerateQR"
        Clicked="GenerateQR_Clicked"
        CornerRadius="10"
        Text="Generate QR code"
        WidthRequest="250" />
    <telerik:RadBarcode
        x:Name="QRCode"
        HeightRequest="250"
        IsVisible="False">
        <telerik:RadBarcode.Symbology>
            <telerik:QRCode SizingMode="Stretch" />
        </telerik:RadBarcode.Symbology>
    </telerik:RadBarcode>
</VerticalStackLayout>

D’un autre côté, le code derrière est le suivant :

public partial class URLToQR : ContentPage
{
	public URLToQR()
	{	
		InitializeComponent();
	}

    private void GenerateQR_Clicked(object sender, EventArgs e)
    {
        QRCode.Value = URLEntry.Text;
        QRCode.IsVisible = true;
    }
}

Une fois que nous avons créé le deuxième utilitaire, voyons comment l’ajouter à la hiérarchie des applications

Ajout de plusieurs éléments ShellContent

Pour ajouter des éléments supplémentaires à la hiérarchie des applications, allons à MyShell.xaml et ajoutez un nouveau ShellContent balise, en remplaçant le DataTemplate page, ce qui donne ce qui suit :

<ShellContent ContentTemplate="{DataTemplate UtilPages:RandomColor}" />
<ShellContent ContentTemplate="{DataTemplate UtilPages:URLToQR}" />

Avec ce changement, si nous exécutons à nouveau l’application, il semblera que rien ne s’est passé. Cependant, si vous regardez attentivement, vous verrez qu’à côté du titre de la page Color Creator, il y a un espace vide. Si vous appuyez sur cette touche, un menu volant qui semble vide s’affichera, comme le montre l’image suivante :

Si vous appuyez juste en dessous du rectangle gris dans le menu déroulant, vous verrez comment il accède à l’utilitaire de génération de code QR, que j’ai exécuté pour afficher un code QR généré à partir du site Progress Telerik :

Même si le manque d’indicateurs visuels peut sembler un peu déconcertant, la réalité est que l’interface est apparue ainsi parce que nous n’avons pas effectué de configuration, ce que nous ferons ensuite.

Configuration des titres et des icônes des pages

La première chose que nous ferons est d’attribuer une couleur d’arrière-plan à la barre de navigation du Shell. Ceci peut être réalisé en attribuant le BackgroundColor propriété, comme indiqué ci-dessous :

<Shell
    x:Class="MAUIUtils.MyShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:UtilPages="clr-namespace:MAUIUtils.Pages"
    Title="MyShell"
    BackgroundColor="#F9AA33">

Ensuite, nous attribuerons des valeurs aux Title et Icon propriétés de chacun ShellItemcomme suit :

<ShellContent
    Title="Color Generator"
    ContentTemplate="{DataTemplate UtilPages:RandomColor}"
    Icon="dotnet_bot.png" />
<ShellContent
    Title="URL to QR"
    ContentTemplate="{DataTemplate UtilPages:URLToQR}"
    Icon="dotnet_bot.png" />

Avec ces simples changements, nous verrons un changement substantiel dans l’affichage de l’application :

Vous savez maintenant comment créer votre propre fichier Shell et l’utiliser dans votre application, ainsi que comment ajouter davantage d’éléments à la hiérarchie de l’application. Dans le prochain article, vous verrez comment Shell permet d’ajouter différents niveaux de hiérarchie dans l’application grâce à l’utilisation d’onglets, et de personnaliser à la fois le flyout et les onglets.