Multiple controls don't support theme changes properly on the fly

[pekspro]

Description

If you try to change the app theme when a MAUI application is running, multiple controls will not be drawn properly. At least not on Android and Windows. I have created a sample application with all these controls:

• Search bar
• Toolbar menu
• Radio buttons
• Picker
• Checkbox
• Switch control
• Two buttons. Both are enabled, but the first one has been temporary disabled during launch. Both these should be drawn identical.

Here, I start the application on Android where the system theme is Light. Then I force the app to dark theme, and then to light theme.

Another sample on Android, but the system theme is Dark:

Here on Windows 11, the system theme is Light:

Here on Window 11, the system theme is Dark.

I see these issues:

• Search Box: On Android, the search box always uses the system colors. Even if I force my app by setting UserAppTheme to a specific theme, the system colors will be used. On Windows, the search box could be invisible.
• Toolbar menu: Always uses the color that was set on launch. Never changes on the fly. This is already reported, and there is a workaround for Android. See issue #8756.
• Radio buttons: The rings could disappear. On Windows also the text could disappear.
• Picker: On Andriod, the line in the picker could disappear. On Windows the border could disappear. I have also seen the text disappear but appear again when hovering in Windows.
• Checkbox: The border can disappear. And appear again with a different color.
• Switch control. Sometimes invisible. On Windows, the text could disappear.
• Buttons that have been disabled and then enabled again cannot change theme. This has been reported before, see #9220.

Steps to Reproduce

1. Create a new MAUI application.
2. Update MainPags.xaml.cs:

namespace MauiIssues;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();

        Picker.ItemsSource = new List<string> { "One", "Two", "Three" };
		Picker.SelectedIndex = 1;
    }

    override async protected void OnAppearing()
    {
        base.OnAppearing();

        DisabledButton.IsEnabled = false;
        await Task.Delay(100);
        DisabledButton.IsEnabled = true;

        Window.Width = 360;
        Window.Height = 700;
    }

    private void ThemeLight_CheckedChanged(object sender, CheckedChangedEventArgs e)
    {
        if (ThemeLight.IsChecked)
        {
            App.Current.UserAppTheme = AppTheme.Light;
        }
        else
        {
            App.Current.UserAppTheme = AppTheme.Dark;            
        }
    }
}

3. Update MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiIssues.MainPage">
    <ContentPage.ToolbarItems>
        <ToolbarItem Order="Secondary" Text="Secondary 1" />
    </ContentPage.ToolbarItems>
    <Shell.SearchHandler>
        <SearchHandler 
                Placeholder="Search box"
                SearchBoxVisibility="Expanded"
                >
        </SearchHandler>
    </Shell.SearchHandler>

    <ScrollView>
        <VerticalStackLayout 
            Spacing="12" 
            Padding="30" 
            VerticalOptions="Start">

            <Label Text="Theme" />
            <HorizontalStackLayout>
                <RadioButton x:Name="ThemeLight" Content="Light" CheckedChanged="ThemeLight_CheckedChanged" />
                <RadioButton x:Name="ThemeDark" Content="Dark" CheckedChanged="ThemeLight_CheckedChanged" />
            </HorizontalStackLayout>

            <Label Text="Picker:" />
            <Picker x:Name="Picker" />

            <Label Text="Check box:" />
            <CheckBox HorizontalOptions="Start" />

            <Label Text="Switch:" />
            <Switch HorizontalOptions="Start" />

            <Label Text="Reenabled button:" />
            <Button Text="Hello world" x:Name="DisabledButton" />

            <Label Text="Button:" />
            <Button Text="Hello world" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

4. Run the application and see what happens when the theme is changed.

Link to public reproduction project repository

https://github.com/pekspro/MauiIssues/tree/11849_Multiple_controls_dont_support_theme_changes

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows, I was not able test on other platforms

Affected platform versions

Windows 11, Android 11, Android 13.

Did you find any workaround?

No response

Relevant log output

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[pierre01]

I have the same issue if I set:

Application.Current.UserAppTheme = AppTheme.Light;

Most controls work well except Radio Buttons and entry when not selected , calendar selected date... and a few others...

[breenbob]

