Xamarin Forms DatePicker绑定Nullable DateTime(DateTime?)求助

我来帮你搞定UWP端Nullable日期和DatePicker绑定的问题！之前论坛里没找到UWP渲染器的实现，我直接给你完整的解决方案：

1. 自定义可绑定Nullable日期的DatePicker控件 #

先在共享项目里创建一个自定义控件，扩展原生DatePicker，添加Nullable<DateTime>的可绑定属性，用来替代原生非Nullable的Date属性：

using Xamarin.Forms;

namespace YourAppNamespace.Controls
{
    public class NullableDatePicker : DatePicker
    {
        public static readonly BindableProperty NullableDateProperty =
            BindableProperty.Create(nameof(NullableDate), typeof(DateTime?), typeof(NullableDatePicker), null,
                propertyChanged: OnNullableDateChanged);

        public DateTime? NullableDate
        {
            get => (DateTime?)GetValue(NullableDateProperty);
            set => SetValue(NullableDateProperty, value);
        }

        private static void OnNullableDateChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var picker = (NullableDatePicker)bindable;
            if (newValue is DateTime date)
            {
                picker.Date = date;
            }
            else
            {
                // 用一个极早的日期作为占位，后续渲染器会处理成空白显示
                picker.Date = new DateTime(1900, 1, 1);
            }
        }
    }
}

2. UWP平台渲染器实现 #

在UWP项目里创建对应的渲染器，处理Null值的显示逻辑和用户选择的同步：

using YourAppNamespace.Controls;
using YourAppNamespace.UWP.Renderers;
using Windows.UI.Xaml.Controls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

[assembly: ExportRenderer(typeof(NullableDatePicker), typeof(NullableDatePickerRenderer))]
namespace YourAppNamespace.UWP.Renderers
{
    public class NullableDatePickerRenderer : DatePickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
        {
            base.OnElementChanged(e);

            if (Control != null && Element is NullableDatePicker picker)
            {
                Control.DateChanged += OnNativeDateChanged;
                // 初始化时同步显示状态
                UpdateDisplay(picker.NullableDate);
            }
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == NullableDatePicker.NullableDateProperty.PropertyName)
            {
                var picker = (NullableDatePicker)sender;
                UpdateDisplay(picker.NullableDate);
            }
        }

        private void OnNativeDateChanged(object sender, Windows.UI.Xaml.Controls.DatePickerValueChangedEventArgs e)
        {
            var picker = (NullableDatePicker)Element;
            var selectedDate = e.NewDate.Date;
            
            // 如果用户选了占位日期，就把绑定属性设为Null，否则同步选中日期
            picker.NullableDate = selectedDate == new DateTime(1900, 1, 1) ? null : selectedDate;
        }

        private void UpdateDisplay(DateTime? nullableDate)
        {
            if (nullableDate.HasValue)
            {
                Control.Date = nullableDate.Value;
                Control.Text = nullableDate.Value.ToString("d");
            }
            else
            {
                Control.Date = new DateTime(1900, 1, 1);
                // 清空显示文本，让DatePicker呈现空白状态
                Control.Text = string.Empty;
            }
        }
    }
}

3. 在页面中使用自定义控件 #

在XAML里引用自定义控件，直接绑定你的Nullable日期属性：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:YourAppNamespace.Controls"
             x:Class="YourAppNamespace.Views.YourPage">
    <StackLayout Padding="20">
        <controls:NullableDatePicker NullableDate="{Binding UserBirthDate}"
                                     Format="yyyy-MM-dd"
                                     Placeholder="选择日期..." />
    </StackLayout>
</ContentPage>

对应的ViewModel属性示例（需实现INotifyPropertyChanged）：

private DateTime? _userBirthDate;
public DateTime? UserBirthDate
{
    get => _userBirthDate;
    set
    {
        _userBirthDate = value;
        OnPropertyChanged();
    }
}

注意事项 #

• 我们用1900-01-01作为占位日期，因为这个日期几乎不会被用户实际选择，你可以根据需求换成其他合适的日期；
• 渲染器会自动处理用户选择：选占位日期时绑定属性设为Null，选正常日期时同步值；
• 确保ViewModel实现了INotifyPropertyChanged接口，绑定才能双向同步。

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