如何更改 TimePicker 的样式和颜色

问题描述

我正在为 Xamarin.Forms 应用程序中的 Time 和 DatePickers 的样式和着色而苦苦挣扎.目前它是亮粉色(呃)，我正在拼命寻找在整个项目 xaml-File 中更改App.xaml"的可能性.我只知道如何为 Button 的背景着色，而不是为 Dialog 本身着色.

->我还在这里看到了问题:

解决方案

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

安卓:

先设置样式:

 <item name="colorAccent">#039BE5</item><item name="android:layout_width">wrap_content</item><item name="android:layout_height">wrap_content</item></风格>

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

[程序集:ExportRenderer(typeof(Xamarin.Forms.TimePicker), typeof(TimePickerDialogCustomRenderer))]命名空间 App1.Droid{类 TimePickerDialogCustomRenderer : TimePickerRenderer{私有只读上下文_上下文；公共 TimePickerDialogCustomRenderer(上下文上下文):基础(上下文){_context = 上下文；}protected override void OnElementChanged(ElementChangedEventArgs e){base.OnElementChanged(e);}TimePickerDialog 对话框；受保护的覆盖 TimePickerDialog CreateTimePickerDialog(int hours, int minutes){dialog = new TimePickerDialog(_context, Resource.Style.TimePickerTheme, this, hours, minutes, false);返回对话框；}}}

I am struggling with styling and colouring Time and DatePickers in a Xamarin.Forms App. At the moment it's bright pink (ugh) and i am desperately looking for a possibility to change that in the overall Project xaml-File the "App.xaml"I only found out how i can colour the background of the Button, but not the Dialog itself.

-> I also saw the Question here: change the colour of DatePicker [Xamarin.Forms], but i don't want to change it in the Android Project itself. I am looking for a global way of customizing those dialogs.

My App.xaml code:

<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>

and my Page where the Date and Timepicker getting called (i skipped the uninteresting part ;-);

<?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" />

However, currently it looks like this:

解决方案

In Xamarin.forms, you could do this with custom renderer.

Android:

Set the style first:

 <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>

And set this theme in custom renderer for dialog:

[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;

    }
}
}

这篇关于如何更改 TimePicker 的样式和颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！