PickerSelectionView Background color not displaying as coded.

[Joseph Cigno]

When I load in Android or iOS it does the same.   In debug when DateTimePicker is launched I get the date2 screen shot.  I change the color and then put it back and I get what it is supposed to look like in date1 screen shot.

I change this to get the correct color

Background="{x:StaticResource Primary}"

to 

Background="{x:StaticResource PrimaryD}"

and back to  Background="{x:StaticResource Primary}" 

Here is the code 

            <picker:SfDateTimePicker x:Name="picker"

                                     SelectedDate="{Binding SelectedDateTime, Mode=TwoWay}"

                                     IsOpen="{Binding IsPickerOpen}"

                                     TimeFormat="h_mm_tt"

                                     DateFormat="yyyy_MM_dd"

                                     MinuteInterval="5"

                                     HeightRequest="50"

                                     WidthRequest="200"

                                     Mode="Dialog"

                                     HorizontalOptions="Center"

                                     VerticalOptions="Center"

                                     AcceptCommand="{Binding OkCommand}"

                                     BackgroundColor="{x:StaticResource Secondary}"

                                     >

                <picker:SfDateTimePicker.HeaderView>

                    <picker:DateTimePickerHeaderView DateFormat="MM/dd/yyyy" TimeFormat="h:mm tt" Background="{x:StaticResource Primary}" DividerColor="{x:StaticResource Primary}">

                        <picker:DateTimePickerHeaderView.TextStyle>

                            <picker:PickerTextStyle FontSize="15" TextColor="{x:StaticResource Secondary}" />

                        </picker:DateTimePickerHeaderView.TextStyle>

                        <picker:DateTimePickerHeaderView.SelectionTextStyle>

                            <picker:PickerTextStyle FontSize="15" TextColor="{x:StaticResource SecondaryLightText}" FontAttributes="Bold" />

                        </picker:DateTimePickerHeaderView.SelectionTextStyle>

                    </picker:DateTimePickerHeaderView>

                </picker:SfDateTimePicker.HeaderView>

                <picker:SfDateTimePicker.ColumnHeaderView>

                    <picker:DateTimePickerColumnHeaderView Background="{x:StaticResource Primary}" >

                        <picker:DateTimePickerColumnHeaderView.TextStyle>

                            <picker:PickerTextStyle

                                FontSize="15"

                                TextColor="{x:StaticResource Secondary}"

                                FontAttributes="Bold"

                                />

                        </picker:DateTimePickerColumnHeaderView.TextStyle>

                    </picker:DateTimePickerColumnHeaderView>

                </picker:SfDateTimePicker.ColumnHeaderView>

                <picker:SfDateTimePicker.FooterView>

                    <picker:PickerFooterView

                        Background="{x:StaticResource Primary}"

                        ShowOkButton="True"

                        Height="40"

                        >

                        <picker:PickerFooterView.TextStyle >

                            <picker:PickerTextStyle

                                FontSize="15"

                                TextColor="{x:StaticResource Secondary}"

                                FontAttributes="Bold"

                                />

                        </picker:PickerFooterView.TextStyle>

                    </picker:PickerFooterView>

                </picker:SfDateTimePicker.FooterView>

                <picker:SfDateTimePicker.SelectedTextStyle>

                    <picker:PickerTextStyle

                        FontSize="15"

                        TextColor="{x:StaticResource Secondary}"

                        />

                </picker:SfDateTimePicker.SelectedTextStyle>

                <picker:SfDateTimePicker.SelectionView >

                    <picker:PickerSelectionView

                        Background="{x:StaticResource Primary}"

                        Stroke="{x:StaticResource Secondary}"

                        CornerRadius="10"

                        Padding="10, 5, 10, 5"

                        />

                </picker:SfDateTimePicker.SelectionView>

            </picker:SfDateTimePicker>

            <!--Primary = #1c3861, Secondary = #c4d5ee-->

Attachment: date1_6a0c61b9.png

[Priyadharshni Murugan]

Hi Joseph Cigno,

 

Based on the details shared, we have analyzed the query and are unable to replicate the issue from our end. We have tested it with both the reported version Android Pixel 5 Emulator (API 35) and iOS Emulator (18.5) with the latest NuGet version (30.1.42) and MAUI Controls Version(9.0.51). We have included sample and output video for your convenience. In case you continue to experience the issue, we would appreciate any additional information, especially regarding

• Detailed steps to reproduce the issue.
• Missing date2 screenshot.
• Android/iOS Version
• MAUI Controls Version

It would be extremely helpful for us to investigate further and ensure a comprehensive resolution.

Regards,
Priyadharshni M

Attachment: SampleAndOutput_bb83b792.zip

[Joseph Cigno]

Here is the 2nd screen shot.  This is what is opens up with.   

While the picker is open, I add a letter to the correct color name in code, wrong display color, then delete added letter so color name is spelled correctly again and I get the correct color.

I am going to update to the latest version.   I am using version 29.2.7

Thanks for your quick response.

Attachment: date2_ddeb5d2d.png

[Joseph Cigno]

I have attached a video of the issue.

Also note that there is a grey box under the Avalon Event Tracker text.   XAML Live Preview indicates it is SfDateTimePicker.  How do I stop that from displaying?

I was able to copy and paste my picker code as you did into a new project, remove the 2 property references and it worked as coded.

I updated to the latest version of all of my SyncFusion   NuGet version (30.1.42) and my MAUI Controls Version is 9.0.70 .  The iOS version was 15.4.

My project Properties application page is the same as the sample you sent.

FYI, I tried using system color like green red blue.  Still same issue.

Attachment: PickerIssue_a046f36c.zip

[Priyadharshni Murugan]

Hi Joseph,

 

Query 1: Regarding PickerSelectionView background color not displaying as coded:

Based on the updated details, we have conducted tests on iOS 15.0, iOS 15.4, iOS 15.6, and iOS 18.2 using the mentioned MAUI.Controls version 9.0.70. We found that the DateTimePicker is working as expected on our end.

Additionally, could you please confirm whether you have applied Syncfusion theming, overridden any DateTimePicker keys to implement a custom theme, or added any static or dynamic resource keys to customize the SfDateTimePicker in your Styles file? We have also attached a tested sample with the output for your reference.

 

Query 2: Regarding grey box under the Avalon Event Tracker text:

We can achieve this by setting Background property to Transparent. We have attached relevant code snippet for this.

 

Code Snippet:

        <picker:SfDateTimePicker x:Name="picker”

                                   IsOpen="True"

                                   TimeFormat="h_mm_tt"

     DateFormat="yyyy_MM_dd"

                                   MinuteInterval="5"

                                   HeightRequest="50"

                                   WidthRequest="200"

                                   Mode="Dialog"                                 

                                   Background="Transparent">

Regards,
Priyadharshni M

Attachment: Sample_6662eb03.zip

[Joseph Cigno]

I found this in my app.XAML file

<syncTheme:SyncfusionThemeResourceDictionary VisualTheme="MaterialLight"/>

Once I removed that line of code the picker's colors reflected my code.  The screen looks like what I want it to now.

What impact can I expect from removing that line of code?  I don't leverage it in my code anywhere I can tell.

Thanks a million for your good service.

[Priyadharshni Murugan]

Hi Joseph,

 

Thank you for the update.

Removing <syncTheme:SyncfusionThemeResourceDictionary VisualTheme="MaterialLight"/> from App.xaml has disabled the automatic application of the Syncfusion MaterialLight theme, allowing your custom styles to take effect. If you're not using Syncfusion theming elsewhere, this change should not cause any issues.

Please feel free to reach out if you need further assistance.

Regards,
Priyadharshni M