4

I want to override a theme resource, specifically the SystemAccentColor, in the scope of a specific page. I have successfully done it in application wide scope. But I can't do it for a specific page.

XAML in App.xaml (this works fine)

    <Application.Resources>        
        <ResourceDictionary>  
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                        <Color x:Key="SystemAccentColor">#862E2D</Color>
                        <SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="Black"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </Application.Resources>

XAML in Page.xaml (this doesn't work)

   <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <Color x:Key="SystemAccentColor">#111111</Color>  
                    <SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="Black"/>                 
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>          
        </ResourceDictionary>
    </Page.Resources>

    <!-- Control to test that the resource is overriden. The `ProgressBar` uses the accent color by default -->
    <ProgressBar 
        Height="10" 
        Grid.ColumnSpan="3"
        VerticalAlignment="Top"              
        IsIndeterminate="True" />

I don't know why the resource is not overridden in the scope of the page.

I have tried removing the override from App.xaml and only overriding the resources in Page.xaml but that doesn't work either.

However if I do this

XAML in Page.xaml

 <ProgressBar 
     Height="10" 
     Grid.ColumnSpan="3"
     VerticalAlignment="Top"              
     IsIndeterminate="True"
     Foreground="{StaticResource SystemControlHighlightAccentBrush}"/>

Then the ProgressBar gets the correct foreground value. Which means that the ovverride does take place.

Does anybody know why this is happening? Or how I can override a theme resource for a specific page?

Martin Zikmund
  • 38,440
  • 7
  • 70
  • 91
Corcus
  • 1,070
  • 7
  • 25

1 Answers1

1

The best way is using Visual Studio or 'Blend for Visual Studio'. I'm using Visual Studio

  1. Right click on the Element you want to edit (in your case, Progress bar) > select 'Edit Template' > 'Edit a Copy'

enter image description here

  1. A 'Create Style Resource' shows up, Enter a name for your style & in the 'Define in' section, select 'This Document' (this ensures the style only applies to the page/window and not app wide) and click okay

enter image description here

Immediately, the Progress Bar includes a style attribute (see last image) using the new style you created. You can go ahead and modify the code snippet inserted by the IDE to suite your imagination.

enter image description here

I hope this helps out.

Gabriel Ojomu
  • 192
  • 2
  • 7
  • 2
    Thanks for your answer, however the answer I am seeking is not one that involves styles but rather one that overrides a theme resource for a specific scope (a `Page` in this scenario but any `FrameworkElement` would do). And this resource is applied automatically to all controls (that were already using it) in the defined scope. On another note this question refers to UWP and your solution, the `DynamicResource` part, is not available in UWP. The rest of the process is similar though. – Corcus Feb 22 '17 at 14:50