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,226 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,226 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,226 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.

Share via

Custom themes and dynamic UI styles for UWP app

Your answer