更改 DatePicker [Xamarin.Forms] 的颜色

Question

有没有办法在显示日历视图时更改 DatePicker 控件的背景颜色？ 请检查随附的屏幕截图。

Answer 1

将以下内容添加到您的 style.xml 文件中：

<item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>

<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#2196F3</item>
</style>

完整的 XML：

<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
    <item name="windowNoTitle">true</item>
    <!--We will be using the toolbar so no need to show ActionBar-->
    <item name="windowActionBar">false</item>
    <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette-->
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">#2196F3</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#2196F3</item>
    <!-- colorAccent is used as the default value for colorControlActivated
     which is used to tint widgets -->
    <item name="colorAccent">#2196F3</item>
    <!-- You can also set colorControlNormal, colorControlActivated
     colorControlHighlight and colorSwitchThumbNormal. -->
    <item name="windowActionModeOverlay">true</item>
    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#2196F3</item>
</style>
<style name="MyDatePickerStyle" parent="@android:style/Widget.Material.Light.DatePicker">
    <item name="android:headerBackground">#2196F3</item>
</style>
<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
    <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
</style>

更新

对于时间选择器：

<style name="Theme.MyTheme" parent="@style/Theme.AppCompat.Light">
<item name="android:timePickerDialogTheme">@style/TimePickerDialogTheme</item>

然后设置timePickerDialogTheme并设置timePickerStyle：

<style name="TimePickerDialogTheme" parent="@style/Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#ff6d3024</item>
<item name="android:timePickerStyle">@style/TimePickerDialogStyle</item> 

现在您可以创建 style.xml 了：

<style name="TimePickerDialogStyle" parent="@android:style/Widget.Material.Light.TimePicker">
<item name="colorAccent">#ff6d3024</item>
<item name="android:timePickerMode">clock</item>
<item name="android:headerBackground">#ff6d3024</item>
<item name="android:headerTimeTextAppearance">@style/TextAppearance.TimePickerDialogStyle.TimeLabel</item> <!-- TimePicker Time *TextAppearance* -->
<item name="android:numbersTextColor">#ff000000</item>
<item name="android:numbersSelectorColor">#ff6d3024</item>
<item name="android:numbersBackgroundColor">#ffdddddd</item>

Answer 2

对我来说，它在 Android 上是这样工作的。 我必须创建一个渲染器并更改 style.xml

styles.xml

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <style name="Theme.Splash" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_drawable</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsTranslucent">false</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:colorActivatedHighlight">@android:color/transparent</item>
    </style>
    <style name="MainTheme" parent="MainTheme.Base">
    </style>
    
    <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#2196F3</item>
        <item name="colorPrimaryDark">#2980b9</item>
        <item name="colorAccent">#2196F3</item>
    </style>

    <style name="CustomDatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#2196F3</item>
        <item name="android:datePickerDialogTheme">@style/CustomDatePickerDialog</item>
    </style>

    <style name="CustomDatePickerDialog" parent="android:Widget.Material.DatePicker">
        <item name="android:headerBackground">#2196F3</item>
        <item name="colorAccent">#2196F3</item>
    </style>

    <style name="CustomTimePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#2196F3</item>
    </style>    
</resources>

新日期渲染器：

[assembly: ExportRenderer(typeof(DatePicker), typeof(CustomDatePickerRenderer))]

namespace MyNamespace.CustomRenderers
{
    public class CustomDatePickerRenderer : DatePickerRenderer
    {
        public CustomDatePickerRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.Click += (sender, evt) =>
                {
                    DatePickerDialog dialog = new DatePickerDialog(Context, Resource.Style.CustomDatePickerDialogTheme, (s, args) =>
                    {
                        this.Element.Date = args.Date;
                    }, Element.Date.Year, Element.Date.Month - 1, Element.Date.Day);

                    dialog.Show();
                };
            }
        }
    }

}

时间选择器的新渲染器：

[assembly: ExportRenderer(typeof(TimePicker), typeof(CustomTimePickerRenderer))]

namespace MyNamespace.CustomRenderers
{
    public class CustomTimePickerRenderer : TimePickerRenderer
    {
        public CustomTimePickerRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<TimePicker> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.Click += (sender, evt) =>
                {
                    TimePickerDialog dialog = new TimePickerDialog(Context, Resource.Style.CustomTimePickerDialogTheme, (s, args) =>
                    {
                        this.Element.Time = new TimeSpan(args.HourOfDay, args.Minute, 0);
                    }, Element.Time.Hours, Element.Time.Minutes, true);

                    dialog.Show();
                };
            }
        }
    }
}