MAUI prend en charge SkiaSharp, une bibliothèque de dessin 2D rapide et multiplateforme. Cela permet de concevoir des composants graphiques interactifs, tels que des courbes, des oscillogrammes ou des indicateurs en temps réel. Dans cet article, nous allons créer un visualiseur temps réel de données simulées (par exemple, un signal sinusoïdal) en utilisant SKCanvasView de SkiaSharp.
🛠️ Prérequis
- Ajouter le package NuGet :
dotnet add package SkiaSharp.Views.Maui.Controls
- Ajouter l’appel à UseSkiaSharp() dans MauiProgram.cs :
builder.UseSkiaSharp();
📐 Étape 1 – Ajouter une vue de dessin
Dans MainPage.xaml :
<skia:SKCanvasView x:Name="Canvas"
PaintSurface="OnCanvasViewPaintSurface"
HeightRequest="300"
WidthRequest="400" />
📉 Étape 2 – Gérer le rendu dynamique
Dans MainPage.xaml.cs :
using SkiaSharp;
using SkiaSharp.Views.Maui;
List<float> data = new();
Random rng = new();
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
var canvas = e.Surface.Canvas;
canvas.Clear(SKColors.White);
var paint = new SKPaint
{
Color = SKColors.SteelBlue,
StrokeWidth = 2,
IsAntialias = true
};
for (int i = 1; i < data.Count; i++)
{
float x1 = (i - 1) * 10;
float y1 = 150 - data[i - 1];
float x2 = i * 10;
float y2 = 150 - data[i];
canvas.DrawLine(x1, y1, x2, y2, paint);
}
}
🔁 Étape 3 – Mettre à jour les données en temps réel
Toujours dans MainPage.xaml.cs :
DispatcherTimer timer = new();t
imer. Interval = TimeSpan.FromMilliseconds(100);
timer. Tick += (s, e) =>
{
if (data.Count > 40) data.RemoveAt(0);
data.Add((float)(Math.Sin(DateTime.Now.Millisecond / 100.0) * 40 + rng.Next(-5, 5)));
Canvas.InvalidateSurface();
};
timer.Start();
🔧 Personnalisation
- Ajouter un curseur ou indicateur mobile
- Colorer certaines zones (plage de tolérance)
- Ajouter un axe des abscisses / ordonnées
✅ Conclusion
Avec SkiaSharp, MAUI devient une plateforme viable pour les visualisations dynamiques, scientifiques ou audio-réactives. Le couplage avec un DispatcherTimer permet un rendu fluide, même à 10 ou 20 FPS.
Stay Tuned !