如何在 xamarin 表单中更改视觉材料 DatePickerDialog 和 TimePickerDialog 背景颜色
Posted
技术标签:
【中文标题】如何在 xamarin 表单中更改视觉材料 DatePickerDialog 和 TimePickerDialog 背景颜色【英文标题】:How to change visual material DatePickerDialog and TimePickerDialog background color in xamarin forms 【发布时间】:2021-08-28 03:39:39 【问题描述】:我们正在为我们的项目使用视觉材料 DatePicker 和 TimePicker。
<DatePicker x:Name="dateIn" Visual="Material" WidthRequest="1" Format="dd/MM/yyyy" Opacity="0" />
如何在 xamarin 表单(android 和 ios)中更改视觉材质 DatePickerDialog 和 TimePickerDialog 背景颜色?
【问题讨论】:
【参考方案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);
【讨论】:
以上是关于如何在 xamarin 表单中更改视觉材料 DatePickerDialog 和 TimePickerDialog 背景颜色的主要内容,如果未能解决你的问题,请参考以下文章
如何更改 Xamarin 表单中的 DatePicker Ok 和 Cancel 按钮文本?
如何在 Shell TabbedPage 应用程序、Xamarin 表单中更改图标和文本大小