.Net 8 MAUI Drawable sur iOS

1 pièce(s) jointe(s)

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 :
Pièce jointe 665272

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:

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:

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.

Peut-être un bug dans MAUI pour iOS, j'ai trouvé une issue avec un problème de non-trçage de texte (issue sans réponse malheureusement) https://github.com/dotnet/Microsoft....ics/issues/315

Je suis aussi tombé sur ça https://learn.microsoft.com/en-us/an...w-causes-ios-a
qui fait référence à un projet (qui n'est plus dispo en version 6.0 mais en version 8.0 ou 9.0 cf https://github.com/dotnet/maui-sampl...phicsViewDemos ) si ça peut peut-être t'aiguiller sur quelque chose

Merci de vouloir m'aider mais j'ai déjà consulté ce projet exemple dont le lien est d'ailleurs sur la page que j'ai moi même fourni.

Depuis j'ai effectué quelques changements. J'ai notamment tout enlevé pour ne garder que le graphicsview. Et je constate qu'il s'affiche à l'envers, en effet miroir sur kes deux axes x et y.

J'ai trouvé d'où venait le problème.
Sous iOS il faut obligatoirement mettre une valeur pour HeightRequest et WidthRequest sur le GraphicsView.
Sur Android, cela ne pose pas de problème mais la valeur dans le RectF passée à Draw est forcée à zéro.
Sauf que si je met 0 sur l'une ou l'autre avec iOS, plus rien ne s'affiche.
Et sur Android, cela avait pour effet d'inverser les axes x et y, ce qui fait qu'au final le code que j'avais écrit était à l'envers.

J'ai donc pris l'option de fixer la valeur de HeightRequest et WidthRequest et de refaire le dessin avec ces nouvelles données.
Cela à permis au passage de régler les problèmes de décalage qui m'avaient forcé à mettre des marges bizarres.