MAUI使用CommunityToolkit时，日期差值无法实时更新至UI的问题

问题分析 #

当前代码仅在点击提交按钮时才计算日期差，没有监听Date1和Date2的实时变化，导致UI无法自动同步天数差。借助.NET Community Toolkit的属性变更通知机制，可实现日期变更时自动触发计算。

修改ViewModel代码 #

通过partial方法监听Date1和Date2的属性变更，每次日期变化时自动计算天数差：

public partial class AddLeaveViewModel : ObservableObject
{
    [ObservableProperty]
    DateTime date1 = DateTime.Today;

    [ObservableProperty]
    DateTime date2 = DateTime.Today;

    [ObservableProperty]
    int nodays;

    // 监听Date1变更的回调方法
    partial void OnDate1Changed(DateTime value)
    {
        CalculateDaysDifference();
    }

    // 监听Date2变更的回调方法
    partial void OnDate2Changed(DateTime value)
    {
        CalculateDaysDifference();
    }

    // 计算日期差的通用方法
    private void CalculateDaysDifference()
    {
        try
        {
            TimeSpan difference = Date2 - Date1;
            // 处理结束日期早于开始日期的情况，取绝对值避免负数
            Nodays = Math.Abs(difference.Days);
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
        }
    }

    [RelayCommand]
    public async void SubmitClicked()
    {
        // 保留原有提交逻辑，日期差已实时计算完成
    }
}

完善XAML布局 #

添加绑定Nodays的Label，让UI实时显示计算后的天数：

<!-- 原有日期选择器 -->
<DatePicker x:Name="fromdate" Date="{Binding Date1}" FontAttributes="Bold" FontSize="Medium" Grid.Column="0" Grid.Row="1" />
<DatePicker x:Name="todate" Date="{Binding Date2}" FontAttributes="Bold" FontSize="Medium" Grid.Row="1" Grid.Column="1"/>

<!-- 新增显示天数差的Label -->
<Label Text="天数差：{Binding Nodays}" FontSize="Medium" Grid.ColumnSpan="2" Grid.Row="2" HorizontalTextAlignment="Center"/>

关键说明 #

• .NET Community Toolkit会为[ObservableProperty]修饰的字段自动生成属性和On[PropertyName]Changed的partial方法，实现这些方法即可响应属性变更。
• 使用Math.Abs处理结束日期早于开始日期的场景，避免出现负数天数。

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