Bonjour,

Dans un projet mobile écrit en MAUI, j'ai besoin d'afficher une gauge à aiguille.
En farfouillant dans la doc de Microsoft j'ai vu qu'on pouvait dessiner dans un Canvas.

Je me suis donc mis dans la peau d'un peintre et j'ai dessiné mon compteur à aiguille.
Pour obtenir ce résultat :
Nom : 2025-03-07_124031.png Affichages : 82 Taille : 14,0 Ko

Sauf que lorsque je teste avec le simulateur iOS, le compteur n'apparait pas.
Je ne passe même pas dans la méthode Draw de mon Drawable.

Le code du Drawable est plutôt classique et utilise les méthodes standards de dessin sur le canvas.
https://learn.microsoft.com/en-us/do...w=net-maui-8.0

Code du Drawable :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
public class ScoreGaugeDrawable : BindableObject, IDrawable
{
    public static readonly BindableProperty ScoreProperty = BindableProperty.Create(nameof(Score), typeof(double), typeof(ScoreGaugeDrawable));
    public static readonly BindableProperty NeedleColorProperty = BindableProperty.Create(nameof(NeedleColor), typeof(Color), typeof(ScoreGaugeDrawable), Colors.Red);
 
    public double Score
    {
        get => (double)GetValue(ScoreProperty);
        set => SetValue(ScoreProperty, value);
    }
 
    public Color NeedleColor
    {
        get => (Color)GetValue(NeedleColorProperty);
        set => SetValue(NeedleColorProperty, value);
    }
 
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        float centerX = dirtyRect.Width / 2;
        float centerY = dirtyRect.Height / 2;
        float radius = Math.Min(centerX, centerY) - 10;
 
        // Dessiner le fond de la gauge
        canvas.StrokeColor = Colors.Gray;
        canvas.StrokeSize = 10;
        canvas.DrawArc(centerX - radius, centerY - radius, radius * 2, radius * 2, 180, 180, false, false);
 
        //// Dessiner les graduations
        for (int i = 0; i <= 10; i++)
        {
            double angle = 180 * (i / 10.0);
            double x1 = centerX + radius * Math.Cos(Math.PI * angle / 180);
            double y1 = centerY + radius * Math.Sin(Math.PI * angle / 180);
            double x2 = centerX + (radius - i * 0.5) * Math.Cos(Math.PI * angle / 180);
            double y2 = centerY + (radius - i * 0.5) * Math.Sin(Math.PI * angle / 180);
            canvas.DrawLine((float)x1, (float)y1, (float)x2, (float)y2);
        }
 
        // Dessiner le cercle au départ de l'aiguille
        float circleRadius = 4;
        canvas.FillColor = NeedleColor;
        canvas.FillCircle(centerX, centerY, circleRadius);
 
        // Dessiner l'aiguille
        double needleAngle = 180 * (Score / 100.0);
        double needleLength = radius - 10;
        double needleBaseWidth = circleRadius * 0.8; // Légèrement plus fin que le cercle du centre
 
        // Calculer les points du triangle représentant l'aiguille
        double needleTipX = centerX + needleLength * Math.Cos(Math.PI * needleAngle / 180);
        double needleTipY = centerY + needleLength * Math.Sin(Math.PI * needleAngle / 180);
 
        double baseLeftX = centerX + needleBaseWidth * Math.Cos(Math.PI * (needleAngle - 90) / 180);
        double baseLeftY = centerY + needleBaseWidth * Math.Sin(Math.PI * (needleAngle - 90) / 180);
 
        double baseRightX = centerX + needleBaseWidth * Math.Cos(Math.PI * (needleAngle + 90) / 180);
        double baseRightY = centerY + needleBaseWidth * Math.Sin(Math.PI * (needleAngle + 90) / 180);
 
        // Dessiner le triangle de l'aiguille
        canvas.FillColor = NeedleColor;
        PathF path = new();
        path.MoveTo((float)baseLeftX, (float)baseLeftY);
        path.LineTo((float)baseRightX, (float)baseRightY);
        path.LineTo((float)needleTipX, (float)needleTipY);
        path.Close();
        canvas.FillPath(path);
 
    }
}
Dans la vue je l'utilise de cette façon :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:res="clr-namespace:XXX.Resources.Strings"
             xmlns:drawables="clr-namespace:XXX.Drawables"
             x:Class="XXX.Views.KpiPage">
 
    <Shell.TitleView>
        <VerticalStackLayout>
            <Label Text="{x:Static res:AppRes.KpiTitle}" Style="{StaticResource Headline}" />
            <Label Text="{Binding Folder}" Style="{StaticResource SubHeadline}" />
        </VerticalStackLayout>
    </Shell.TitleView>
 
    <VerticalStackLayout>
        <Image Source="logo.png" />
 
        <Frame BorderColor="Blue" CornerRadius="10" Padding="10" Margin="10, 0, 10, 5" BackgroundColor="Blue">
            <Grid Margin="10" ColumnDefinitions="*, 40" RowDefinitions="Auto, Auto, Auto, Auto" BackgroundColor="Blue">
                <Label Text="Solde de trésorerie" FontSize="Medium" Margin="10,0,0,0" TextColor="White" />
                <Label Text="Cumul"  Grid.Row="1" FontSize="Small" Margin="10, -5, 0, 0" TextColor="White" />
                <Label Text="53 171 €" Grid.Row="2" FontSize="Medium" FontAttributes="Bold" Margin="10,-20,0,0" TextColor="White" />
                <Label Text="" Grid.Row="3" FontSize="1"  Margin="10,0,0,0"/>
 
 
                <Label Text="L" Grid.Column="1" VerticalOptions="End" HorizontalOptions="End" Margin="0,0,10,0" TextColor="White"/>
 
                <GraphicsView Grid.Column="1" Grid.Row="1" VerticalOptions="EndAndExpand" Margin="0,40,0,0">
                    <GraphicsView.Drawable>
                        <drawables:ScoreGaugeDrawable Score="80" NeedleColor ="White" />
                    </GraphicsView.Drawable>
                </GraphicsView>
            </Grid>
        </Frame>
 
        <Frame BorderColor="Blue" CornerRadius="10" Padding="10" Margin="10, 0, 10, 0">
            <Grid Margin="10, 0, 10, 0" ColumnDefinitions="*, 40" RowDefinitions="Auto, Auto, Auto" BackgroundColor="white">
                <Label Text="Charges de personnel" FontSize="Medium" Margin="10,0,0,0" />
                <Label Text="Mensuel"  Grid.Row="1" FontSize="Small" Margin="10, -5, 0, 0"/>
                <Label Text="33 711 €" Grid.Row="2" FontSize="Medium" FontAttributes="Bold" Margin="10,-20,0,0"/>
                <Label Text="" Grid.Row="3" FontSize="1"  Margin="10,0,0,0"/>
 
                <Label Text="L" Grid.Column="1" VerticalOptions="End" HorizontalOptions="End" Margin="0,0,10,0"/>
 
                <GraphicsView Grid.Column="1" Grid.Row="1" VerticalOptions="EndAndExpand" Margin="0,40,0,0" >
                    <GraphicsView.Drawable>
                        <drawables:ScoreGaugeDrawable Score="50" NeedleColor ="Blue"/>
                    </GraphicsView.Drawable>
                </GraphicsView>
            </Grid>
        </Frame>
 
    </VerticalStackLayout>
</ContentPage>
Est-ce qu'il y a quelque chose de particulier à faire pour que ça s'affiche correctement sur iOS ?
Merci.