Premiers pas avec l’interface utilisateur d’Avalonia

Il y a longtemps, alors que Microsoft luttait pour donner une suite à Windows XP, sa vision Longhorn reposait sur ce qu’il appelait « les trois piliers de Longhorn » : un système de fichiers objet alimenté par une base de données appelé WinFS, un nouvel ensemble d’outils de communication basé sur des services Web nommés Indigo, et une nouvelle couche de présentation basée sur un langage de description graphique nommé Avalon. Seuls Indigo et Avalon ont survécu pour faire partie de Windows Vista, en tant que Windows Communication Framework et Windows Presentation Framework (WPF) de .NET.

WPF est toujours aussi performant, près de 20 ans plus tard, alimentant de nombreuses applications .NET Framework, mais la transition vers la multiplateforme .NET 6 a laissé WPF derrière. Cela fait toujours partie du développement open source .NET, mais il se limite à ne prendre en charge que les applications Windows. Vous ne pouvez pas l’utiliser pour créer du code qui s’exécute sous Linux ou macOS. Cela rend difficile le transfert de code basé sur WPF du .NET Framework vers .NET 6 et au-delà, même avec le travail utilisé pour rassembler WPF, la plate-forme Windows universelle (UWP) et la bibliothèque d’interface utilisateur Windows (WinUI 3) dans le SDK d’application Windows.

Avalonia : une refonte de WPF pour des applications modernes

C’est là qu’Avalonia entre en jeu, offrant un moyen de mettre ce que vous savez sur la création d’applications WPF basées sur XAML dans un monde moderne et multiplateforme. Au lieu de cibler uniquement Windows, le code basé sur Avalonia peut s’exécuter sur macOS, Linux et Windows, avec une prise en charge native de x86 et x64, ainsi que d’ARM. Bien qu’une grande partie de la version actuelle d’Avalonia soit destinée à prendre en charge les applications de bureau, la prise en charge des applications mobiles est en cours de développement et une préversion publique est disponible, ajoutant iOS, Android et WebAssembly au mélange. Vous pouvez suivre le développement et devenir un contributeur dans son référentiel GitHub.

Conçu pour les applications C#, Avalonia n’est pas un portage direct de WPF, bien qu’il partage des concepts clés. Vous ne pouvez pas déposer un contrôle WPF existant dans une application alimentée par Avalonia ; à la place, vous devez le porter avant de pouvoir l’utiliser. En effet, certains concepts clés d’Avalonia sont plus étroitement liés au développement Web que WPF. Par exemple, Avalonia s’appuie toujours sur le langage de balisage d’affichage XAML, tandis que le style est davantage géré comme CSS, avec Styles utilisant une syntaxe de type CSS et obtenant sa propre collection. D’autres différences clés incluent la façon dont Avalonia fonctionne avec les données, l’extension des DataTemplates aux interfaces et aux classes dérivées, ainsi que l’obtention de sa propre collection.

Installation et utilisation d’Avalonia

Démarrer avec Avalonia ressemble beaucoup à travailler avec n’importe quel autre ensemble de modules complémentaires .NET. Si vous utilisez JetBrains Rider pour le développement C#, Avalonia est intégré. Sinon, vous installez simplement une extension Visual Studio qui inclut un concepteur XAML avec aperçu en direct. En pratique, étant donné qu’un concepteur pour Rider est toujours en cours de développement, vous aurez probablement besoin des deux outils pour créer et concevoir des interfaces utilisateur Avalonia pour vos applications. Le familier ReSharper comprend des outils pour travailler avec Avalonia, accélérant le développement avec des outils d’analyse et des fonctionnalités de complétion de code.

Une fois installé, vous pouvez commencer à utiliser les outils. Si vous avez créé du code WPF ou UWP, vous devriez trouver son implémentation XAML très similaire, en utilisant XAML pour concevoir la disposition de l’application et le code derrière pour ajouter des interactions. Les liaisons de données gèrent les connexions entre le code et les contrôles.

Avalonia fournit des implémentations de contrôles communs, avec un cadre d’événements pour fournir des interactions à votre code. Les contrôles sont extensibles, avec des dispositions qui utilisent un positionnement relatif pour différentes tailles de fenêtre et d’affichage. Les contrôles fournissent des informations sur la position et les exigences d’espace à la mise en page (elle-même un ensemble de contrôles hiérarchiques) qui fournit ensuite les informations nécessaires pour rendre le contrôle.

