Fermer

septembre 19, 2024

Maîtriser le shell .NET MAUI – Partie 2

Maîtriser le shell .NET MAUI – Partie 2


Apprenez tout ce dont vous avez besoin pour maîtriser l’utilisation de Shell dans vos applications .NET MAUI. Aujourd’hui : créez des hiérarchies et personnalisez un fichier Shell en fonction de vos besoins.

Continuons avec la série Mastering .NET MAUI Shell. Dans un article précédent de la série, vous avez appris à créer votre propre fichier Shell et à y ajouter du contenu. Il est maintenant temps d’apprendre à créer des hiérarchies et à les personnaliser en fonction de vos besoins. Allons-y !

Ajout de nouveaux utilitaires à l’application

Afin que nous puissions visualiser correctement les exemples à venir dans ce guide, ajoutons quelques utilitaires supplémentaires à notre application.

Troisième utilitaire : Cool Image Editor

Le troisième utilitaire que nous ajouterons à l’application est un éditeur d’images. À quel point cela pourrait-il être compliqué de créer un tel contrôle ? Décidément, cela pourrait vous prendre plusieurs jours pour mettre en œuvre ce type de contrôle à partir de zéro. Heureusement, le Telerik Suite d’interface utilisateur pour .NET MAUI dispose d’un contrôle d’éditeur d’images que nous pouvons intégrer rapidement et facilement dans l’application.

Cet utilitaire sera composé des composants suivants :

Pour intégrer ce contrôle dans notre application, nous allons créer une nouvelle ContentPage appelée CoolEditor.xaml avec le contenu suivant :

<Grid RowDefinitions="Auto,*">
    <telerik:RadImageEditorToolbar ImageEditor="{x:Reference imageEditor}" />
    <telerik:RadImageEditor x:Name="imageEditor" Grid.Row="1" />
</Grid>

De plus, nous allons charger une image dans le contrôle dans le code derrière, en utilisant le code C# suivant :

public CoolEditor()
{
    InitializeComponent();       

    this.imageEditor.Source = ImageSource.FromFile("dotnet_bot.png");
}

Assez simple, n’est-ce pas ? Le nouvel utilitaire implémente par défaut un ensemble de fonctionnalités de manipulation d’images, ayant l’apparence suivante :

Utilitaire d'édition sympa

Voyons maintenant comment créer le quatrième utilitaire.

Quatrième utilitaire : compteur de mots

Le prochain utilitaire, qui pourrait être très utile à nos utilisateurs, est un compteur de mots qui permet à l’utilisateur de connaître le nombre de mots écrits dans une zone de texte. Cet utilitaire sera composé des contrôles suivants :

  • Un plat principal Grid pour regrouper les champs, attribuer une couleur de fond et la disposition de l’utilitaire
  • UN Border pour donner une meilleure vue à la zone de texte, où l’utilisateur entrera les mots à compter
  • Un Editor pour que l’utilisateur saisisse le texte qui contiendra les mots à compter
  • UN Label pour afficher le nombre de mots comptés

Ajoutons une nouvelle ContentPage appelée WordCounter.xamlet saisissez le code suivant :

<Grid BackgroundColor="DarkSlateBlue" RowDefinitions=".8*,.2*">
    <Border Margin="10" StrokeShape="RoundRectangle 12">
        <Editor
            x:Name="WordsInput"
            Background="MediumPurple"
            Placeholder="Your words"
            PlaceholderColor="LightGray"
            TextChanged="WordsInput_TextChanged" />
    </Border>
    <Label
        x:Name="WordCountLabel"
        Grid.Row="1"
        FontSize="24"
        HorizontalOptions="Center"
        Text="0 Words"
        TextColor="White"
        VerticalOptions="Center" />
</Grid>

