ColorPaletteResources doesn't apply to custom control

Describe the bug Hi, I’ve tried to sort out the ColorPaletteResources and how it can be used in theming of the custom control. I found that the palette’s accent color doesn’t apply to brushes of control where used SystemAccentColor. For example <SolidColorBrush x:Key="CustomControl1BackgroundBrushFocused" Color="{ThemeResource SystemAccentColor}"/> . It works perfectly for standard controls (TextBox) and standalone brushes (which I use for a border) but doesn’t for custom control with style in Generic.xaml.

Steps to reproduce Project to reproduce ColorPalettesTest.zip MainPage.xaml

<Page
    x:Class="ColorPalettesTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ColorPalettesTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ColorPaletteResources Accent="Red"/>
            </ResourceDictionary.MergedDictionaries>
            <SolidColorBrush x:Key="MyAccentBrush" Color="{StaticResource SystemAccentColor}"/>
        </ResourceDictionary>
    </Page.Resources>

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">

        <TextBox Text="TestText" Margin="5"/>

        <Border Width="100" Height="100" Margin="5" 
                Background="{StaticResource MyAccentBrush}">
            <TextBlock Text="It's a border"/>
        </Border>

        <local:CustomControl1 Width="100" Height="100" Margin="5"/>
    </StackPanel>
</Page>

Generic.xaml

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

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <SolidColorBrush x:Key="CustomControl1BackgroundBrushFocused" Color="{ThemeResource SystemAccentColor}"/>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
    
    <Style TargetType="local:CustomControl1" >
        <Setter Property="Background" Value="{ThemeResource CustomControl1BackgroundBrushFocused}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomControl1">
                    <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Expected behavior The ColorPaletteResources should apply to the custom control.

Screenshots

Version Info

NuGet package version: [Microsoft.WinUI 3.0.0-preview3.201113.0]

Windows app type:

UWP	Win32
Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2020 Update (19041)	Yes
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context

[jschwizer99]

I observe a similar behavior when using the theme resources in the code.

<ResourceDictionary>
    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Dark">
            <SolidColorBrush x:Key="TitleBarFocusColorBrush" Color="{ThemeResource SystemAccentColorDark3}"/>
      </ResourceDictionary>
        <ResourceDictionary x:Key="Light">
            <SolidColorBrush x:Key="TitleBarFocusColorBrush" Color="{ThemeResource SystemAccentColorLight3}"/>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

I always will get the TitleBarFocusColorBrush of the Light definition independent of the sequence of definition or the app theme configuration. The following code is executed multiple times as triggered by a focus event.

	winrt::Microsoft::UI::Xaml::Media::Brush OperationEdit::FocusColor() const
	{
		// Currently we can not use {Themeresource ...} to set a propery value
		// as there seems no set change on the property.
		const auto resources = winrt::Microsoft::UI::Xaml::Application::Current().Resources();
		if (resources.HasKey(winrt::box_value(L"TitleBarFocusColorBrush")))
		{
			winrt::Windows::Foundation::IInspectable color = resources.Lookup(winrt::box_value(L"TitleBarFocusColorBrush"));
			return winrt::unbox_value<winrt::Microsoft::UI::Xaml::Media::SolidColorBrush>(color);
		}
		else
		{
			// This code is just a fall-back (is never executed)
                        return winrt::unbox_value<winrt::Microsoft::UI::Xaml::Media::Brush>(GetValue(FocusColorProperty()));
		}
	}

Originally, I’ve planned to use the FocusColor() property with a XAML definition {Themeresource …}. But it seems this will never trigger a property change (never hit a breakpoint). Instead, I tried to extract the proper brush from the resource directories directly. But in this case, I will always get the Light brush color.

Are there any updates on the ticket status?

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.