La primitive graphique sous-jacente dans Avalonia est un pixel indépendant de l’appareil qui a une taille fixe, permettant à tous les contrôles et éléments graphiques d’être indépendants de la résolution. Comme il est défini comme 1/96 de pouce, il correspond automatiquement au DPI disponible d’un écran. Vous pouvez utiliser sa bibliothèque de formes de base pour créer vos propres contrôles ou simplement ajouter des conceptions et des animations évolutives à vos mises en page. Le modèle d’animation d’Avalonia est similaire à celui utilisé par CSS, vous pouvez donc rendre les contrôles plus dynamiques, en mettant en évidence les interactions ou les changements de fenêtre.

Le modèle de conception préféré de Microsoft pour les applications modernes basées sur l’interface graphique est le modèle MVVM (modèle-vue-modèle) qu’il utilise dans son propre outil d’interface utilisateur multiplateforme MAUI, et Avalonia a adopté la même approche. C’est judicieux lorsque vous devez séparer votre couche d’interface utilisateur de votre application, en utilisant des liaisons pour lier les couches de vue et de modèle de vue. Commencez par créer votre vue à l’aide des contrôles Avalonia, le modèle de vue utilisant des liaisons pour lier ses propriétés aux contrôles de la vue. Un petit saut conceptuel est nécessaire ici, mais l’approche devrait aboutir à un code plus facile à maintenir et à utiliser avec différentes interfaces utilisateur sur différentes classes d’appareils.

Utilisation des outils de développement de type navigateur d’Avalonia

Une fonctionnalité utile est la possibilité d’ajouter une fenêtre DevTools de type navigateur au code en cours de test. Il est intégré aux modèles par défaut et est activé lorsqu’un programme est compilé en mode débogage. Une fois en cours d’exécution, appuyez sur F12 pour ouvrir la fenêtre des outils (vous pouvez également choisir un geste ou une autre frappe qui est transmise à la méthode appropriée). Cela accédera aux arborescences logiques et visuelles de la vue actuelle, montrant les contrôles et la façon dont ils sont rendus. Vous pouvez utiliser cet outil pour modifier rapidement les propriétés d’un contrôle sans recompiler votre application, ainsi que pour comprendre quels styles sont appliqués à votre mise en page et pourquoi.

Donner aux applications .NET une expérience de développeur similaire à celle d’un navigateur est une méthode de travail utile, en particulier si vous avez divisé le développement C# et XAML. Les concepteurs XAML peuvent travailler avec une application en direct d’une manière impossible dans un volet standard de Visual Studio, ce qui permet une manière plus dynamique et interactive de concevoir du code beaucoup plus proche du modèle de codage social qui provient d’outils comme GitHub. Un concepteur peut rapidement compiler une branche et tester les modifications dans son XAML avant d’envoyer une demande d’extraction pour toute nouvelle conception. Il n’est pas nécessaire qu’un développeur C# soit impliqué, sauf si de nouveaux contrôles sont ajoutés à une application.

Les développeurs peuvent utiliser les DevTools pour tracer les événements, en s’assurant que les contrôles sont correctement câblés. Vous pouvez lier des événements à l’arborescence visuelle pour montrer comment ils affectent les mises en page. Il existe même une console avec un REPL C #, vous pouvez donc essayer des extraits de code avant de les ajouter à votre application.

Comme WPF avant lui, il y a beaucoup à aimer à Avalonia. Il s’agit d’une revisite moderne des principes de WPF, rattrapant 20 ans de réflexion sur le développement, le rendant prêt pour les applications modernes. Bien qu’il ne s’agisse pas d’un remplacement direct de WPF, c’est un moyen de faire passer vos conceptions d’application du .NET Framework à .NET 6 et à plus que Windows. La prise en charge d’un plus grand nombre de plates-formes dans les futures versions devrait donner à MAUI de Microsoft une concurrence digne de ce nom – et avec l’open source sous la plate-forme, une marée montante soulèvera tous les bateaux de .NET.

Copyright © 2022 IDG Communications, Inc.

Leave a Comment