如何将Xamarin DatePicker弹窗标题栏及背景改为白色、字体改为灰色

Xamarin.Forms的DatePicker没有直接提供修改弹窗标题栏背景和文本颜色的属性，需要通过自定义渲染器针对Android和iOS平台分别实现：

Android平台实现 #

Android的DatePicker弹窗基于DatePickerDialog，通过自定义渲染器修改其标题栏控件：

1. 创建自定义DatePicker控件（用于传递自定义颜色参数）

public class CustomDatePicker : DatePicker
{
    public static readonly BindableProperty TitleBackgroundColorProperty =
        BindableProperty.Create(nameof(TitleBackgroundColor), typeof(Color), typeof(CustomDatePicker), Color.Default);

    public Color TitleBackgroundColor
    {
        get => (Color)GetValue(TitleBackgroundColorProperty);
        set => SetValue(TitleBackgroundColorProperty, value);
    }

    public static readonly BindableProperty TitleTextColorProperty =
        BindableProperty.Create(nameof(TitleTextColor), typeof(Color), typeof(CustomDatePicker), Color.Default);

    public Color TitleTextColor
    {
        get => (Color)GetValue(TitleTextColorProperty);
        set => SetValue(TitleTextColorProperty, value);
    }
}

2. 在Android项目中添加自定义渲染器

[assembly: ExportRenderer(typeof(CustomDatePicker), typeof(CustomDatePickerRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class CustomDatePickerRenderer : DatePickerRenderer
    {
        public CustomDatePickerRenderer(Context context) : base(context)
        {
        }

        protected override DatePickerDialog CreateDatePickerDialog(int year, int month, int day)
        {
            var dialog = base.CreateDatePickerDialog(year, month, day);
            var customPicker = (CustomDatePicker)Element;

            // 修改标题栏背景色
            if (customPicker.TitleBackgroundColor != Color.Default)
            {
                var titleContainer = dialog.Window?.DecorView.FindViewById<ViewGroup>(Resource.Id.title_container);
                titleContainer?.SetBackgroundColor(customPicker.TitleBackgroundColor.ToAndroid());
            }

            // 修改标题文本颜色
            if (customPicker.TitleTextColor != Color.Default)
            {
                var titleTextView = dialog.Window?.DecorView.FindViewById<TextView>(Resource.Id.alertTitle);
                titleTextView?.SetTextColor(customPicker.TitleTextColor.ToAndroid());
            }

            return dialog;
        }
    }
}

3. 在XAML中使用自定义控件

<local:CustomDatePicker TitleBackgroundColor="#2196F3" TitleTextColor="White" />

iOS平台实现 #

iOS默认的DatePicker弹窗没有独立标题栏，通常通过自定义InputAccessoryView（工具栏）模拟标题栏效果：

1. 复用上面的CustomDatePicker控件，在iOS项目中添加渲染器

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

            if (Control != null && e.NewElement != null)
            {
                Control.InputView = CreateDatePicker();
                Control.InputAccessoryView = CreateCustomToolbar();
            }
        }

        private UIDatePicker CreateDatePicker()
        {
            var picker = new UIDatePicker
            {
                Mode = UIDatePickerMode.Date,
                TimeZone = NSTimeZone.FromName("UTC")
            };
            picker.ValueChanged += (s, e) => Element.Date = ((UIDatePicker)s).Date.ToDateTime();
            return picker;
        }

        private UIToolbar CreateCustomToolbar()
        {
            var customPicker = (CustomDatePicker)Element;
            var toolbar = new UIToolbar(new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, 44))
            {
                Translucent = true
            };

            // 设置工具栏背景色（对应标题栏背景）
            if (customPicker.TitleBackgroundColor != Color.Default)
            {
                toolbar.BarTintColor = customPicker.TitleBackgroundColor.ToUIColor();
            }

            var doneBtn = new UIBarButtonItem(UIBarButtonSystemItem.Done, (s, e) => Control.ResignFirstResponder());
            // 设置按钮文本颜色（对应标题文本颜色）
            if (customPicker.TitleTextColor != Color.Default)
            {
                doneBtn.TintColor = customPicker.TitleTextColor.ToUIColor();
            }

            toolbar.SetItems(new[] { new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace), doneBtn }, false);
            return toolbar;
        }
    }
}

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