Override theme resource in the scope of a Page

Question

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?

Answer 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'

2. 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

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.

I hope this helps out.