在 .NET MAUI 中从视图绑定到 GraphicsView 属性答案

【问题标题】：Binding from view to GraphicsView property in .NET MAUI在 .NET MAUI 中从视图绑定到 GraphicsView 属性
【发布时间】：2022-10-24 09:55:32
【问题描述】：

我正在尝试向我的 MainPage 添加一个滑块和一个画布。滑块值将控制绘制形状的高度。但是，我很难尝试绑定属性。

我不确定如何绑定到资源类。

我的观点

    <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>

我的视图模型

    internal class MainViewModel : BaseViewModel
{

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

我的观点类

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;


    }
}

当我尝试时， How to pass variable data into .net MAUI GraphicsView canvas, .Net 说 => 没有为“Grid_Height”找到属性、BindableProperty 或事件，或者值和属性之间的类型不匹配。

【问题讨论】：

来自文档：可绑定属性的命名约定是可绑定属性标识符必须与 Create 方法中指定的属性名称匹配，并附加“Property”。

标签： c# xaml data-binding maui .net-maui

【解决方案1】：

上一个代码：

    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 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);

创建可绑定属性时，需要保持命名格式 “属性名+Property”。有关更多详细信息，您可以查看此doc。

【讨论】：