Ajouter des contrôles visuels à une application .NET MAUI

  • 5 minutes

Maintenant que vous avez utilisé le modèle MAUI .NET pour créer l’application, l’étape suivante consiste à ajouter l’interface utilisateur et à implémenter la logique initiale de l’interface utilisateur.

Dans cette unité, vous en apprendrez davantage sur les blocs de construction d’une application et d’une structure de navigation .NET MAUI (Interface utilisateur d’application multiplateforme).

Quel est le contenu d’un projet .NET MAUI ?

Pour récapituler, un projet .NET MAUI contient initialement les éléments suivants :

  • Le fichier MauiProgram.cs contenant le code pour la création et la configuration de l’objet Application.

  • Les fichiers App.xaml et App.xaml.cs qui fournissent des ressources d’interface utilisateur et créent la fenêtre initiale pour l’application.

  • Les fichiers AppShell.xaml et AppShell.xaml.cs qui spécifient la page initiale de l’application et gèrent l’inscription des pages pour le routage de la navigation.

  • Les fichiers MainPage.xaml et MainPage.xaml.cs qui définissent la disposition et la logique de l’interface utilisateur de la page affichée par défaut dans la fenêtre initiale.

Vous pouvez ajouter d’autres pages à l’application si nécessaire, et créer des classes supplémentaires pour implémenter la logique métier nécessaire à l’application.

Un projet .NET MAUI contient également un ensemble par défaut de ressources d’application telles que des images, des icônes et des polices, ainsi qu’un code de démarrage par défaut pour chaque plateforme.

Classe d’application

La classe App représente l’application .NET MAUI dans son ensemble. Elle hérite de Microsoft.Maui.Controls.Application d’un ensemble de comportements par défaut. Rappelez-vous, comme indiqué dans l’unité précédente, qu’il s’agit de la classe App que le code d’amorçage instancie et charge pour chaque plateforme. Le constructeur de classe App, à son tour, crée généralement une instance de la classe AppShell, et l’affecte à la propriété MainPage. Il s’agit de ce code qui contrôle le premier écran que l’utilisateur voit en fonction des définitions du AppShell.

La classe App contient également les éléments suivants :

  • Des méthodes pour la gestion des événements de cycle de vie, notamment quand l’application est envoyée en arrière-plan (c’est-à-dire quand elle cesse d’être l’application située au premier plan).

  • Des méthodes pour la création de Windows pour l’application. L’application .NET MAUI dispose d’une fenêtre unique par défaut, mais vous pouvez créer et lancer davantage de fenêtres, ce qui est utile dans les applications de bureau et de tablette.

Shell

.NET MAUI Shell (.NET Multi-platform App UI) réduit la complexité du développement d’applications en fournissant les fonctionnalités fondamentales dont la plupart des applications ont besoin, à savoir :

  • Un emplacement unique pour décrire la hiérarchie visuelle d’une application.
  • Une expérience utilisateur de navigation commune.
  • Un schéma de navigation basé sur l’URI qui permet de naviguer vers n’importe quelle page de l’application.
  • Un gestionnaire de recherche intégré.

Dans une application .NET MAUI Shell, la hiérarchie visuelle de l’application est décrite dans une classe, qui est une sous-classe de la classe Shell. Cette classe peut se composer de trois objets hiérarchiques principaux :

  • FlyoutItem ou TabBar. Un FlyoutItem représente un ou plusieurs éléments dans le menu volant, et doit être utilisé quand le modèle de navigation de l’application nécessite un menu volant. Un TabBar représente la barre d’onglets inférieure, et doit être utilisé quand le modèle de navigation de l’application commence par des onglets inférieurs et qu’il ne nécessite pas de menu volant.
  • Tab, qui représente le contenu regroupé, accessible via les onglets inférieurs.
  • ShellContent, qui représente les objets ContentPage de chaque onglet.

Ces objets ne représentent pas une interface utilisateur, mais plutôt l’organisation de la hiérarchie visuelle de l’application. Shell utilise ces objets afin de produire l’interface utilisateur de navigation pour le contenu.

