.NET MAUI中GraphicsView绑定BindableProperty失效问题求助

问题核心原因 #

你的代码存在三个关键问题，导致绑定失效且视图无法更新：

1. 错误的继承结构：DibujarArcoGreenwich同时继承GraphicsView并实现IDrawable，违背了MAUI的设计逻辑——GraphicsView是承载绘制逻辑的视图控件，IDrawable是单独的绘制逻辑实现类，二者不应混合。这种结构会导致绑定上下文混乱、属性变更无法正确传递。

2. 缺少属性变更回调与重绘触发：自定义BindableProperty未设置propertyChanged回调，当AnguloFin值变化时，无法通知控件执行重绘，即使ViewModel的值更新了，Draw方法也不会重新执行。

3. BindableProperty未指定默认值：创建属性时未设置默认值，可能影响绑定初始化阶段的数值传递。

修正方案（拆分职责+绑定优化） #

1. 单独实现Drawable类（仅负责绘制逻辑） #

public class ArcoGreenwichDrawable : IDrawable
{
    public float AnguloFin { get; set; }

    // 根据你的业务逻辑定义必要参数
    private readonly int _xCentro = 55;
    private readonly int _radio = 45;

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        float finalGrados = 360 - AnguloFin;
        canvas.StrokeColor = Colors.Red;
        canvas.StrokeSize = 6;
        int xPos = _xCentro - _radio;
        int yPos = _xCentro - _radio;
        canvas.DrawArc(10, 10, 90, 90, 0, finalGrados, true, false);
    }
}

2. 自定义GraphicsView控件（承载Drawable+绑定属性） #

public class ArcoGreenwichView : GraphicsView
{
    public static readonly BindableProperty AnguloFinProperty =
        BindableProperty.Create(
            nameof(AnguloFin),
            typeof(float),
            typeof(ArcoGreenwichView),
            defaultValue: 0f,
            propertyChanged: OnAnguloFinChanged);

    public float AnguloFin
    {
        get => (float)GetValue(AnguloFinProperty);
        set => SetValue(AnguloFinProperty, value);
    }

    private static void OnAnguloFinChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is ArcoGreenwichView view && view.Drawable is ArcoGreenwichDrawable drawable)
        {
            drawable.AnguloFin = (float)newValue;
            view.Invalidate(); // 强制控件重绘，更新视图
        }
    }

    public ArcoGreenwichView()
    {
        Drawable = new ArcoGreenwichDrawable();
    }
}

3. 优化ViewModel代码（移除冗余接口声明） #

public partial class AriesViewModel : ObservableObject
{
    [ObservableProperty]
    float _anguloFin;

    public AriesViewModel()
    {
        AnguloFin = 0;
    }

    [RelayCommand]
    private void CalcularAries()
    {
        AnguloFin = HacerCalculos();
    }

    // 示例计算方法，替换为你的业务逻辑
    private float HacerCalculos()
    {
        return 90f;
    }
}

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

关键修复说明 #

• 拆分Drawable与GraphicsView职责，符合MAUI组件设计规范，避免绑定上下文冲突。
• 通过BindableProperty的propertyChanged回调，在属性值变更时更新Drawable的参数并调用Invalidate()触发重绘，确保视图同步更新。
• 移除ViewModel中冗余的INotifyPropertyChanged声明（ObservableObject已实现该接口）。

内容的提问来源于stack exchange，提问作者user1803086