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?

回答1:

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

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

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.

来源：https://stackoverflow.com/questions/42393453/override-theme-resource-in-the-scope-of-a-page

标签

xaml

uwp

uwp-xaml