Dans le code derrière, la fonctionnalité pour compter les mots sera définie comme suit :

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

    private void WordsInput_TextChanged(object sender, TextChangedEventArgs e)
    {        
        var newText = e.NewTextValue;        
        int wordCount = CountWords(newText);        
        WordCountLabel.Text = $"{wordCount} Words";

    }

    
    private int CountWords(string text)
    {
        if (string.IsNullOrWhiteSpace(text))
        {
            return 0;
        }        
        var words = text.Split(new[] { ' ', '\t', '\n', '\r' }, StringSplitOptions.RemoveEmptyEntries);
        return words.Length;
    }
}

Une fois le nouvel utilitaire implémenté, il ressemblera à ceci :

Utilitaire de compteur de mots en action

Avec cela, nous disposons désormais de suffisamment d’utilitaires pour améliorer la hiérarchie de l’application. Voyons comment procéder dans la section suivante.

Ajout de sous-onglets à la hiérarchie

Jusqu’à présent, nous avons créé quatre utilitaires qui font partie de notre application, et si vous vous en souvenez, ils sont dans la même hiérarchie au sein du Flyout, comme nous pouvons le voir dans l’image suivante :

Création d'un nouvel élément Shell

Ce qui se passe actuellement, c’est que le framework .NET MAUI crée automatiquement un FlyoutItem élément de type pour chaque ShellContent. Peut-être que vous ne voyez aucun problème avec cette hiérarchie pour le moment. Cependant, si l’application se développe avec de nouveaux utilitaires, la barre latérale se remplira d’éléments, ce qui rendra la navigation difficile. C’est ici que l’on peut commencer à redéfinir la hiérarchie initiale pour ajouter des onglets et mieux organiser les pages de l’application.

Supposons que nous souhaitions une nouvelle hiérarchie, divisant les utilitaires en catégories, comme dans l’image suivante :

Hiérarchie des utilitaires avec hiérarchie personnalisée

Pour regrouper les outils en catégories, nous devons définir explicitement FlyoutItem tapez des éléments dans le MyShell.xaml fichier, en imbriquant le ShellContent nous avions créé. Dans notre exemple, je vais créer deux FlyoutItem éléments pour représenter les catégories, ce qui donne cette forme :

<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">

    <FlyoutItem Title="Creative Tools" Icon="dotnet_bot.png">
        <ShellContent
            Title="Image Editor"
            ContentTemplate="{DataTemplate UtilPages:CoolEditor}"
            Icon="dotnet_bot.png" />
        <ShellContent
            Title="URL to QR"
            ContentTemplate="{DataTemplate UtilPages:URLToQR}"
            Icon="dotnet_bot.png" />
    </FlyoutItem>

    <FlyoutItem Title="Productivity Tools" Icon="dotnet_bot.png">
        <ShellContent
            Title="Word Counter"
            ContentTemplate="{DataTemplate UtilPages:WordCounter}"
            Icon="dotnet_bot.png" />
        <ShellContent
            Title="Color Generator"
            ContentTemplate="{DataTemplate UtilPages:RandomColor}"
            Icon="dotnet_bot.png" />
    </FlyoutItem>
</Shell>

Cela entraîne l’ajout de seulement deux FlyoutItems au Flyout. Vous pouvez voir que dans le code XAML, nous avons également ajouté le Title et Icon propriétés pour chaque FlyoutItem, donnant le résultat suivant :

Flyout avec FlyoutItems personnalisés

D’autre part, quelques onglets ont été créés dans chaque catégorie représentant les utilitaires.

Onglets ajoutés après le regroupement des éléments ShellContent dans FlyoutItems

Ajout d’un nouveau niveau de hiérarchie avec .NET MAUI Shell

.NET MAUI Shell permet d’ajouter un autre niveau de hiérarchie que celui que nous avons vu auparavant. Imaginons que l’application continue de croître et que nous devions maintenant créer des sous-catégories dans l’application, comme dans l’exemple suivant :

Hiérarchie avec sous-catégories

Dans cette nouvelle catégorisation, nous avons ajouté une sous-catégorie appelée Outils de textedans lequel nous regrouperons tous les outils liés au texte. Pour y parvenir, dans le code XAML il faut créer explicitement des éléments de type Tabqui imbriquera les outils de cette sous-catégorie comme indiqué ci-dessous :

