CODEWITHSUNDEEP
xamluwpuwp-xaml
Corcus
Corcus

Reputation: 1090

Override theme resource in the scope of a Page

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?

Upvotes: 4

Views: 873

Answers (1)

Gabriel Ojomu
Gabriel Ojomu

Reputation: 192

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.

Upvotes: 1

Related Questions