Pages

Les pages constituent la racine de la hiérarchie d’interface utilisateur dans .NET MAUI à l’intérieur d’un Shell. Jusqu’à présent, la solution que vous avez vue comprend une classe appelée MainPage. Cette classe est dérivée de ContentPage, qui est le type de page le plus simple et le plus courant. Une page de contenu affiche simplement son contenu. .NET MAUI a également plusieurs autres types de pages intégrés, notamment :

  • TabbedPage : il s’agit de la page racine utilisée pour la navigation par onglets. Une page à onglets contient des objets page enfants, un pour chaque onglet.

  • FlyoutPage: Vous permet d’implémenter une présentation de style maître/détail. Une page de menu volant contient une liste d’éléments. Lorsque vous sélectionnez un élément, un affichage présentant les détails de cet élément s’affiche.

D’autres types de pages sont disponibles, qui servent principalement à activer différents modèles de navigation dans des applications multi-écrans.

Les vues

Une page de contenu présente généralement un affichage. Un affichage vous permet de récupérer et de présenter des données d’une manière spécifique. L’affichage par défaut d’une page de contenu est un ContentView qui présente les éléments tels quels. Si vous réduisez la vue, les éléments peuvent disparaître de l’affichage jusqu’à ce que vous redimensionniez la vue. Un ScrollView vous permet d’afficher des éléments dans une fenêtre de défilement. Si vous réduisez la fenêtre, vous pouvez la faire défiler vers le haut et le bas pour afficher les éléments. Un CarouselView est un affichage déroulant qui permet à l’utilisateur de parcourir une collection d’éléments. Un CollectionView peut extraire des données d’une source de données nommée et présenter chaque élément en utilisant un modèle en tant que format. Il existe de nombreux autres types de vues disponibles.

Contrôles et dispositions

Un affichage peut contenir un seul contrôle, tel qu’un bouton, une étiquette ou des zones de texte (au sens strict, un affichage est lui-même un contrôle, de sorte qu’il peut contenir un autre affichage.) Toutefois, une interface utilisateur limitée à un seul contrôle ne serait pas aussi utile, de sorte que les contrôles sont positionnés dans une disposition. Une disposition définit les règles régissant l’affichage des contrôles les uns par rapport aux autres. Une disposition étant également un contrôle, vous pouvez l’ajouter à un affichage. Si vous examinez le fichier MainPage.xaml par défaut, vous voyez cette hiérarchie de page/view/layout/control en action. Dans ce code XAML, l’élément VerticalStackLayout est simplement un autre contrôle qui vous permet d’affiner la disposition d’autres contrôles.

<ContentPage ...>
    <ScrollView ...>
        <VerticalStackLayout>
            <Image ... />
            <Label ... />
            <Label ... />
            <Button ... />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Voici quelques-uns des contrôles courants utilisés pour définir des dispositions :

  • VerticalStackLayout et HorizontalStackLayout sont des dispositions de pile optimisées, qui placent les contrôles dans une pile de haut en bas ou de gauche à droite. Un StackLayout est également disponible, et a une propriété nommée StackOrientation à laquelle vous pouvez affecter Horizontal ou Vertical. Sur une tablette ou un téléphone, la modification de cette propriété dans le code de votre application vous permet d’ajuster l’affichage si l’utilisateur fait pivoter l’appareil :

    Diagramme montrant comment les orientations horizontales et verticales de la disposition de la pile sont définies par les contrôles.

  • AbsoluteLayout qui vous permet de définir des coordonnées exactes pour les contrôles.

  • FlexLayout qui est similaire à StackLayout, sauf qu’il vous permet d’encapsuler les contrôles enfants qu’il contient s’ils ne tiennent pas dans une seule ligne ou colonne. Cette disposition fournit également des options pour l’alignement et l’adaptation à différentes tailles d’écran. Par exemple, un contrôle FlexLayout peut aligner son contrôle enfant à gauche, à droite ou au centre lorsqu’il est organisé verticalement. En cas d’alignement horizontal, vous pouvez justifier les contrôles pour garantir un espacement régulier. Vous pourriez utiliser une disposition FlexLayout horizontale à l’intérieur d’un ScrollView pour afficher une série de cadres à défilement horizontal (chaque cadre pouvant lui-même être une disposition FlexLayout verticale) :

    Capture d’écran d’une application en cours d’exécution avec le rendu FlexLayout à l’écran. Tout d’abord, une image est rendue, puis un titre, puis une étiquette de texte, puis un bouton. Tous ces éléments sont rendus verticalement dans une zone.

  • Grid, qui définit ses contrôles en fonction d’une colonne et d’un emplacement de ligne que vous définissez. Vous pouvez définir les tailles de colonne et de ligne et leurs étendues, de sorte que les dispositions de grille n’ont pas nécessairement un « look jeu d’échecs » pour eux.