<FlyoutItem Title="Productivity Tools" Icon="dotnet_bot.png">
    <Tab Title="Text Tools" Icon="dotnet_bot.png">
        <ShellContent
            Title="Word Counter"
            ContentTemplate="{DataTemplate UtilPages:WordCounter}"
            Icon="dotnet_bot.png" />
        <ShellContent
            Title="Color Generator"
            ContentTemplate="{DataTemplate UtilPages:RandomColor}"
            Icon="dotnet_bot.png" />
    </Tab>

    <Tab Title="Other Tools" Icon="dotnet_bot.png">
        <ShellContent
            Title="Word Counter"
            ContentTemplate="{DataTemplate UtilPages:WordCounter}"
            Icon="dotnet_bot.png" />
        <ShellContent
            Title="Color Generator"
            ContentTemplate="{DataTemplate UtilPages:RandomColor}"
            Icon="dotnet_bot.png" />
    </Tab>
</FlyoutItem>

Dans le code ci-dessus, j’ai regroupé les deux ShellContent de la catégorie Outils de productivité au sein d’un nouveau Tabpour ensuite le dupliquer dans le but de vous montrer l’aspect visuel obtenu :

Hiérarchie avec des éléments Tab explicitement définis, affichant des sous-onglets dans l'interface graphique

Dans l’image ci-dessus, vous pouvez voir qu’une nouvelle section d’onglet a été créée au-dessus de la page, ce qui nous permet de créer un nouveau niveau dans la hiérarchie de l’application.

Personnalisation de la coque

.NET MAUI nous permet de modifier plusieurs aspects visuels du Shell, comme nous le verrons ci-dessous.

Personnalisation de l’icône du menu déroulant

Si pour une raison quelconque, nous voulons changer l’icône du hamburger qui fait partie de Shell, nous pouvons le faire via le FlyoutIcon propriété de la page Shell, 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"
    FlyoutIcon="dotnet_bot.png">

Le résultat de l’exécution est le suivant :

Icône Flyout personnalisée

Dans .NET MAUI, nous pouvons également personnaliser le Shell.FlyoutHeader et Shell.FlyoutFooter propriétés pour modifier l’en-tête et le pied de page du Flyout, comme dans l’exemple suivant :

<Shell.FlyoutHeader>
    <Grid BackgroundColor="DarkSlateBlue" HeightRequest="150">
        <Label
            FontSize="24"
            HorizontalOptions="Center"
            Text="MAUI Utils"
            TextColor="White"
            VerticalOptions="Center" />
    </Grid>
</Shell.FlyoutHeader>

<Shell.FlyoutFooter>
    <VerticalStackLayout HeightRequest="100">
        <Label
            FontSize="12"
            HorizontalOptions="Center"
            Text="Powered By"
            TextColor="Gray"
            VerticalOptions="Center" />
        <Label
            FontSize="30"
            HorizontalOptions="Center"
            Text="Progress"
            TextColor="#5CE500"
            VerticalOptions="Center" />
    </VerticalStackLayout>
</Shell.FlyoutFooter>

Le code ci-dessus donne ce qui suit :

En-tête et pied de page dans le menu déroulant .NET MAUI

Personnalisation des éléments du menu volant

Sans aucun doute, une question courante est la suivante : comment pouvons-nous personnaliser les éléments Flyout ? Ceci est possible en définissant le Shell.ItemTemplate propriété, où nous pouvons nous lier au FlyoutIcon et Title propriétés pour ajouter des contrôles et les personnaliser, comme dans l’exemple suivant :

