Correct way to redraw an application after changing resources.

[ArtiDi]

Greetings!
I am trying to implement support for multiple themes and their change at runtime. Since Uno has a convenient feature Lightweight Styling, I'm planning to choosing one global theme, Light for example, and then add/remove ResourceDictionaries.ThemeDictionaries, where I would rewrite built-in Uno resources and add my custom ones.
Simplified code example:

static readonly ResourceDictionary myResourceDictionaryMain = new ResourceDictionary();
private static void UpdateResourceDictionary(string theme)
{
    var application = Application.Current;
    if (!application.Resources.MergedDictionaries.Contains(myResourceDictionaryMain))
        application.Resources.MergedDictionaries.Add(myResourceDictionaryMain);

    var resourceDic = new ResourceDictionary();
    var builder = new ResourceDictionaryBuilder(resourceDic);
    var color = theme.ToLower() == "first" ? Colors.Red : Colors.Blue;
    builder.Add("FilledButtonBackground", new SolidColorBrush() { Color = color });
    myResourceDictionaryMain.ThemeDictionaries["Light"] = resourceDic;
}

This should change the color of the button that is pressed. It changes, however, only when I click on background and resize the window.
After short search I found this discussion #15066, where Jerome tells that "Changing the resources requires re-creating pages/user controls".

So my question is what would be the correct way in Uno to do that?

(I'm using target Desktop if it's matter)

[morning4coffe-dev]

Hey @ArtiDi,

AFAIK, I didn't test it, this is more of as WinUI question, but to implement theme changes at runtime without requiring a window resize or page reload, you need to handle the resource dictionary updates dynamically and trigger UI invalidation. Update your RD as you did and use Application.Current.Resources.MergedDictionaries.Clear() to ensure that the theme update applies immediately. You can try using FrameworkElement.RequestedTheme = ElementTheme.Default to force all controls to reapply the current theme.

Let me know, if this works/helps. Thank you.

[ArtiDi]

Hi, @morning4coffe-dev !
Sorry for the late reply, got a bit confused with navigation and the shell pattern in the example app.
Initially I came up with using

UIElement.InvalidateArrange();
UIElement.InvalidateMeasure();

But your suggestion with theme changing is elegant and seems to work perfectly. Thank you!

I'll leave an updated code example for those who might have the same question:

changing resources and calling UI update:

public static void ApplyTheme(string theme)
{
    UpdateResourceDictionary(theme);
    (App.Current as App)?.ReloadFrame();
}

static readonly ResourceDictionary myResourceDictionaryMain = new ResourceDictionary();
private static void UpdateResourceDictionary(string theme)
{
    var application = Application.Current;
    
    if (!application.Resources.MergedDictionaries.Contains(myResourceDictionaryMain))
        application.Resources.MergedDictionaries.Add(myResourceDictionaryMain);
    var resourceDic = new ResourceDictionary();
    var builder = new ResourceDictionaryBuilder(resourceDic);
    var color = theme.ToLower() == "first" ? Colors.Red : Colors.Blue;
    builder.Add(Theme.Button.Resources.Filled.Background.Default, new SolidColorBrush() { Color = color });
    builder.Add(Theme.Button.Resources.Filled.Background.Pressed, new SolidColorBrush() { Color = color });
    builder.Add(Theme.Button.Resources.Filled.Background.PointerOver, new SolidColorBrush() { Color = color });
    builder.Add(Theme.Button.Resources.Filled.Background.PointerFocused, new SolidColorBrush() { Color = color });
    builder.Add(Theme.Button.Resources.Filled.Background.Focused, new SolidColorBrush() { Color = color });

    myResourceDictionaryMain.ThemeDictionaries["Light"] = resourceDic;
}

In my App.xaml.cs class (I use option with Toolkit navigation):

public void ReloadFrame()
{
    var window = MainWindow;
    if(window.Content is Shell shell) {
        var frameView = shell.ContentControl.Content as FrameView;
        var frame = frameView?.Content as Frame;
        frame.RequestedTheme = ElementTheme.Default;
    }
}