如何在.NET MAUI的CustomDatePicker控件中添加清除按钮？

已实现支持空值的CustomDatePicker控件，现需添加清除按钮以实现点击清空选中日期的功能，以下是具体实现方案：

1. 重构自定义控件为组合式ContentView #

将原继承自DatePicker的控件改为ContentView，内部组合DatePicker和清除按钮，实现更灵活的布局控制。

CustomDatePicker.xaml #

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestApp.Controls.CustomDatePicker">
    <Grid ColumnDefinitions="*,Auto">
        <!-- 原生DatePicker核心控件 -->
        <DatePicker x:Name="InnerDatePicker"
                    Opacity="{Binding IsDateSelected, Converter={StaticResource BoolToOpacityConverter}}"
                    Format="{Binding DisplayFormat}"
                    DateSelected="InnerDatePicker_DateSelected"/>
        
        <!-- 清除按钮，仅选中日期时显示 -->
        <Button x:Name="ClearButton"
                Grid.Column="1"
                Text="×"
                FontSize="18"
                WidthRequest="30"
                HeightRequest="30"
                CornerRadius="15"
                BackgroundColor="LightGray"
                IsVisible="{Binding IsDateSelected}"
                Clicked="ClearButton_Clicked"/>
    </Grid>
</ContentView>

CustomDatePicker.xaml.cs #

using System;
using System.Globalization;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Converters;

namespace TestApp.Controls
{
    public partial class CustomDatePicker : ContentView
    {
        private readonly BoolToOpacityConverter _opacityConverter = new() { TrueValue = 1, FalseValue = 0.3 };

        // 自定义日期双向绑定属性
        public static readonly BindableProperty CustomDateProperty =
            BindableProperty.Create(nameof(CustomDate), typeof(DateTime?),
                typeof(CustomDatePicker), null,
                BindingMode.TwoWay, propertyChanged: OnCustomDateChanged);

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

        // 可自定义的日期显示格式属性
        public static readonly BindableProperty DisplayFormatProperty =
            BindableProperty.Create(nameof(DisplayFormat), typeof(string),
                typeof(CustomDatePicker), CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern);

        public string DisplayFormat
        {
            get => (string)GetValue(DisplayFormatProperty);
            set => SetValue(DisplayFormatProperty, value);
        }

        // 内部状态：是否已选中日期
        public bool IsDateSelected => CustomDate.HasValue;

        public CustomDatePicker()
        {
            InitializeComponent();
            BindingContext = this;
            Resources.Add("BoolToOpacityConverter", _opacityConverter);
        }

        // CustomDate属性变更时同步内部控件状态
        private static void OnCustomDateChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var control = (CustomDatePicker)bindable;
            var dateValue = (DateTime?)newValue;

            if (dateValue.HasValue)
            {
                control.InnerDatePicker.Date = dateValue.Value;
                control.InnerDatePicker.Format = control.DisplayFormat;
            }
            else
            {
                // 无日期时显示提示文本（转义特殊字符避免格式解析异常）
                control.InnerDatePicker.Format = "Selec't' 'Date'";
            }

            control.OnPropertyChanged(nameof(IsDateSelected));
        }

        // 内部DatePicker选中日期时同步CustomDate
        private void InnerDatePicker_DateSelected(object sender, DateChangedEventArgs e)
        {
            CustomDate = e.NewDate;
        }

        // 清除按钮点击事件：清空选中日期
        private void ClearButton_Clicked(object sender, EventArgs e)
        {
            CustomDate = null;
        }
    }
}

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

MainPage.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:control="clr-namespace:TestApp.Controls"
             x:Class="TestApp.MainPage">
    <VerticalStackLayout Padding="20" Spacing="15">
        <control:CustomDatePicker x:Name="datePicker" />
        <!-- 也可绑定到ViewModel属性：<control:CustomDatePicker CustomDate="{Binding SelectedDate}" /> -->
    </VerticalStackLayout>
</ContentPage>

MainPage.xaml.cs #

namespace TestApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        // 初始化为空值，显示提示状态
        datePicker.CustomDate = null;
    }
}

效果说明 #

• 未选中日期：显示提示文本，控件透明度0.3，清除按钮隐藏
• 选中日期：显示格式化后的日期，控件透明度1，右侧显示清除按钮
• 点击清除按钮：日期清空，自动回到初始提示状态

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