Dot.Blog

MAUI offre un éventail de fonctionnalités spécialement conçues pour le développement d'applications de bureau sur Windows et macOS. Que votre application soit exclusivement destinée aux plateformes de bureau ou qu'elle soit multiplateforme, l'objectif demeure le même : fournir une expérience utilisateur inégalée. Cela implique de maximiser les capacités du matériel et du système d'exploitation sur lesquels votre application fonctionne. Dans cet article, je vous propose de faire la connaissance de quelques fonctionnalités clés de MAUI qui améliorent considérablement l'expérience utilisateur sur les applications de bureau.

Multi-fenêtrage

L'introduction de la classe Window en tant que fondement de l'application constitue une avancée majeure dans MAUI. Lors de l'exécution de votre application MAUI, une fenêtre par défaut est automatiquement créée et gérée par la classe Application.

var weatherDetails = new Window(new WeatherDetailsPage());
Application.Current.OpenWindow(weatherDetails);
Fermeture des fenêtres
// Fermer une fenêtre spécifique
Application.Current.CloseWindow(weatherDetails);
// Fermer la fenêtre active
Application.Current.CloseWindow(GetParentWindow());

Barre de menus de niveau supérieur

La barre de menus est une fonctionnalité courante dans les applications de bureau. Tout utilisateur de PC ou de Mac connait cette barre avec les options "Fichier, Edition,… A propos". MAUI simplifie son intégration en ne nécessitant que quelques lignes de code.

<ContentPage.MenuBarItems>
    <MenuBarItem Text="File">
        <MenuFlyoutItem Text="Exit" Command="{Binding ExitCommand}" />
    </MenuBarItem>
    <MenuBarItem Text="Locations">
        <MenuFlyoutSubItem Text="Change Location">
            <MenuFlyoutItem Text="Redmond, USA" Command="{Binding ChangeLocationCommand}" CommandParameter="Redmond" />
            <MenuFlyoutItem Text="London, UK" Command="{Binding ChangeLocationCommand}" CommandParameter="London" />
            <MenuFlyoutItem Text="Berlin, DE" Command="{Binding ChangeLocationCommand}" CommandParameter="Berlin"/>
        </MenuFlyoutSubItem>
        <MenuFlyoutSeparator />
        <MenuFlyoutItem Text="Add Location" Command="{Binding AddLocationCommand}" />
        <MenuFlyoutItem Text="Edit Location" Command="{Binding EditLocationCommand}" />
        <MenuFlyoutItem Text="Remove Location" Command="{Binding RemoveLocationCommand}" />
    </MenuBarItem>
    <MenuBarItem Text="View">
        <!-- Ajoutez ici d'autres éléments de menu -->
    </MenuBarItem>
</ContentPage.MenuBarItems>

Menus contextuels

Les menus contextuels offrent des options supplémentaires lorsqu'un utilisateur effectue un clic droit sur un élément spécifique. 

<Editor>
    <FlyoutBase.ContextFlyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Bold" Clicked="OnBoldClicked"/>
            <MenuFlyoutItem Text="Italics" Clicked="OnItalicsClicked"/>
            <MenuFlyoutItem Text="Underline" Clicked="OnUnderlineClicked"/>
        </MenuFlyout>
    </FlyoutBase.ContextFlyout>
</Editor>

Infobulles

Les infobulles sont un moyen rapide et efficace d'améliorer l'expérience utilisateur de votre application.

var button = new Button { Text = "Save" };
ToolTipProperties.SetText(button, "Click to save your comment");

Mouvements du pointeur

MAUI introduit de nouveaux détecteurs de gestes spécifiquement pour le pointeur de la souris.

<Image Source="dotnet_bot.png">
    <Image.GestureRecognizers>
        <PointerGestureRecognizer PointerEntered="OnPointerEntered"
                                  PointerExited="OnPointerExited"
                                  PointerMoved="OnPointerMoved" />
    </Image.GestureRecognizers>
</Image>

Ici, nous recevons des événements lorsque le pointeur interagit avec notre image. Une fois l'événement obtenu, nous pouvons également obtenir la position du pointeur à l'intérieur de l'image ou par rapport à elle.

void OnPointerExited(object sender, PointerEventArgs e)
{
    // Position inside window
    Point? windowPosition = e.GetPosition(null);
    // Position relative to an Image
    Point? relativeToImagePosition = e.GetPosition(image);
    // Position relative to the container view
    Point? relativeToContainerPosition = e.GetPosition((View)sender);
}

Conclusion

Ces fonctionnalités ne sont que la partie émergée de l'iceberg en ce qui concerne les capacités de MAUI pour le développement d'applications de bureau. Je vous encourage vivement à explorer la documentation complète de MAUI pour découvrir d'autres fonctionnalités et contrôles qui pourraient être utiles pour vos projets de développement.

Si les Xamarin.Forms restaient avant tout un environnement de développement cross-plateforme intéressant ceux qui, les plus nombreux, voulaient créer des Apps pour Android et iOS avec un seul code à maintenir, il faut prendre conscience que MAUI modifie ce paradigme en profondeur et que s'il ne renie en rien la vocation des Xamarin.Forms il lui ajoute le ciblage des PC et des Mac et tout ce qui va avec pour écrire de véritables applications de bureau. Il est donc tout à fait légitime d'utiliser MAUI pour créer de telles applications même si elles ne sont pas cross-plateformes. Cela permet d'exploiter des outils et langages modernes là où WPF est bien vieillissant sans parler des technologies préhistoriques comme les Windows Forms. Et puis on gagne au passage la possibilité d'écrire pour PC et Mac, une autre vision du cross-plateforme qui dépasse le choix Android/iOS.

Stay Tuned !