如何在 xamarin 表单中更改视觉材料 DatePickerDialog 和 TimePickerDialog 背景颜色

Question

我们正在为我们的项目使用视觉材料 DatePicker 和 TimePicker。

<DatePicker  x:Name="dateIn" Visual="Material" WidthRequest="1" Format="dd/MM/yyyy" Opacity="0" />

如何在 xamarin 表单（Android 和 IOS）中更改视觉材质 DatePickerDialog 和 TimePickerDialog 背景颜色？

Answer 1

安卓

您必须在 styles.xml 文件中添加几行：

<item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
<item name="android:timePickerStyle">@style/AppCompatDialogStyle</item>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
    <item name="android:background">#CCA3F4(YOUR COLOR HERE)</item>
</style>

整个文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_screen</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowActionBar">true</item>
    </style>

<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.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 https://aka.ms/material-colors -->
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">#2196F3</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#1976D2</item>
    <!-- colorAccent is used as the default value for colorControlActivated
     which is used to tint widgets -->
    <item name="colorAccent">#FF4081</item>
    <!-- You can also set colorControlNormal, colorControlActivated
     colorControlHighlight and colorSwitchThumbNormal. -->
    <item name="windowActionModeOverlay">true</item>
    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
    <item name="android:timePickerStyle">@style/AppCompatDialogStyle</item>
    <item name="android:textAllCaps">false</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
    <item name="android:background">#CCA3F4</item>
</style>
</resources>

iOS：

我创建了一个自定义渲染器，在其中添加了一个具有所需背景颜色的 UIDatePicker：

using System;
using carstuff.iOS.Renderers;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

[assembly: ExportRenderer(typeof(Xamarin.Forms.DatePicker), typeof(DateTimeRenderer))]
namespace carstuff.iOS.Renderers
{
    public class DateTimeRenderer : DatePickerRenderer
    {
        private UIDatePicker _picker;
        bool _disposed;

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.DatePicker> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            _picker = new UIDatePicker { Mode = UIDatePickerMode.Date, TimeZone = new NSTimeZone("UTC") };
            
            if (UIDevice.CurrentDevice.CheckSystemVersion(14, 0))
            {
                _picker.PreferredDatePickerStyle = UIKit.UIDatePickerStyle.Wheels;
            }

            _picker.BackgroundColor = Color.AliceBlue.ToUIColor(); // YOUR COLOR HERE
            _picker.ValueChanged -= HandleValueChanged;
            _picker.ValueChanged += HandleValueChanged;
            Control.InputView = _picker;
        }
    }

    void HandleValueChanged(object sender, EventArgs e)
    {
        if (Element != null && Element.OnThisPlatform().UpdateMode() == UpdateMode.Immediately)
        {
            UpdateElementDate();
        }
    }

    void UpdateElementDate()
    {
        Element?.SetValueFromRenderer(Xamarin.Forms.DatePicker.DateProperty, _picker.Date.ToDateTime().Date);
    }

    protected override void Dispose(bool disposing)
    {
        if (_disposed)
            return;

        _disposed = true;

        if (disposing)
        {

            if (_picker != null)
            {
                _picker.RemoveFromSuperview();
                _picker.ValueChanged -= HandleValueChanged;
                _picker.Dispose();
                _picker = null;
            }
        }

        base.Dispose(disposing);
    }
}
}