How to Create a Style for a SfDateTImePicker - ChatGPT and CoPilot can't

[Unknown]

Can you show me how to create a style for SfDateTimePicker.

ChatGPT and CoPilot failed.

The Below attempt only changes the headerview background color and text colors. When I put these same properties into the SfDateTimePicker itself all the formatting works.

<Style x:Key="SfDateTimePickerStyle" TargetType="picker:SfDateTimePicker">

<Setter Property="TextDisplayMode" Value="FadeAndShrink" />

<Setter Property="VerticalOptions" Value="Center" />

<Setter Property="Mode" Value="Dialog" />

<Setter Property="DateFormat" Value="dd_MMM_yyyy" />

<Setter Property="TimeFormat" Value="hh_mm_tt" />

<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}" />

<Setter Property="ColumnDividerColor" Value="{StaticResource Primary}" />

<Setter Property="HeaderView">

<Setter.Value>

<picker:DateTimePickerHeaderView Background="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}"

                                             DividerColor="{StaticResource Primary}">

<picker:DateTimePickerHeaderView.TextStyle>

<picker:PickerTextStyle FontSize="15"

                                            TextColor="{AppThemeBinding Light={StaticResource DarkBackground}, Dark={StaticResource LightBackground}}" />

</picker:DateTimePickerHeaderView.TextStyle>

<picker:DateTimePickerHeaderView.SelectionTextStyle>

<picker:PickerTextStyle FontSize="15"

                                            TextColor="{StaticResource Primary}" />

</picker:DateTimePickerHeaderView.SelectionTextStyle>

</picker:DateTimePickerHeaderView>

</Setter.Value>

</Setter>

<Setter Property="ColumnHeaderView">

<Setter.Value>

<picker:DateTimePickerColumnHeaderView Background="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}"

                                                    DividerColor="{StaticResource Primary}" />

</Setter.Value>

</Setter>

<Setter Property="FooterView">

<Setter.Value>

<picker:PickerFooterView Background="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}"

                                    DividerColor="{StaticResource Primary}"

                                    ShowOkButton="True"

                                    Height="40">

<picker:PickerFooterView.TextStyle>

<picker:PickerTextStyle FontSize="15"

                                            TextColor="{AppThemeBinding Light={StaticResource DarkBackground}, Dark={StaticResource LightBackground}}" />

</picker:PickerFooterView.TextStyle>

</picker:PickerFooterView>

</Setter.Value>

</Setter>

<Setter Property="SelectedTextStyle">

<Setter.Value>

<picker:PickerTextStyle FontSize="22"

                                    TextColor="{StaticResource Primary}" />

</Setter.Value>

</Setter>

</Style>

But the formating all works if I do it in the SfDateTimePicker control itself like this:

<picker:SfDateTimePicker

Grid.Column="0"

Grid.Row="3"

x:Name="TimeIn"

IsOpen="{Binding IsTimeInOpen, Mode=TwoWay}"

TextDisplayMode="FadeAndShrink"

VerticalOptions="Center"

Mode="Dialog"

DateFormat="dd_MMM_yyyy"

TimeFormat="hh_mm_tt"

BackgroundColor="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}"

ColumnDividerColor="{StaticResource Primary}">

<picker:SfDateTimePicker.HeaderView>

<picker:DateTimePickerHeaderView

Background="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}"

DividerColor="{StaticResource Primary}">

<picker:DateTimePickerHeaderView.TextStyle>

<picker:PickerTextStyle

FontSize="15"

TextColor="{AppThemeBinding Light={StaticResource DarkBackground}, Dark={StaticResource LightBackground}}" />

</picker:DateTimePickerHeaderView.TextStyle>

<picker:DateTimePickerHeaderView.SelectionTextStyle>

<picker:PickerTextStyle

FontSize="15"

TextColor="{StaticResource Primary}" />

</picker:DateTimePickerHeaderView.SelectionTextStyle>

</picker:DateTimePickerHeaderView>

</picker:SfDateTimePicker.HeaderView>

<picker:SfDateTimePicker.ColumnHeaderView>

<picker:DateTimePickerColumnHeaderView

Background="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}"

DividerColor="{StaticResource Primary}" />

</picker:SfDateTimePicker.ColumnHeaderView>

<picker:SfDateTimePicker.FooterView>

<picker:PickerFooterView

Background="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}"

DividerColor="{StaticResource Primary}"

ShowOkButton="True" Height="40">

<picker:PickerFooterView.TextStyle>

<picker:PickerTextStyle

FontSize="15"

TextColor="{AppThemeBinding Light={StaticResource DarkBackground}, Dark={StaticResource LightBackground}}" />

</picker:PickerFooterView.TextStyle>

</picker:PickerFooterView>

</picker:SfDateTimePicker.FooterView>

<picker:SfDateTimePicker.SelectedTextStyle>

<picker:PickerTextStyle FontSize="22" TextColor="{StaticResource Primary}" />

</picker:SfDateTimePicker.SelectedTextStyle>

<picker:SfDateTimePicker.Behaviors>

<toolkit:EventToCommandBehavior

EventName="OkButtonClicked"

Command="{Binding AcceptTimeInCommand}"

CommandParameter="{Binding Source={x:Reference TimeIn}, Path=SelectedDate}"/>

<toolkit:EventToCommandBehavior

EventName="CancelButtonClicked"

Command="{Binding CancelTimeInCommand}"/>

</picker:SfDateTimePicker.Behaviors>

</picker:SfDateTimePicker>

[Unknown]

I altered the Setter syntax to be 

<Setter Property="picker:SfDateTimePicker.HeaderView">

The HeaderView and ColumnHeaderView formating can be changed

But still not the FooterView and SelectionView

[Tamilarasan Gunasekaran]

Hi s thomson,

Based on the provided details, we have reviewed your query regarding Create a Style for a SfDateTImePicker.

Upon analysis of the code snippet, we noticed that the styles are being defined for all views but are not explicitly applied to the SfDateTimePicker control. To address this, we recommend explicitly applying the styles to the control using the Style property with the defined key.

For better understanding, we’ve created a sample implementation and video based on the suggested approach for your reference.

If you have any further questions or require additional assistance, please don’t hesitate to let us know. We are here to help!

Regards,
Tamilarasan.

Attachment: MAUISfDateTimePickerDemo_dbb0ea40.zip

[Tamilarasan Gunasekaran]

Hi s thomson,

Please find the sample below.

Regards,
Tamilarasan.

Attachment: MAUISfDateTimePicker_92420c48.zip