Custom themes and dynamic UI styles for UWP app

DotNET Fan 191

Hello UWP experts ,

We have 6 resource dictionaries having different themes , particulary app background, button colors etc...

And initially from the application resources it loads the default one if user didn't select any other theme.

<Application.Resources>
      <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>  
             <ResourceDictionary Source="ms-appx:///Themes/default.xaml" />
         </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
 </Application.Resources>

We have a content dialog where user can select a particular theme of their choice and the code will select the particular resource dictionary having that theme and loads the button colors and other background. But unfortunately UI is not getting updated with the background colors,styles and the application is crashing.

The resource dictionary has the same filename as the theme name and this is how it loads a particular theme xaml dynamically and it is done in

app.xaml.cs

 var skinDictionary = new ResourceDictionary();
             skinDictionary.Source = new Uri($"ms-appx:///Themes/{theme}.xaml", UriKind.Absolute);
             Application.Current.Resources.MergedDictionaries.Clear();
             Application.Current.Resources.MergedDictionaries.Add(skinDictionary);

The resource dictionary has button styles set with the key defined <Style TargetType="Button" x:Key="AppButtonStyle"> and it is being referred in button as Style="{ThemeResource AppButtonStyle}"

Also there are other windows created through a new dispatcher thread and the page uses the theme resources - for eg:

CoreApplicationView newView = CoreApplication.CreateNewView();
 int newViewId = 0;
 await newView.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
 {
     Frame frame = new Frame();
     frame.Navigate(typeof(NewPage));
}

What is the best approach to update the UI on the fly for custom themes defined in different resource dictionaries for these cases?

Junjie Zhu - MSFT 17,401 Reputation points Microsoft Vendor

2024-09-02T09:05:19.0633333+00:00

Hi @DotNET Fan ,

Welcome to Microsoft Q&A!

But unfortunately UI is not getting updated with the background colors,styles and the application is crashing.

To further troubleshoot this problem, I would appreciate your help to collect the following information.

Could you find which line of code caused the crash? Is there any error thrown?

Thank you.

DotNET Fan 191

@Junjie Zhu - MSFT , I see the error after adding the resource dictionary and a different resource dictionary and it goes to the unhandled exception handler with no stacktrace

Exception = {"Value does not fall within the expected range."}
Message = "The parameter is incorrect.\r\n"

I tried with a sample UWP app with a grid and button and saw that the theme does not change on the fly.

bluish.xaml
-----------------
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Color x:Key="PrimaryColor">Blue</Color>
    <Color x:Key="SecondaryColor">SkyBlue</Color>
    <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}" />
    <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource SecondaryColor}" />
</ResourceDictionary>

reddish.xaml
----------------
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Color x:Key="PrimaryColor">Red</Color>
    <Color x:Key="SecondaryColor">Green</Color>
    <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}" />
    <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource SecondaryColor}" />
</ResourceDictionary>

and in mainpage.xaml referring these styles

<Grid Background="{ThemeResource PrimaryBrush}"  >
   
     <Button Background="{ThemeResource SecondaryBrush}" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="4"> Click Me</Button>
     <StackPanel Orientation="Vertical" Padding="10" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0 0 0 20">
         <RadioButton Content="Bluish" Tapped="RadioButton_Tapped"></RadioButton>
        
         <RadioButton Content="Reddish" Tapped="RadioButton_Tapped"></RadioButton>
         
     </StackPanel>
 </Grid>
 public void SetTheme(string themeName)
 {
     ResourceDictionary newTheme = new ResourceDictionary();
     switch (themeName)
     {
         case "bluish":
             newTheme.Source = new Uri("ms-appx:///Themes/bluish.xaml");
             break;
        
         case "reddish":
             newTheme.Source = new Uri("ms-appx:///Themes/reddish.xaml");
             break;
         default:
             newTheme.Source = new Uri("ms-appx:///Themes/bluish.xaml");
             break;
     }
     // Clear existing dictionaries and add the new one
     Application.Current.Resources.MergedDictionaries.Clear();
     Application.Current.Resources.MergedDictionaries.Add(newTheme);
 }

Junjie Zhu - MSFT 17,401 Reputation points Microsoft Vendor

2024-09-04T09:26:42.04+00:00

HI @DotNET Fan ,

I tested it and was able to reproduce the same behavior. In the code side, I used var myBrush = (SolidColorBrush)Application.Current.Resources["PrimaryBrush"]; to read the resource and found that the brush had been successfully modified, but there was no change in the UI interface.
DotNET Fan 191 Reputation points

2024-09-04T16:11:24.4066667+00:00

Junjie Zhu - MSFT Thanks for confirming the behavior. Is that a bug ? Any workarounds?
Junjie Zhu - MSFT 17,401 Reputation points Microsoft Vendor

2024-09-05T07:25:08.0266667+00:00

Hi @DotNET Fan ,

I need to discuss this with the team to confirm this behavior.
DotNET Fan 191 Reputation points

2024-09-05T13:51:07.04+00:00

@Junjie Zhu - MSFT , I think the main use of binding to a ThemeResource in an element is to load a particular style item dynamically and on the fly. But this is not behaving as expected.
Roy Li - MSFT 33,091 Reputation points Microsoft Vendor

2024-09-25T05:39:38.3166667+00:00

Any updates about this issue? Does junjie's solution solve the issue?

1 answer

Junjie Zhu - MSFT 17,401 Microsoft Vendor

Hi @DotNET Fan ,

Welcome to Microsoft Q&A!

Currently, UWP does not have an API to effectively switch resource files on the code side. As a workaround, it is recommended that you use Application.Current.Resources.MergedDictionaries to read specific keys and modify the value.

