CODEWITHSUNDEEP
maui
Arvind Chourasiya
Arvind Chourasiya

Reputation: 17432

How to change DatePicker popup white backgroud color in MAUI

I have a DatePicker control in MAUI. When I click on it, a white background popup opens.

enter image description here

I want to change the background color of popup. I tried to create handler but its not working. In App.xaml.cs class

      public App()
        {
            InitializeComponent();

            Microsoft.Maui.Handlers.DatePickerHandler.Mapper.AppendToMapping(nameof(IView.Background), (handler, view) =>
            {
#if ANDROID
                        handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.LightGray);
                        handler.PlatformView.SetHighlightColor(Android.Graphics.Color.LightGray);
                        handler.PlatformView.SetHintTextColor(Android.Graphics.Color.LightGray);
                        handler.PlatformView.SetLinkTextColor(Android.Graphics.Color.LightGray);
#elif WINDOWS
                        handler.NativeView.Background = Colors.LightGray.ToNative();
#endif

            });
            MainPage = new AppShell();         
        }

In Style.xaml I changed BackgroundColor to gray

<Style TargetType="DatePicker">
    <Setter Property="TextColor"
            Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Yellow300Accent}}" />
    <Setter Property="BackgroundColor" Value="Gray" />
    <Setter Property="VisualStateManager.VisualStateGroups">
    </Setter>
</Style>

Its not working, how can I make work ?

Upvotes: 0

Views: 1042

Answers (1)

Liqun Shen-MSFT
Liqun Shen-MSFT

Reputation: 8220

You may try creating your own styles.xml for Android.

In Platform => Android => Resources => values, create a new styles.xml, add the following code, which lists almost all the properties that could be changed in native android, you may choose some of them as you like.

<?xml version="1.0" encoding="UTF-8" ?>
<resources> 
    <style name="MyTheme" parent="MainTheme.Base">  
        <item name="android:datePickerDialogTheme">@style/CustomDatePickerDialog</item>  
    </style> 

    <style name="CustomDatePickerDialog" parent="ThemeOverlay.AppCompat.Dialog">  
         <!--header background-->  
         <item name="colorAccent">#ff0000</item>  
         <!--header textcolor-->  
         <item name="android:textColorPrimaryInverse">#00ff00</item>  
         <!--body background-->  
         <item name="android:windowBackground">#0000ff</item>  
         <!--selected day-->  
         <item name="android:colorControlActivated">#ff1111</item>  
         <!--days of the month-->  
         <item name="android:textColorPrimary">#ffffff</item>  
         <!--days of the week-->  
         <item name="android:textColorSecondary">#33ff33</item>  
         <!--cancel&ok-->  
         <item name="android:textColor">#00ffff</item>  
    </style> 
</resources>

To be more specific, just change the value of this item for modifying the white Background:

     <!--body background-->  
     <item name="android:windowBackground">#0000ff</item>

Then you could consume it in this way in MainActivity:

[Activity(Theme = "@style/MyTheme", MainLauncher = true,...]
public class MainActivity : MauiAppCompatActivity
{
}

Hope it helps!

Upvotes: 1

Related Questions