We are also affected by these issues.

[MauiUIui]

I was about to report a bug about this as well. It is very anoying, I first noticed it with the Buttons. If the button is disabled when the app is lunching, changing the phone theme while the app is running would cause that button to have the false button theme loading when its state changes to enabled.I also tried it on both Android and Windows.

Note: Changing the triggering method brought nothing. I tried deleting the visual states from the default Button Style and writing triggers instead but unfortuntly that didn't have any effect.

[daltzctr]

We are also affected by this

[jbizcloud]

+1

[jinxinjuan]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 3.0(net8). Can repro on windows and android platform with sample project. 11849_Multiple_controls_dont_support_theme_changes

[MartyIX]

Is there a workaround for this issue?

[MauiUIui]

Yes. .NET 8

On Tue, 31 Oct 2023, 20:28 MartyIX, @.***> wrote:

Is there a workaround for this issue?

— Reply to this email directly, view it on GitHub https://github.com/dotnet/maui/issues/11849#issuecomment-1787896304, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6HUPWKADGGJ6C6L2ASU5JTYCFGPRAVCNFSM6AAAAAASS3IHJCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBXHA4TMMZQGQ . You are receiving this because you commented.Message ID: @.***>

[AlexBar]

Yes. .NET 8 … On Tue, 31 Oct 2023, 20:28 MartyIX, @.> wrote: Is there a workaround for this issue? — Reply to this email directly, view it on GitHub <#11849 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6HUPWKADGGJ6C6L2ASU5JTYCFGPRAVCNFSM6AAAAAASS3IHJCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBXHA4TMMZQGQ . You are receiving this because you commented.Message ID: @.>

Still does not work after ..NET 8 upgrade. At least for picker/entry (checked on win10).

[MartyIX]

If one modifies (source) Platforms\Windows\App.xaml (in a MAUI app) to this effect:

<maui:MauiWinUIApplication
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maui="using:Microsoft.Maui"
    x:Class="WhalesSecret.MauiGui.WinUI.App">

    <maui:MauiWinUIApplication.Resources>
        <SolidColorBrush x:Key="ComboBoxDropDownGlyphForeground" Color="Blue" /> <!-- NEW LINE -->
        <SolidColorBrush x:Key="ComboBoxDropDownBorderBrush" Color="Red" /> <!-- NEW LINE -->
        <SolidColorBrush x:Key="ComboBoxDropDownBackground" Color="Pink"/> <!-- NEW LINE -->
    </maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>

then picker's dropdown glyph changes to blue (and so on) and it stays blue even if one changes to the dark theme and back. So it might be theoretically possible to modify various colors of the picker so that the colors are the same for the dark theme and the light theme as a workaround. Then it would not at least break when theme is changed. Obviously, it's quite restricting.

The names of the theming resources are here AFAIK: https://github.com/microsoft/microsoft-ui-xaml/blob/winui3/release/1.4-stable/controls/dev/ComboBox/ComboBox_themeresources.xaml#L569-L813 (Win UI 3 1.4 which will be used in MAUI SR3).

Given that there is https://github.com/microsoft/microsoft-ui-xaml/issues/8824, it sort of suggests that the underlying issues is on WinUI 3 side rather than on MAUI's side but I don't really know.

[EricGosselin]

I have the same Issue with the MenuBarItems in Windows, For now I never used It for MacOs. A Workaround is to clear all the MenuBarItems and reconstruct the menu after a Theme change.

[MartyIX]

I researched this here: https://github.com/dotnet/maui/issues/10490#issuecomment-2126718966

-> Another workaround idea is to write platform-specific code that would set the FrameworkElement.RequestedTheme property for all elements where one requires correct theme on a theme change (seems similarly complex as A Workaround is to clear all the MenuBarItems and reconstruct the menu after a Theme change.)

[samhouts]

We agree that this is an important issue. As our roadmap indicates, for the near future, we are focused on:

• Issues impacting Xamarin.Forms upgrades to .NET MAUI
• CollectionView
• Layout

I am marking this as a p/2 issue because it does not meet our focus areas right now, but we are constantly revisiting the backlog for important issues to address as time allows. Thank you for your patience and understanding!