如何修改.NET MAUI中DatePicker控件的默认颜色

你当前在Styles.xaml中配置的样式仅覆盖了DatePicker输入框显示的日期文本颜色，没有覆盖占位符、焦点状态、选择弹窗面板等其他视觉元素的颜色，完整修改方案如下：

一、调整全局共享样式（控制输入框基础显示效果） #

你可以直接修改现有Style，补充缺失的颜色属性和视觉状态，参考配置如下：

<Style TargetType="DatePicker">
    <!-- 普通状态文本颜色 -->
    <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
    <!-- 占位符（未选择日期时）颜色 -->
    <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray500}, Dark={StaticResource Gray200}}" />
    <Setter Property="FontFamily" Value="OpenSansRegular"/>
    <Setter Property="FontSize" Value="14"/>
    <!-- 焦点状态下的边框/高亮色 -->
    <Setter Property="Color" Value="{StaticResource Primary}" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
                    </VisualState.Setters>
                </VisualState>
                <!-- 补充焦点状态颜色 -->
                <VisualState x:Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
                        <Setter Property="Color" Value="{StaticResource Primary}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}" />
                        <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

上述配置中的Primary、Gray500等资源可以替换为你项目中实际需要的颜色值，明暗主题绑定规则和你现有配置保持一致即可。

二、通过Handler修改平台原生选择器颜色 #

共享样式无法修改点击DatePicker弹出的日期选择面板内部颜色，这部分是各平台原生控件渲染的，需要在MauiProgram.cs中配置Handler映射原生属性：

// 在CreateMauiApp方法的builder配置中添加以下代码
builder.ConfigureMauiHandlers(handlers =>
{
    handlers.AddHandler<DatePicker, DatePickerHandler>(handler =>
    {
#if ANDROID
        // 安卓端修改文本色、选择器高亮色
        handler.PlatformView.SetTextColor(Colors.YourTextColor.ToPlatform());
        handler.PlatformView.SetBackgroundTintList(
            Android.Content.Res.ColorStateList.ValueOf(Colors.YourAccentColor.ToPlatform())
        );
#endif
#if IOS || MACCATALYST
        // iOS/Mac端修改文本色、选择器tint色
        handler.PlatformView.TextColor = Colors.YourTextColor.ToPlatform();
        handler.PlatformView.TintColor = Colors.YourAccentColor.ToPlatform();
#endif
#if WINDOWS
        // Windows端修改文本色、边框色
        handler.PlatformView.Foreground = new Microsoft.UI.Xaml.Media.SolidColorBrush(
            Colors.YourTextColor.ToWindowsColor()
        );
        handler.PlatformView.BorderBrush = new Microsoft.UI.Xaml.Media.SolidColorBrush(
            Colors.YourAccentColor.ToWindowsColor()
        );
#endif
    });
});

三、补充说明 #

• 如果不需要全局修改所有DatePicker的颜色，直接给单个DatePicker实例设置上述颜色属性即可，局部属性优先级高于全局样式
• 选择弹窗内的确定、取消按钮颜色跟随应用在各平台配置的主主题色，不需要单独给DatePicker配置
• 如果需要自定义弹窗布局，建议使用社区工具包的Popup控件实现完全自定义的日期选择面板，不受原生控件样式限制

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