<Shell.ItemTemplate>
    <DataTemplate>
        <Grid
            ColumnDefinitions=".2*, .8*"
            HeightRequest="75"
            RowSpacing="0">
            <Rectangle
                x:Name="background"
                Grid.ColumnSpan="2"
                Fill="Black"
                Opacity=".5" />
            <Image
                HeightRequest="30"
                Source="{Binding FlyoutIcon}"
                VerticalOptions="Center" />
            <Label
                Grid.Column="1"
                Margin="20,0,0,0"
                FontSize="20"
                Text="{Binding Title}"
                TextColor="White"
                VerticalOptions="Center" />
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

Il en résulte ce qui suit :

Apparence des éléments modifiée avec ItemTemplate

Personnalisation de l’apparence de l’élément sélectionné

Si vous avez modifié le Shell.ItemTemplate propriété, vous êtes probablement maintenant confronté au dilemme de savoir comment modifier l’apparence visuelle de l’élément sélectionné par l’utilisateur. Pour résoudre ce problème, il faut modifier le VisualStateManager.VisualStateGroups propriété, spécifiant les différents états de l’élément, ainsi que son apparence visuelle comme indiqué ci-dessous :

<Shell.ItemTemplate>
    <DataTemplate>
        <Grid
           ...
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter TargetName="background" Property="Rectangle.Fill" Value="Black" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter TargetName="background" Property="Rectangle.Fill" Value="DarkRed" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

Dans mon cas, je l’ai défini au sein du Container Grid, pour pouvoir accéder aux contrôles définis dans Shell.ItemTemplatedonnant le résultat suivant :

Apparence de l'élément sélectionné modifiée VisualStateGroup

Personnalisation des couleurs de la page Shell

.NET MAUI Shell nous permet de personnaliser les couleurs de la page Shell à travers différentes propriétés. Je vous montre ci-dessous quelques Propriétés Attachées (en commençant par le terme Shell.X) que nous pouvons utiliser pour ajuster les couleurs sur les pages Shell :

<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"
    FlyoutIcon="dotnet_bot.png"
    Shell.ForegroundColor="Yellow"
    Shell.TitleColor="DarkMagenta"
    Shell.UnselectedColor="DarkGreen">

Il est également possible de modifier l’apparence visuelle des onglets, grâce à une série de propriétés attachées qui commencent par le terme Shell.TabBarcomme 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"
    FlyoutIcon="dotnet_bot.png"
    Shell.ForegroundColor="Yellow"
    Shell.TabBarBackgroundColor="#1D1F24"
    Shell.TabBarDisabledColor="#1D1F24"
    Shell.TabBarForegroundColor="Yellow"
    Shell.TabBarTitleColor="#9E86FF"
    Shell.TabBarUnselectedColor="#555A62"
    Shell.TitleColor="DarkMagenta"
    Shell.UnselectedColor="DarkGreen">

Enfin, il est important de souligner que par défaut, dans le Styles.xaml fichier créé dans n’importe quel projet .NET MAUI, nous avons la section suivante disponible :

    <Style ApplyToDerivedTypes="True" TargetType="Shell">
        <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource OffBlack}}" />
        <Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource Primary}, Default={StaticResource White}}" />
        <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource SecondaryDarkText}}" />
        <Setter Property="Shell.DisabledColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
        <Setter Property="Shell.UnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray200}}" />
        <Setter Property="Shell.NavBarHasShadow" Value="False" />
        <Setter Property="Shell.TabBarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
        <Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource Magenta}, Dark={StaticResource White}}" />
        <Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource Magenta}, Dark={StaticResource White}}" />
        <Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
    </Style>

Ici, vous pouvez spécifier les différentes valeurs des propriétés de personnalisation du Shell, pour les modes sombre et clair de l’application.

Le résultat des personnalisations est le suivant :

Page Flyout et TabBar avec apparence personnalisée

Avec cela, vous savez maintenant comment créer des hiérarchies à l’aide de Shell et comment personnaliser ses couleurs. Dans le prochain article, vous apprendrez comment effectuer une navigation à l’aide de Shell, y compris le passage de paramètres, et comment créer votre propre SearchHandler pour permettre à vos utilisateurs d’effectuer des recherches.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link