Il semble que l’article précédent a ouvert l’appétit graphique de certains, alors allons un peu plus loin dans l’exploration de ces possibilités offertes de MAUI !
Un peu de graphisme dans nos Apps !
.NET MAUI, le nouveau framework d'interface utilisateur multiplateforme de Microsoft pour créer des applications dans un seul projet est là depuis quelques temps maintenant. .NET MAUI est l'évolution naturelle (et un peu forcée aussi) de Xamarin Forms. Il propose donc toutes les vues d'interface utilisateur Xamarin Forms et, en plus, quelques nouvelles vues supplémentaires. Voyons comment utiliser certaines de ces nouvelles vues.
Jusqu'à sa fin, Xamarin Forms n'avait que la Frame pour fournir ces fonctionnalités (et elle n'était pas assez flexible). La boîte à outils de la communauté Xamarin nous a apporté CornerRadiusEffect et ShadowEffect. Ceux-ci nous ont permis d'ajouter des ombres et des coins arrondis à nos vues. Avant cela, il y avait des plugins tiers qui ont été créés par la communauté pour fournir les fonctionnalités que ces nouvelles vues .NET MAUI fournissent désormais out-of-the-box.
Parmi ces vues on trouve la PancakeView et la BorderView … La GraphicsView est un tout nouveau contrôle que nous pouvons considérer comme un canvas où nous pouvons créer et dessiner ce que nous voulons. C’est une avancée immense ! XAML a toujours été un langage orienté UI en mode vectoriel et forcément avec des primitives graphiques puissantes. Le XAML des Xamarin.Forms n’était qu’un enrobage « à la XAML » de contrôles existants. La partie graphique avait été totalement zappée. Rendant impossible toutes les vues magnifiques que permet toujours de créer WPF notamment (le seul vrai XAML complet). Même si on est loin d’un « retour à la normale », à la puissance graphique totale de XAML, voir ce langage enfin « restauré », retrouvant presque son intégrité est un pas en avant essentiel en raison de la potentialité que porte ce rétablissement progressif mais bien réel des graphismes dans XAML MAUI.
Les ombres
J’en ai parlé dans le dernier article, je ne peux que vous conseiller de vous y référer, reprendre tout ici n’aurait aucun sens. A tout de suite (pour ceux qui voudraient lire ce papier avant de poursuivre ici !).
Bordures et Coins
La vue Border de MAUI a tout ce dont nous avons besoin. Il a plusieurs propriétés qui vont au-delà de donner des coins arrondis ou de simples bordures. J'aime vraiment cette vue et j'aime le fait que l'équipe MAUI l'ait rendue vraiment flexible.
On peut donner la forme qu’on veut à notre Border. Cela se fait avec sa propriété StrokeShape . Dans l'exemple ci-dessous, nous lui donnons la forme d'un rectangle arrondi.
<Border.StrokeShape>
<RoundRectangle CornerRadius="80,0,80,0" />
</Border.StrokeShape>
On peut également choisir de donner une couleur simple au trait de la bordure, ou lui donner un dégradé. Comme indiqué ci-dessous.
<Border.Stroke>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="Gold"
Offset="0.1" />
<GradientStop Color="LimeGreen"
Offset="1.0" />
</LinearGradientBrush>
</Border.Stroke>
Nous pouvons également ajuster l'épaisseur de la bordure avec la propriété "StrokeThickness".
Mais les propriétés les plus intéressantes sont celles qui suivent :
- StrokeDashArray, de type DoubleCollection, qui représente une collection de valeurs double qui indiquent le modèle de tirets et d'espaces qui composent la bordure.
- StrokeDashOffset, de type double, spécifie la distance dans le motif de tirets où commence un tiret. La valeur par défaut de cette propriété est 0.0.
- StrokeLineCap, de type PenLineCap, décrit la forme au début et à la fin de sa ligne. La valeur par défaut de cette propriété est PenLineCap.Flat.
- StrokeLineJoin, de type PenLineJoin, spécifie le type de jointure utilisé aux sommets de la forme du trait. La valeur par défaut de cette propriété est PenLineJoin.Miter.
- StrokeMiterLimit, de type double, spécifie la limite du rapport entre la longueur de l'onglet et la moitié de l'épaisseur du trait. La valeur par défaut de cette propriété est 10.0.
La GraphicView
Les ombres, les bordures, tout cela est très pratique et grâce à l’intégration naturelle de ces possibilités graphiques dans MAUI le travail du développeur et du designer devient plus simple. C’est génial mais il est vrai que cela aurait du être le cas depuis le départ. Mais il faut noter le souci de Microsoft d’améliorer sans cesse un produit qui n’était pas le sien au départ. Tout est fait pour amener les Xamarin.Forms au niveau d’un produit Microsoft au travers de MAUI.
C’est là qu’on voit qu’il existe des standards de qualité « pro » chez Microsoft très au-dessus de la moyenne (et l’équipe de la société Xamarin était loin d’être mauvaise !).
Bref une autre nouvelle vue .NET MAUI est arrivée, c’est la GraphicsView. C'est une vue très intéressante. En effet, elle agit comme un canvas sur lequel on peut dessiner ce qu’on veut. On peut même y « dessiner » des strings, des images ou exporter ce qui y est dessiné au format PDF. C'est vraiment très souple. !
La vue graphique définit une propriété Drawable de type "IDrawable". Cet objet contient le code pour dessiner sur un canevas. La vue définit aussi de nombreux événements (StartHoverInteraction, MoveHoverInteraction, EndHoverInteraction, StartInteraction, DragInteraction, EndInteraction, CancelInteraction).
Une vue GraphicsView doit implémenter IDrawable qui définit la méthode Draw :
namespace MyMauiApp
{
public class GraphicsDrawable : IDrawable
{
public void Draw(ICanvas canvas, RectF dirtyRect)
{
// Drawing code goes here
}
}
}
Sous XAML l’objet IDrawable doit être défini dans les ressources et utilisé par une GraphicsView en spécifiant sa clé :
<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui
xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
xmlns:drawable="clr-namespace:MyMauiApp"
x:Class="MyMauiApp.MainPage">
<ContentPage.Resources>
<drawable:GraphicsDrawable x:Key="drawable" />
</ContentPage.Resources>
<VerticalStackLayout>
<GraphicsView Drawable="{StaticResource drawable}"
HeightRequest="300"
WidthRequest="400" />
</VerticalStackLayout>
</ContentPage>
La méthode Draw de l’interface IDrawable contient un paramètre essentiel, le canvas de type ICanvas. Il contient de nombreuses primitives pour aider à dessiner toute sorte d’objets visuels :
canvas.DrawRectangle(50, 100, 100, 50);
canvas.DrawEllipse(100, 200, 100, 50);
En dehors d’objets simples déjà formés comme le code ci-dessus le montre (rectangle, ellipse), il est bien entendu possible de tout dessiner au trait :
canvas.StrokeColor = Colors.Orange;
var path = new PathF();
path.MoveTo(250, 100);
path.LineTo(200, 150);
path.LineTo(300, 150);
path.Close();
canvas.DrawPath(path);
Comme on le voit la création de chemins complexes est très simple.
Conclusion
Mon idée n’était pas de faire un cours de dessin sous MAUI mais juste de compléter l’article précédent qui avait laissé inassouvie certaines attentes. Les graphismes c’est important, cela ouvre la voie à des UI entièrement redessinées ou à la création de contrôles visuels totalement libres et n’existant sous aucun OS. La possibilité peut-être, un jour, d’un jeu de contrôle totalement indépendant des plateformes ? Cela serait merveilleux… avec un designer visuel. L’avènement d’un vrai XAML cross-plateforme aussi capable que tous les autres XAML. En tout cas nous sommes sur la bonne voie et MAUI ne déçoit pas les attentes.
Bon dessins et … Stay Tuned !