MAUI中点击图标直接打开DatePicker日历的实现方法

要实现点击图标直接弹出DatePicker的日历选择器，MAUI原生DatePicker没有直接的公共方法触发弹出，需要结合平台特定代码来实现，以下是具体步骤和代码示例：

1. 布局调整 #

首先在XAML中添加图标和隐藏的DatePicker，给图标绑定点击事件：

<HorizontalStackLayout>
    <!-- 日历图标 -->
    <Image Source="calendar_icon.png" 
           WidthRequest="24" 
           HeightRequest="24"
           Margin="0,0,10,0">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnCalendarIconTapped"/>
        </Image.GestureRecognizers>
    </Image>

    <!-- 隐藏的DatePicker -->
    <DatePicker 
        x:Name="DA_DatePicker"
        IsVisible="False"
        Date="{Binding SelectedDate, Mode=TwoWay}"
        MinimumDate="2024-01-01"
        MaximumDate="2025-12-31"
        Format="MM/dd"
        DateSelected="OnDateSelected"/>
</HorizontalStackLayout>

2. 后台逻辑实现 #

在页面的后台代码中，编写图标点击事件，并针对不同平台编写触发日历弹出的逻辑：

private void OnCalendarIconTapped(object sender, EventArgs e)
{
    // 先尝试获取焦点（部分平台可直接触发弹出）
    DA_DatePicker.Focus();
    // 调用平台特定逻辑确保弹出日历选择器
    OpenDatePickerDialog(DA_DatePicker);
}

/// <summary>
/// 平台特定的日历弹出逻辑
/// </summary>
private void OpenDatePickerDialog(DatePicker datePicker)
{
#if ANDROID
    var handler = datePicker.Handler as Microsoft.Maui.Handlers.DatePickerHandler;
    handler?.PlatformView?.ShowDialog();

#elif IOS || MACCATALYST
    var handler = datePicker.Handler as Microsoft.Maui.Handlers.DatePickerHandler;
    if (handler?.PlatformView == null) return;

    // 创建iOS日期选择器控制器并弹出
    var datePickerController = new UIKit.UIDatePickerViewController();
    datePickerController.DatePicker = handler.PlatformView;
    
    // 绑定日期变化事件
    datePickerController.DidChangeDate += (s, e) => 
    {
        datePicker.Date = datePickerController.DatePicker.Date.ToDateTime();
    };
    
    // 关闭时取消响应
    datePickerController.Dismissed += (s, e) => 
    {
        handler.PlatformView.ResignFirstResponder();
    };

    // 获取当前顶层视图控制器并弹出
    var window = UIKit.UIApplication.SharedApplication.KeyWindow;
    var viewController = window.RootViewController;
    while (viewController.PresentedViewController != null)
    {
        viewController = viewController.PresentedViewController;
    }
    viewController.PresentModalViewController(datePickerController, true);

#elif WINDOWS
    var handler = datePicker.Handler as Microsoft.Maui.Handlers.DatePickerHandler;
    if (handler?.PlatformView == null) return;

    // 通过自动化模拟点击触发日历弹出
    handler.PlatformView.Focus(FocusState.Programmatic);
    var automationPeer = new Microsoft.UI.Xaml.Automation.Peers.CalendarDatePickerAutomationPeer(handler.PlatformView);
    var invokePattern = automationPeer.GetPattern(Microsoft.UI.Xaml.Automation.Peers.PatternInterface.Invoke) as Microsoft.UI.Xaml.Automation.Provider.IInvokeProvider;
    invokePattern?.Invoke();
#endif
}

关键说明 #

• 不同平台的原生控件行为不同，必须通过Handler获取原生控件实例进行操作。
• iOS平台需要手动创建并弹出UIDatePickerViewController，因为直接调用BecomeFirstResponder可能不会弹出选择器。
• Windows平台通过自动化接口模拟用户点击，确保日历弹出。

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