Binding from view to GraphicsView property in .NET MAUI

Question

I am trying to add a slider, and a canvas to my MainPage. Slider Value will control the height of the drawn shape. However, I am having an extremely hard time trying to bind the properties.

I am not sure how to bind to a resource class.

My View

    <ContentPage.BindingContext>
    <viewmodel:MainViewModel />
</ContentPage.BindingContext>

<ContentPage.Resources>
    <charts:CustomChart x:Key="drawable"></charts:CustomChart>
</ContentPage.Resources>

<ScrollView>
    <VerticalStackLayout>
        <HorizontalStackLayout
        Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Slider 
                x:Name="Sldr"
                Minimum="0.3"
                Maximum="1.0"
                Value="{Binding Hayt}"
                WidthRequest="200"
                />

        </HorizontalStackLayout>

        <GraphicsView>
            <GraphicsView.Drawable>
                <charts:CustomChart Grid_Height="{Binding Hayt}" />
            </GraphicsView.Drawable>
        </GraphicsView>

    </VerticalStackLayout>
</ScrollView>

My ViewModel

    internal class MainViewModel : BaseViewModel
{

    double hayt;
    public double Hayt
    {
        get { return hayt; }
        set
        {
            if (hayt != value)
                hayt = value;
                OnPropertyChanged();
        }
    }
}

My Grapview Class

internal class CustomChart : GraphicsView, IDrawable
{
    // Screen Parameters
    readonly float ScreenWidth = (float)DeviceDisplay.MainDisplayInfo.Width;
    readonly float ScreenHeight = (float)DeviceDisplay.MainDisplayInfo.Height;
    readonly float Density = (float)DeviceDisplay.MainDisplayInfo.Density;

    public double Grid_Height
    {
        get => (double)GetValue(Grid_Height_Adjuster);
        set => SetValue(Grid_Height_Adjuster, value);
    }

    public static readonly BindableProperty Grid_Height_Adjuster = BindableProperty.Create(nameof(Grid_Height),typeof(double),typeof(CustomChart),0.7);

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {

        float Y_Top   = dirtyRect.Top;
        float Y_Bot   = dirtyRect.Bottom / Density * (float)Grid_Height;
        float X_Right = dirtyRect.Right / Density;
        float X_Left  = dirtyRect.Left;


    }
}

When I try, How to pass variable data into .net MAUI GraphicsView canvas, .Net is saying => No property, BindableProperty, or event found for "Grid_Height", or mismatching type between value and property.

Answer 1

Previous code：

    public double Grid_Height
    {
        get => (double)GetValue(Grid_Height_Adjuster);
        set => SetValue(Grid_Height_Adjuster, value);
    }

    public static readonly BindableProperty Grid_Height_Adjuster = BindableProperty.Create
          (nameof(Grid_Height),typeof(double),typeof(CustomChart),0.7);

Change to this:

    public double Grid_Height
    {
        get => (double)GetValue(Grid_HeightProperty);
        set => SetValue(Grid_HeightProperty, value);
    }

    public static readonly BindableProperty Grid_HeightProperty = BindableProperty.Create
          (nameof(Grid_Height),typeof(double),typeof(CustomChart),0.7);

When you create a bindable property, you need to keep the naming format of "PropertyName+Property". For more details, you can check this doc.