如何更改时间选择器的样式和颜色

Question

我在 Xamarin.Forms 应用程序中为 Time 和 DatePickers 的样式和着色而苦苦挣扎。目前它是亮粉色（呃），我正在拼命寻找在整个项目 xaml 中改变它的可能性 - 文件“App.xaml” 我只发现了如何为按钮的背景着色，而不是对话框本身。

-> 我也在这里看到了这个问题：change the colour of DatePicker [Xamarin.Forms]，但我不想在 Android 项目本身中更改它。我正在寻找一种自定义这些对话框的全局方法。

我的 App.xaml 代码：

<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Arbeitszeitrechner_Forms.App">
    <!--
        Define global resources and styles here, that apply to all pages in your app.
    -->
    <Application.Resources>
        <ResourceDictionary>
            <Color x:Key="Primary">#77C9D4</Color> <!-- Feather -->
            <Color x:Key="Feather">#77C9D4</Color>
            <Color x:Key="Marine">#57BC90</Color>
            <Color x:Key="Forest">#015249</Color>
            <Color x:Key="SleekGrey">#A5A5AF</Color>
            <Style TargetType="Button">
                <Setter Property="TextColor" Value="{StaticResource Marine}"></Setter>
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{StaticResource Forest}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{StaticResource Forest}" />
                                    <Setter Property="Opacity" Value="0.1"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>
            <Style TargetType="TimePicker">
                <Setter Property="BackgroundColor" Value="{StaticResource Marine}"/>
                <Setter Property="Background" Value="{StaticResource Forest}"/>
            </Style>
            <Style TargetType="DatePicker">
                <Setter Property="BackgroundColor" Value="{StaticResource Marine}"/>
                <Setter Property="Background" Value="{StaticResource Forest}"/>
            </Style>
        </ResourceDictionary>        
    </Application.Resources>
</Application>

以及调用日期和时间选择器的页面（我跳过了无趣的部分；-）；

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Arbeitszeitrechner_Forms" 
             x:Class="Arbeitszeitrechner_Forms.Views.CalcPage"
             Title="{Binding Title}">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout>
                <Grid
                    Padding="10">

.
.
.
                    <TimePicker Grid.Row="1"
                                Grid.Column="0"
                                x:Name="BtnTime1"
                                Format="t"
                                PropertyChanged="OnTimePickerPropertyChanged" />
.
.
.

                    <DatePicker Grid.Row="6"
                                Grid.Column="0"
                                Grid.ColumnSpan="2"
                                x:Name="BtnDate"
                                Format="t"
                                PropertyChanged="OnTimePickerPropertyChanged" />

但是，目前看起来是这样的：

Answer 1

您可以在您的平台特定项目的 style.xml 文件中更改时间选择器的样式和颜色，如下图所示

您可以在其中编辑颜色和样式。更多信息请查看this link。

Answer 2

在 Xamarin.forms 中，您可以使用自定义渲染器来执行此操作。

安卓：

先设置样式：

 <style name="TimePickerTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#039BE5</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
</style>

并在对话框的自定义渲染器中设置此主题：

[assembly: ExportRenderer(typeof(Xamarin.Forms.TimePicker), typeof(TimePickerDialogCustomRenderer))]

namespace App1.Droid
{
class TimePickerDialogCustomRenderer : TimePickerRenderer
{
    private readonly Context _context;
    public TimePickerDialogCustomRenderer(Context context) : base(context)
    {
        _context = context;

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

    TimePickerDialog dialog;
    protected override TimePickerDialog CreateTimePickerDialog(int hours, int minutes)
    {
        dialog = new TimePickerDialog(_context, Resource.Style.TimePickerTheme, this, hours, minutes, false);
         
        return dialog;

    }
}
}