在.NET MAUI中实现点击Placeholder触发DatePicker弹窗（Windows）

核心思路 #

Windows平台的原生CalendarDatePicker（对应MAUI的DatePicker）不会通过Focus()自动弹出日历，必须直接设置原生控件的IsDropDownOpen属性为true来触发弹窗。我们可以通过平台特定代码实现这一逻辑。

方案1：直接在控件代码隐藏中处理 #

1. 自定义控件XAML #

假设你的自定义控件结构如下（Label作为占位符，DatePicker可隐藏或按需显示）：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.CustomDatePicker">
    <Grid>
        <Label x:Name="PlaceholderLabel" Text="Pick a date" HorizontalOptions="Center" VerticalOptions="Center">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="PlaceholderLabel_Tapped"/>
            </Label.GestureRecognizers>
        </Label>
        <DatePicker x:Name="InnerDatePicker" IsVisible="False" />
    </Grid>
</ContentView>

2. 代码隐藏实现触发逻辑 #

在自定义控件的代码文件中，针对Windows平台调用原生控件属性：

using Microsoft.Maui.Platform;

namespace YourNamespace;

public partial class CustomDatePicker : ContentView
{
    public CustomDatePicker()
    {
        InitializeComponent();
    }

    private async void PlaceholderLabel_Tapped(object sender, EventArgs e)
    {
#if WINDOWS
        // 确保Handler已初始化，用Dispatcher延迟执行
        await InnerDatePicker.Dispatcher.DispatchAsync(() =>
        {
            var windowsCalendarPicker = InnerDatePicker.Handler.PlatformView as Microsoft.UI.Xaml.Controls.CalendarDatePicker;
            windowsCalendarPicker?.IsDropDownOpen = true;
        });
#else
        // 其他平台用Focus触发
        InnerDatePicker.Focus();
#endif
    }
}

方案2：复用性更强的Behavior实现 #

如果需要在多个控件中复用该逻辑，可以创建一个Behavior：

1. 创建Behavior类 #

using Microsoft.Maui.Controls;
using Microsoft.Maui.Platform;

namespace YourNamespace.Behaviors;

public class OpenDatePickerOnTapBehavior : Behavior<Label>
{
    public static readonly BindableProperty TargetDatePickerProperty =
        BindableProperty.Create(nameof(TargetDatePicker), typeof(DatePicker), typeof(OpenDatePickerOnTapBehavior));

    public DatePicker TargetDatePicker
    {
        get => (DatePicker)GetValue(TargetDatePickerProperty);
        set => SetValue(TargetDatePickerProperty, value);
    }

    protected override void OnAttachedTo(Label bindable)
    {
        base.OnAttachedTo(bindable);
        var tapGesture = new TapGestureRecognizer();
        tapGesture.Tapped += OnLabelTapped;
        bindable.GestureRecognizers.Add(tapGesture);
    }

    protected override void OnDetachingFrom(Label bindable)
    {
        base.OnDetachingFrom(bindable);
        var tapGesture = bindable.GestureRecognizers.FirstOrDefault(g => g is TapGestureRecognizer) as TapGestureRecognizer;
        if (tapGesture != null)
        {
            tapGesture.Tapped -= OnLabelTapped;
            bindable.GestureRecognizers.Remove(tapGesture);
        }
    }

    private async void OnLabelTapped(object sender, EventArgs e)
    {
        if (TargetDatePicker == null) return;

#if WINDOWS
        await TargetDatePicker.Dispatcher.DispatchAsync(() =>
        {
            var windowsPicker = TargetDatePicker.Handler.PlatformView as Microsoft.UI.Xaml.Controls.CalendarDatePicker;
            windowsPicker?.IsDropDownOpen = true;
        });
#else
        TargetDatePicker.Focus();
#endif
    }
}

2. 在XAML中使用Behavior #

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:behaviors="clr-namespace:YourNamespace.Behaviors"
             x:Class="YourNamespace.CustomDatePicker">
    <Grid>
        <Label Text="Pick a date" HorizontalOptions="Center" VerticalOptions="Center">
            <Label.Behaviors>
                <behaviors:OpenDatePickerOnTapBehavior TargetDatePicker="{x:Reference InnerDatePicker}"/>
            </Label.Behaviors>
        </Label>
        <DatePicker x:Name="InnerDatePicker" IsVisible="False" />
    </Grid>
</ContentView>

关键说明 #

• 为什么之前的方法无效？Windows平台的DatePicker调用Focus()不会自动弹出日历弹窗，必须直接操作原生控件的IsDropDownOpen属性。
• 使用Dispatcher.DispatchAsync是为了确保Handler（原生控件实例）已经完成初始化，避免空引用。

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