How to pass a variable to a GraphicsView in MAUI

Question

I would like to pass a variable into a GraphicView to update a drawing by, for example, pushing a button.

I have gone through several examples on Stack Overflow about this issue. (I tried to publish the links but then I was told that my question appeared to be spam.) However, I do not get it it to work. Could someone please tell me what I am doing wrong?

XAML

<?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"
             x:Class="SleepDiary.NewPage1"
             xmlns:drawable="clr-namespace:SleepDiary"
             Title="NewPage1">

    <VerticalStackLayout>

        <GraphicsView HeightRequest="400"
                      WidthRequest="400">
            <GraphicsView.Drawable>
                <drawable:GraphicsDrawable2 Test="{Binding testVariable}"/>
            </GraphicsView.Drawable>
        </GraphicsView>
        
    </VerticalStackLayout>
</ContentPage>

CS-file

using System.Numerics;
using Microsoft.Maui.Graphics;
using Microsoft.Maui.Controls;
namespace SleepDiary;


public class GraphicsDrawable2 : BindableObject, IDrawable
{

    public static BindableProperty TestProperty = BindableProperty.Create(nameof(Test), typeof(int), typeof(GraphicsDrawable2));
    public int Test
    {
        get => (int)GetValue(TestProperty);
        set => SetValue(TestProperty, value);
    }


    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        canvas.StrokeColor = Colors.Black;
        canvas.StrokeSize = 1;

        canvas.DrawLine(0, 0, Test, Test);
        canvas.DrawLine(100, 0, 100, 100);
    }
}

public partial class NewPage1 : ContentPage
{

    private int _testVariable;
    public int testVariable
    {
        get => _testVariable;
        set
        {
            if (_testVariable == value) return;
            _testVariable = value;
            OnPropertyChanged();
        }
    }


    public NewPage1()
    {
        InitializeComponent();
        BindingContext = this;
        
        testVariable = 100;
    }
}

Answer 1

Try referencing the binding to the page name; it should work. The issue is that your element doesn’t know where to find the 'test' property. By referencing the page name, it will search within the 'NewPage1' class and locate it.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:drawable="clr-namespace:MauiApp1"             
         x:Class="MauiApp1.NewPage1"      
         x:Name="PageName"
         Title="NewPage1">
<VerticalStackLayout>
    <GraphicsView HeightRequest="400"
                  WidthRequest="400">
        <GraphicsView.Drawable>
            <drawable:GraphicsDrawable2 Test="{Binding testVariable,Source={x:Reference PageName}}"/>
        </GraphicsView.Drawable>
    </GraphicsView>

</VerticalStackLayout>

Notice that I added the the page name and used it to reference in the property binding.