CODEWITHSUNDEEP
xamluwp
takje
takje

Reputation: 2800

ThemeResource in Style isn't used when I build my UWP app

I am trying to make a rectangle that changes color after a tapped event. It should cycle between a disabled mode (gray) and the accent color. I am trying to do this using styles. When I use (a shade of) the accent color in the XAML code {ThemeResource SystemControlHighlightAltListAccentHighBrush} it correctly shows the accent color. It also shows the correct colors in the designer (Visual Studio). However, if I use the theme colors in a resource dictionary, it replaces them by grayish or no colors in my app (after build). This is my ResourceDictionary:

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:I_have_never">
    <!--Disabled-->
    <Style TargetType="RelativePanel" x:Key="Disabled">
        <Setter Property="Tag">
            <Setter.Value>0</Setter.Value>
        </Setter>
        <Setter Property="Margin">
            <Setter.Value>30,15,30,15</Setter.Value>
        </Setter>
        <Setter Property="Background">
            <Setter.Value>{ThemeResource SystemControlBackgroundListLowBrush}    </Setter.Value>
        </Setter>
    </Style>

    <!--Enabled-->
    <Style TargetType="RelativePanel" x:Key="Enabled">
        <Setter Property="Tag">
            <Setter.Value>2</Setter.Value>
        </Setter>
        <Setter Property="Margin">
            <Setter.Value>30,15,30,15</Setter.Value>
        </Setter>
        <Setter Property="Background">
            <Setter.Value>{ThemeResource SystemControlHighlightAltListAccentHighBrush}</Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

This is my XAML code:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="150" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <RelativePanel Name="Category1"
                           Grid.Row="0" 
                           Grid.Column="0"
                           Tapped="ToggleStatus" 
                           Style="{StaticResource Enabled}">
    </RelativePanel>
</Grid>

And this is my C# code to toggle between the styles:

private void ToggleStatus(object sender, RoutedEventArgs e)
    {
        RelativePanel panel = sender as RelativePanel;

        if ((string)panel.Tag == "0")
        {
            panel.Style = (Style)App.Current.Resources["Enabled"]; // Tag = 1
        }
        else if ((string)panel.Tag == "1")
        {
            panel.Style = (Style)App.Current.Resources["Disabled"]; // Tag = 2
        }
    }

In the design view this works great. It nicely shows the grey or accent color backgrounds. However, when I build this, no colors are shown.

It does show colors as long as I use real colors (e.g. Gray) instead of the ThemeResource. It also works if I use the ThemeResource straight in the XAML code (no styles). Why does it only work in the designer? Why does it not work if I use the ThemeResource in the styles? And how could I fix this?

Upvotes: 0

Views: 516

Answers (1)

Jerry Li
Jerry Li

Reputation: 1042

Why does it not work if I use the ThemeResource in the styles? And how could I fix this?

You are using XAML Property Element Usage Syntax to set the extensionUsage (i.e. {ThemeResource} or {StaticResource}) to Setter.Value property in the styles:

<Setter ...>
  <Setter.Value>
    objectValue
  </Setter.Value>
</Setter>

According to the Syntax part of the official documentation Setter.Value property, when setting an extensionUsage (i.e. {ThemeResource} or {StaticResource}) to Setter.Value property in the styles, we should use XAML Attribute Usage Syntax instead of using XAML Property Element Usage Syntax:

<Setter Property="propertyName" Value="extensionUsage"/>

So you should use the following code to set the Background with {ThemeResource} in the styles:

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ThemeResourceInStyle">

<!--Disabled-->
<Style TargetType="RelativePanel" x:Key="Disabled">
    <Setter Property="Tag">
        <Setter.Value>0</Setter.Value>
    </Setter>
    <Setter Property="Margin">
        <Setter.Value>30,15,30,15</Setter.Value>
    </Setter>
    <!--use XAML Attribute Usage Syntax to set extensionUsage -->
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundListLowBrush}" />
</Style>

<!--Enabled-->
<Style TargetType="RelativePanel" x:Key="Enabled">
    <Setter Property="Tag">
        <Setter.Value>1</Setter.Value>
    </Setter>
    <Setter Property="Margin">
        <Setter.Value>30,15,30,15</Setter.Value>
    </Setter>
    <!--use XAML Attribute Usage Syntax to set extensionUsage -->
    <Setter Property="Background" Value="{ThemeResource SystemControlHighlightAltListAccentHighBrush}" />
</Style>
</ResourceDictionary>

Upvotes: 1

Related Questions