Cannot find a Resource with the Name/Key TitleBarPaneToggleButtonForegroundDisabled

[SuGar0218]

Describe the bug

Set IsEnabled=false on a Button with Style="{ThemeResource TitleBarPaneToggleButtonStyle}", and an unhandled exception is thrown with message "Cannot find a Resource with the Name/Key TitleBarPaneToggleButtonForegroundDisabled".

Why is this important?

Sometimes disabling a element cannot be replaced with hiding it. IsEnabled is a commonly used property, but setting IsEnabled causes exception.

In my project, I want to show a ContentDialog and disable elements behind, which is of help to enhance visual effect.

Steps to reproduce the bug

1. Add a Button with Style="{ThemeResource TitleBarPaneToggleButtonStyle}" to a page.
2. Add IsEnabled="False" to the button.
3. Run the application in debug mode (F5).

<Button
    IsEnabled="False"
    Style="{ThemeResource TitleBarPaneToggleButtonStyle}" />

Actual behavior

After the application launched, Visual Studio shows an unhandled exception in App.g.i.cs at here:

UnhandledException += (sender, e) =>
{
    if (global::System.Diagnostics.Debugger.IsAttached) global::System.Diagnostics.Debugger.Break();
};

The parameter e has the message "Cannot find a Resource with the Name/Key TitleBarPaneToggleButtonForegroundDisabled".

Expected behavior

There should not be any exceptions and the button should be disabled normally.

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 1.7.3: 1.7.250606001

Windows version

Windows 11 (24H2): Build 26100

Additional context

In Visual Studio, I pressed F12 and found the definitions of TitleBarPaneToggleButtonStyle and TitleBarPaneToggleButtonBackgroundDisabled.

TitleBarPaneToggleButtonBackgroundDisabled is used in VisualStateManager of TitleBarPaneToggleButtonStyle.

But TitleBarPaneToggleButtonBackgroundDisabled does exist in generic.xaml:

<ResourceDictionary x:Key="Default">
    <StaticResource x:Key="TitleBarPaneToggleButtonBackgroundDisabled" ResourceKey="ControlFillColorDisabledBrush" />
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
    <StaticResource x:Key="TitleBarPaneToggleButtonBackgroundDisabled" ResourceKey="ControlFillColorDisabledBrush" />
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
    <StaticResource x:Key="TitleBarPaneToggleButtonBackgroundDisabled" ResourceKey="ControlFillColorDisabledBrush" />
</ResourceDictionary>

[Zakariathr22]

Root Cause

1. Storyboard targeting wrong property

• In the style TitleBarPaneToggleButtonStyle, inside the Disabled visual state, the Storyboard was trying to animate:
  

  microsoft-ui-xaml/src/controls/dev/TitleBar/TitleBar_themeresources.xaml

  Line 227 in adae194

  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Background">

• The Content was an AnimatedIcon, which does not have a Background property.
• At runtime, WinUI throws an exception because the property path is invalid.

2. Missing ThemeResource

• There was no built-in TitleBarPaneToggleButtonForegroundDisabled resource in WinUI.
  

  microsoft-ui-xaml/src/controls/dev/TitleBar/TitleBar_themeresources.xaml

  Line 231 in adae194

  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TitleBarPaneToggleButtonForegroundDisabled}" />

• When the storyboard tried to use it, the system failed to resolve it.

Temporary Workaround

<?xml version="1.0" encoding="utf-8"?>
<Page
    x:Class="App2.MyPage"
    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"
    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
    mc:Ignorable="d">
    
    <Page.Resources>
        <!-- Added missing disabled foreground brush -->
        <!-- WinUI doesn't define TitleBarPaneToggleButtonForegroundDisabled by default,
         so we create our own, based on TextFillColorDisabled -->
        <SolidColorBrush x:Key="TitleBarPaneToggleButtonForegroundDisabled"
                 Color="{ThemeResource TextFillColorDisabled}" />
        
        <Style x:Key="NewTitleBarPaneToggleButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="{ThemeResource TitleBarPaneToggleButtonBackground}" />
            <Setter Property="Foreground" Value="{ThemeResource TitleBarPaneToggleButtonForeground}" />
            <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Width" Value="{ThemeResource TitleBarPaneToggleButtonWidth}" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
            <Setter Property="Content" Value="&#xE700;" />
            <Setter Property="Margin" Value="2" />
            <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TitleBarPaneToggleButtonBackgroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TitleBarPaneToggleButtonForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                        <VisualState.Setters>
                                            <Setter Target="Content.(AnimatedIcon.State)" Value="PointerOver" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TitleBarPaneToggleButtonBackgroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TitleBarPaneToggleButtonForegroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                        <VisualState.Setters>
                                            <Setter Target="Content.(AnimatedIcon.State)" Value="Pressed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <!-- FIX #1:
                                             Background is now applied to RootGrid (which supports it),
                                             not to AnimatedIcon -->
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TitleBarPaneToggleButtonBackgroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            
                                            <!-- FIX #2:
                                             Foreground now uses the new custom resource -->
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TitleBarPaneToggleButtonForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>

                                        <!-- Optional: reset AnimatedIcon state -->
                                        <VisualState.Setters>
                                            <Setter Target="Content.(AnimatedIcon.State)" Value="Normal" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <AnimatedIcon x:Name="Content" Height="16" Width="16" AnimatedIcon.State="Normal" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw">
                                <animatedvisuals:AnimatedGlobalNavigationButtonVisualSource />
                                <AnimatedIcon.FallbackIconSource>
                                    <FontIconSource FontSize="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontSize}" FontFamily="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontFamily}" Glyph="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" MirroredWhenRightToLeft="True" />
                                </AnimatedIcon.FallbackIconSource>
                            </AnimatedIcon>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid>
        <Button Style="{StaticResource NewTitleBarPaneToggleButtonStyle}" IsEnabled="False" />
    </Grid>
</Page>

Summary

• Crash cause 1: Trying to set Background on an AnimatedIcon (invalid property).
• Fix 1: Target the Grid (RootGrid.Background) instead.
• Crash cause 2: Missing resource TitleBarPaneToggleButtonForegroundDisabled.
• Fix 2: Define your own brush (e.g., TextFillColorDisabled).