MAUI自定义视图绑定ViewModel失效：传递参数后绑定异常

你的绑定失效核心原因是BindingContext混乱，同时存在无效的属性赋值操作：

• 视图中VerticalStackLayout将自身BindingContext设为ContentView实例，导致ChartObject绑定无法找到ViewModel中的对应属性；
• 代码后台尝试给ContentView设置未定义的Chart属性，属于无效操作；
• 视图绑定的From/To是ContentView的属性，若未设置默认值或父页面未赋值，会显示DateTime.MinValue（视觉上为空）。

修改步骤 #

1. 调整视图Binding逻辑

移除VerticalStackLayout的BindingContext="{x:Reference this}"，让控件继承ContentView的BindingContext（即ViewModel），直接绑定ViewModel的属性：

<ContentView
    x:Name="this"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:mc="clr-namespace:Microcharts.Maui;assembly=Microcharts.Maui"
    x:Class="LazyFit.Views.Mood.MoodChartView">

<VerticalStackLayout>
    
    <Label  
        Text="Setable chart"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />

    <!-- 绑定ViewModel的FromDate/ToDate属性，添加格式优化显示 -->
    <Label 
        Text="{Binding FromDate, StringFormat='yyyy-MM-dd'}"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />

    <Label 
        Text="{Binding ToDate, StringFormat='yyyy-MM-dd'}"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />

    <Border Style="{StaticResource ClassicBorder}">
        <HorizontalStackLayout>
            <!-- 直接绑定ViewModel的ChartObject -->
            <mc:ChartView Chart="{Binding ChartObject}" HeightRequest="150"/>
        </HorizontalStackLayout>
    </Border>

</VerticalStackLayout>
</ContentView>

2. 修正代码后台逻辑

• 给BindableProperty设置合理默认值，避免初始显示空值；
• 移除无效的view.Chart = viewModel.ChartObject代码，依赖ViewModel的属性变更自动更新绑定；
• 初始化时同步视图属性与ViewModel属性：

using LazyFit.ViewModels.MoodViewModels;
using Microcharts;

namespace LazyFit.Views.Mood;

public partial class MoodChartView : ContentView
{
    public static readonly BindableProperty FromProperty = BindableProperty.Create(
        nameof(From), 
        typeof(DateTime), 
        typeof(MoodChartView), 
        defaultValue: DateTime.Now.AddDays(-7), // 设置默认起始日期
        propertyChanged: OnFromToPropertyChanged);
    
    public static readonly BindableProperty ToProperty = BindableProperty.Create(
        nameof(To), 
        typeof(DateTime), 
        typeof(MoodChartView), 
        defaultValue: DateTime.Now, // 设置默认结束日期
        propertyChanged: OnFromToPropertyChanged);

    public DateTime From
    {
        get => (DateTime)GetValue(FromProperty);
        set => SetValue(FromProperty, value);
    }

    public DateTime To
    {
        get => (DateTime)GetValue(ToProperty);
        set => SetValue(ToProperty, value);
    }

    private static void OnFromToPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var view = (MoodChartView)bindable;
        var viewModel = view.BindingContext as MoodChartViewModel;

        if (viewModel != null)
        {
            // 同步视图属性到ViewModel
            viewModel.FromDate = view.From;
            viewModel.ToDate = view.To;
            // ViewModel的OnFromDateChanged/OnToDateChanged会自动触发LoadChart更新ChartObject
        }
    }

    public MoodChartView()
    {
        InitializeComponent();
        var viewModel = new MoodChartViewModel();
        // 初始化时同步默认值到ViewModel
        viewModel.FromDate = From;
        viewModel.ToDate = To;
        BindingContext = viewModel;
    }
}

3. ViewModel保持不变

你的ViewModel逻辑已经正确，ObservableProperty会自动触发属性变更通知，LoadChart方法会在日期变化时更新ChartObject，绑定会自动同步到视图。

验证要点 #

• 父页面使用自定义视图时，可直接绑定From/To属性：

  <views:MoodChartView From="{Binding SelectedStartDate}" To="{Binding SelectedEndDate}" />
  

• 检查LoadChart方法是否正确初始化ChartObject，确保不为null。

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