Windows Store app's overriden resource value ignored in template

Question

I'm creating a Windows Store app where each page has a dominant color used for titles, buttons and such.

In App.xaml I've created a default Brush that's overriden in each Page's xaml file, and a style template for Buttons which I reuse in every page. The templates are supposed to use the page's color but for some reason they stick with the default value.

Here are my xaml files.

App.xaml

<Application
    x:Class="Foo.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Foo"
    RequestedTheme="Light">

  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary>
          <SolidColorBrush x:Name="SectionDefaultBrush" Color="Red" />
          <Style TargetType="Button" x:Name="NavigationButtonStyle">
            <Setter Property="FontFamily" Value="Myriad Pro" />
            <Setter Property="Template">
              <Setter.Value>
                <ControlTemplate TargetType="Button">
                  <Grid>
                    <Rectangle x:Name="Border" Fill="#f4f4f4" Margin="0" />
                    <TextBlock Foreground="{ ThemeResource SectionDefaultBrush }"  Text=">" FontSize="31" />
                    <ContentPresenter x:Name="Content" VerticalAlignment="Center" Foreground="#5A5A5A" HorizontalAlignment="Left" FontSize="31"/>
                  </Grid>
                </ControlTemplate>
              </Setter.Value>
            </Setter>
          </Style>
        </ResourceDictionary>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

SomePage.xaml

<Page
    x:Class="Foo.Pages.SomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

  <Page.Resources>
    <SolidColorBrush x:Key="SectionDefaultBrush" Color="Green" />
  </Page.Resources>

  <ViewBox>
    <Canvas>
      <TextBlock Text="Some text" Foreground="{ ThemeResource SectionDefaultBrush }" Canvas.Left="130" TextWrapping="Wrap" Canvas.Top="252" Height="177" Width="507" FontFamily="Myriad Pro"  FontSize="54" />
      <Button Content="Click me" Style="{ ThemeResource NavigationButtonStyle }" Canvas.Left="130" Canvas.Top="900" Width="507" Height="48" />
    </Canvas>
  <ViewBox>

In this example, the TextBlock's text color is green as expected (and red if I remove the Brush from Page.Resources), but the Button's content remains red. Is there a way to tell the template to use the final color ?

Answer 1

The app's resource dictionary doesn't know about other dictionaries and unlike with WPF's DynamicResources - StaticResource isn't reevaluated and ThemeResource is, but I think only when the actual theme changes. The way you can customize the color of that button is to use TemplateBinding in the template and bind to say the Foreground property of the button and also set that in the Foreground Setter of your button style to {StaticResource SectionDefaultBrush}. Then in your page you can override that by setting the Foreground of the button to a different value or using a derived button style that changes the Foreground value.

Ideally too - you should define theme resources in your dictionary so the brushes change depending on OS theme (especially high contrast). You might want to name your brush then as "SectionDefaultThemeBrush" instead of just "SectionDefaultBrush".