L’image suivante récapitule les attributs clés de ces types de dispositions courants :

Diagramme des dispositions les plus fréquemment utilisées dans une IU .NET MAUI.

Tous les contrôles ont des propriétés. Vous pouvez définir des valeurs initiales pour ces propriétés à l’aide de XAML (Extensible Application Markup Language). Dans de nombreux cas, vous pouvez modifier ces propriétés dans le code C# de votre application. Par exemple, le code qui gère l’événement Clicked pour le bouton Cliquer ici dans l’application .NET MAUI par défaut ressemble à ceci :

int count = 0;
private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Ce code modifie la propriété Text du contrôle CounterBtn dans la page. Vous pouvez même créer des pages, affichages et dispositions entiers dans votre code sans avoir à utiliser le langage XAML. Prenons l’exemple de la définition XAML suivante d’une page :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Phoneword.MainPage">

    <ScrollView>
        <VerticalStackLayout>
            <Label Text="Current count: 0"
                Grid.Row="0"
                FontSize="18"
                FontAttributes="Bold"
                x:Name="CounterLabel"
                HorizontalOptions="Center" />

            <Button Text="Click me"
                Grid.Row="1"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Le code équivalent en C# ressemble à ceci :

public partial class TestPage : ContentPage
{
    int count = 0;
    
    // Named Label - declared as a member of the class
    Label counterLabel;

    public TestPage()
    {       
        var myScrollView = new ScrollView();

        var myStackLayout = new VerticalStackLayout();
        myScrollView.Content = myStackLayout;

        counterLabel = new Label
        {
            Text = "Current count: 0",
            FontSize = 18,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(counterLabel);
        
        var myButton = new Button
        {
            Text = "Click me",
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(myButton);

        myButton.Clicked += OnCounterClicked;

        this.Content = myScrollView;
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;
        counterLabel.Text = $"Current count: {count}";

        SemanticScreenReader.Announce(counterLabel.Text);
    }
}

Le code C# est plus détaillé, mais offre plus de flexibilité qui vous permet d’adapter l’interface utilisateur de manière dynamique.

Pour afficher cette page lorsque l’application commence à s’exécuter, définissez la classe TestPage dans le AppShell en tant que ShellContent principal :

<ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:TestPage}"
        Route="TestPage" />

Réglage d’une disposition

Il est utile d’ajouter un peu d’espace de respiration autour d’un contrôle. Chaque contrôle a une propriété Margin que les dispositions respectent. Vous pouvez considérer la marge comme un contrôle qui éloigne les autres.

Toutes les dispositions ont également une propriété Padding qui empêche leurs enfants de s’approcher de leur bordure. Pour vous représenter ce concept, imaginez que tous les contrôles se trouvent dans une boîte avec des parois capitonnées.

Un autre paramètre d’espace blanc utile est la propriété Spacing de la disposition VerticalStackLayout ou HorizontalStackLayout. Cela définit l’espace entre tous les enfants de la disposition. La valeur est additive avec la marge propre du contrôle, de sorte que l’espacement réel est la marge plus l’espacement.

Contrôle des connaissances

1.

Parmi ces types, lequel n’est pas un type de disposition dans .NET MAUI ?

2.

Quelle classe permet de créer un écran dans .NET MAUI ?