Problems doing a Binding with a GraphicView

I need to do a data binding, using BindableProperty in a GraphicView using MVVM but it does not work. I'm working NET MAUI also I'm using the Nuget CommunityToolkit.Mvvm.
My drawable class is :

public class DibujarArcoGreenwich : GraphicsView, IDrawable
 {
 		public float AnguloFin
        {
            get => (float)GetValue(AnguloFinProperty);
            set => SetValue(AnguloFinProperty, value);
        }
        public static readonly BindableProperty AnguloFinProperty =
            BindableProperty.Create(nameof(AnguloFin), typeof(float), typeof(DibujarArcoGreenwich));
            
            public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            //dibujo arco
            float finalgrados = 360 - AnguloFin;
            canvas.StrokeColor = Color.Red;
            canvas.StrokeSize = 6;
            int xposicion = XPosicionCentro - Radio;
            int yposicion = YPosicionCentro - Radio;
            canvas.DrawArc(10, 10,90,90, 0, finalgrados, true, false);
           }

}

My viewmodel is :

public partial class AriesViewModel : ObservableObject, INotifyPropertyChanged
   {
       [ObservableProperty]
       float _anguloFin;
        public AriesViewModel()
       {
           AnguloFin = 0;
       }
       [RelayCommand]
       private void CalcularAries()
       {
       	AnguloFin = HacerCalculos();
       }
    }

My page XAML is :

<?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:local="clr-namespace:NautorStar.MisControles"
            xmlns:viewModels="clr-namespace:NautorStar.ViewModels"
            xmlns:drawables="clr-namespace:NautorStar.ClasesDibujo"
            x:Class="NautorStar.AriesPage"
            Title="Aries">
   <ContentPage.BindingContext>
       <viewModels:AriesViewModel />
   </ContentPage.BindingContext>
    <StackLayout>
                 <GraphicsView 
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           HeightRequest="250"
                           WidthRequest="400">
                <GraphicsView.Drawable>
                    <drawables:DibujarArcoGreenwich           
                           AnguloFin="{Binding AnguloFin, Mode=TwoWay}"/>
                  </GraphicsView.Drawable>
            </GraphicsView>
             <Button Text="Calcular"
                   Command="{Binding CalcularAriesCommand}" />
       </StackLayout>
</ContentPage>

But always the value of AnguloFin is 0. If I change the binding for a fixed value is OK.
Any idea why the binding doesn't work for me?
Thanks

Maria

I found that the Drawables cannot be used with BindableProperty. But you can add the AnguloFin property to the GraphicsView by extending it via inheritance.

First, you need to create a ScoreGraphicsView class that inherits from GraphicsView and add the bindable AnguloFinProperty to it:

 public class ScoreGraphicsView : GraphicsView
    {
        public float AnguloFin
        {
            get => (float)GetValue(AnguloFinProperty);
            set => SetValue(AnguloFinProperty, value);
        }
        public static readonly BindableProperty AnguloFinProperty =
             BindableProperty.Create(nameof(AnguloFin), typeof(float), typeof(ScoreGraphicsView),  propertyChanged: AnguloFinChanged);

        private static void AnguloFinChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is not ScoreGraphicsView { Drawable: DibujarArcoGreenwich drawable } view)
            {
                return;
            }

            drawable.AnguloFin = (float)newValue;
            view.Invalidate();
        }
    }

Second, You need to remove the BindableProperty from the DibujarArcoGreenwich and set the AnguloFin property into a regular property with default getter and setter:

public class DibujarArcoGreenwich :  IDrawable
    {
        public float AnguloFin { get; set; }
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
         
            float finalgrados = 360 - AnguloFin;
            canvas.StrokeColor = Colors.Red;
            canvas.StrokeSize = 6;
            canvas.DrawArc(10, 10, 90, 90, 0, finalgrados, true, false);
        }

    }

Last, you need to change the code in the page XAML, put the AnguloFin to the drawables:ScoreGraphicsView:

 <StackLayout>
        <drawables:ScoreGraphicsView
                 x:Name="draw"
                 AnguloFin="{Binding AnguloFin }"
                 HorizontalOptions="Center"
                 VerticalOptions="Center"
                 HeightRequest="250"
                 WidthRequest="400">
            <GraphicsView.Drawable>
                <drawables:DibujarArcoGreenwich        
                           />
            </GraphicsView.Drawable>
        </drawables:ScoreGraphicsView>
        <Button Text="Calcular"
                Clicked="Button_Clicked"
                Command="{Binding CalcularAriesCommand}" />
    </StackLayout>