App.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary>
                <Color x:Key="PrimaryColor">Blue</Color>
                <Color x:Key="SecondaryColor">SkyBlue</Color>
                <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}" />
                <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource SecondaryColor}" />
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

MainPage.xaml

<Grid Background="{StaticResource PrimaryBrush }"  >
    <Button Background="{StaticResource SecondaryBrush}" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="4">Click Me</Button>
    <StackPanel Orientation="Vertical" Padding="10" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0 0 0 20">
        <RadioButton Content="Bluish" Tapped="RadioButton_Tapped"></RadioButton>
        <RadioButton Content="Reddish" Tapped="RadioButton_Tapped_1"></RadioButton>
    </StackPanel>
</Grid>

MainPage.xaml.cs

private void RadioButton_Tapped(object sender, TappedRoutedEventArgs e)
{
    //SetTheme("bluish");
    if (Application.Current.Resources.MergedDictionaries[0].ContainsKey("PrimaryBrush"))
    {
        var brush = Application.Current.Resources.MergedDictionaries[0]["PrimaryBrush"] as SolidColorBrush;
        if (brush != null)
        {
            brush.Color = Colors.Blue;
        }
    }
    if (Application.Current.Resources.MergedDictionaries[0].ContainsKey("SecondaryBrush"))
    {
        var brush = Application.Current.Resources.MergedDictionaries[0]["SecondaryBrush"] as SolidColorBrush;
        if (brush != null)
        {
            brush.Color = Colors.SkyBlue;
        }
    }
}
private void RadioButton_Tapped_1(object sender, TappedRoutedEventArgs e)
{
    //SetTheme("reddish");
    if (Application.Current.Resources.MergedDictionaries[0].ContainsKey("PrimaryBrush"))
    {
        var brush = Application.Current.Resources.MergedDictionaries[0]["PrimaryBrush"] as SolidColorBrush;
        if (brush != null)
        {
            brush.Color = Colors.Red;
        }
    }
    if (Application.Current.Resources.MergedDictionaries[0].ContainsKey("SecondaryBrush"))
    {
        var brush = Application.Current.Resources.MergedDictionaries[0]["SecondaryBrush"] as SolidColorBrush;
        if (brush != null)
        {
            brush.Color = Colors.Green;
        }
    }
}

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

DotNET Fan 191

Junjie Zhu - MSFT ,

this doesn't work for secondary windows as Application.Current.Resources.MergedDictionaries is empty and fails to apply theme for secondary windows. It can't find the keys

CoreApplicationView newView = CoreApplication.CreateNewView(); 
int newViewId = 0; 
await newView.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { 
Frame frame = new Frame(); 
//frame.Resources.MergedDictionaries.Add(Application.Current.Resources.MergedDictionaries[0]);
frame.Navigate(typeof(MainPage));
 ApplicationView.PreferredLaunchViewSize = new Size(480, 800); ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize; 
Window.Current.Content = frame; 
Window.Current.Activate(); 
newViewId = ApplicationView.GetForCurrentView().Id; 
}); 
bool viewShown = await ApplicationViewSwitcher.TryShowAsStandaloneAsync(newViewId);

DotNET Fan 191 Reputation points

2024-09-12T13:10:13.07+00:00

@Junjie Zhu - MSFT , Any inputs for this secondary windows case?
DotNET Fan 191 Reputation points

2024-09-12T13:47:17.9666667+00:00

@Junjie Zhu - MSFT , Any inputs on this secondary windows scenario?
Junjie Zhu - MSFT 17,401 Reputation points Microsoft Vendor

2024-09-13T07:10:47.23+00:00

Hi @DotNET Fan ,

I will try to find a solution and update below if I have any.
Junjie Zhu - MSFT 17,401 Reputation points Microsoft Vendor

2024-09-18T06:22:17.5+00:00

Hi @DotNET Fan ,

Sorry for the delay. I used your code to open a new window and everything works. May I ask if you put the ResourceDictionary inside the App.xaml?

Thank you.
DotNET Fan 191 Reputation points

2024-09-19T07:48:01.3266667+00:00

@Junjie Zhu - MSFT Yes i have set that in the app.xaml.cs.

Does that mean i have to load the resources explicitly in the page , content dialogs that gets invoked from the window opened through the secondary dispatcher?
Junjie Zhu - MSFT 17,401 Reputation points Microsoft Vendor

2024-09-19T08:49:27.7066667+00:00

Hi @DotNET Fan ,

Application.Current.Resources.MergedDictionaries.Add(newTheme); This API behavior is different from WPF. I have tried many methods so far, and the only feasible one is the current method, which reads the resource file and modifies brush on the code side.

Thank you.
DotNET Fan 191 Reputation points

2024-09-19T09:11:53.4566667+00:00

Hi @Junjie Zhu - MSFT, Do you mean instead of Application.Current.Resources.Mergedictionaries. Add() , do it at the element level (for eg: Page , content dialog) constructor , like this.Resources.Mergedictionaries. Add ?
Junjie Zhu - MSFT 17,401 Reputation points Microsoft Vendor

2024-09-20T08:55:14.1866667+00:00
No, what I mean is Application.Current.Resources.MergedDictionaries.Add(newTheme); cannot change the resource in UWP, you cannot modify resources by replacing files, you can only modify them within the current resource.

var brush = Application.Current.Resources.MergedDictionaries[0]["SecondaryBrush"] as SolidColorBrush; if (brush != null) { brush.Color = Colors.SkyBlue; }

Share via

Custom themes and dynamic UI styles for UWP app

1 answer

App.xaml

MainPage.xaml

MainPage.xaml.cs

Your answer