From fbee3293862dde9bb7a8be4010d0d299cc3ab745 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Thu, 25 Sep 2025 16:15:02 +0200
Subject: [PATCH 1/6] Lower the opacity of a BitmapIcon when card is Disabled

---
 .../SettingsControls/src/SettingsCard/SettingsCard.cs       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.cs b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
index dbc4f12e2..abf487386 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.cs
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
@@ -228,6 +228,12 @@ private void OnIsClickEnabledChanged()
     private void OnIsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
     {
         VisualStateManager.GoToState(this, IsEnabled ? NormalState : DisabledState, true);
+
+        // The Disabled visual state will only set the right Foreground brush, but for images we need to lower the opacity so it looks disabled.
+        if (HeaderIcon is BitmapIcon && GetTemplateChild(HeaderIconPresenterHolder) is FrameworkElement headerIconPresenter)
+        {
+            headerIconPresenter.Opacity = IsEnabled ? 1 : 0.4;
+        }
     }
 
     private void OnActionIconChanged()

From 243f478a3e6486ad7a7110e3ab882e76265aea06 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Sun, 28 Sep 2025 12:40:44 +0200
Subject: [PATCH 2/6] Using VisualStates vs codebehind

---
 .../SettingsControls/src/SettingsCard/SettingsCard.cs | 11 +++++++++--
 .../src/SettingsCard/SettingsCard.xaml                | 11 +++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.cs b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
index abf487386..f514ba104 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.cs
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
@@ -21,6 +21,9 @@ namespace CommunityToolkit.WinUI.Controls;
 [TemplateVisualState(Name = PressedState, GroupName = CommonStates)]
 [TemplateVisualState(Name = DisabledState, GroupName = CommonStates)]
 
+[TemplateVisualState(Name = BitmapHeaderIconEnabledState, GroupName = CommonStates)]
+[TemplateVisualState(Name = BitmapHeaderIconDisabledState, GroupName = CommonStates)]
+
 [TemplateVisualState(Name = RightState, GroupName = ContentAlignmentStates)]
 [TemplateVisualState(Name = RightWrappedState, GroupName = ContentAlignmentStates)]
 [TemplateVisualState(Name = RightWrappedNoIconState, GroupName = ContentAlignmentStates)]
@@ -38,6 +41,10 @@ public partial class SettingsCard : ButtonBase
     internal const string PressedState = "Pressed";
     internal const string DisabledState = "Disabled";
 
+    internal const string BitmapHeaderIconStates = "BitmapHeaderIconStates";
+    internal const string BitmapHeaderIconEnabledState = "BitmapHeaderIconEnabled";
+    internal const string BitmapHeaderIconDisabledState = "BitmapHeaderIconDisabled";
+
     internal const string ContentAlignmentStates = "ContentAlignmentStates";
     internal const string RightState = "Right";
     internal const string RightWrappedState = "RightWrapped";
@@ -230,9 +237,9 @@ private void OnIsEnabledChanged(object sender, DependencyPropertyChangedEventArg
         VisualStateManager.GoToState(this, IsEnabled ? NormalState : DisabledState, true);
 
         // The Disabled visual state will only set the right Foreground brush, but for images we need to lower the opacity so it looks disabled.
-        if (HeaderIcon is BitmapIcon && GetTemplateChild(HeaderIconPresenterHolder) is FrameworkElement headerIconPresenter)
+        if (HeaderIcon is BitmapIcon)
         {
-            headerIconPresenter.Opacity = IsEnabled ? 1 : 0.4;
+            VisualStateManager.GoToState(this, IsEnabled ? BitmapHeaderIconEnabledState : BitmapHeaderIconDisabledState, true);
         }
     }
 
diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
index 3d2e4dd3a..280caf7b4 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
@@ -109,6 +109,7 @@
     <x:Double x:Key="SettingsCardVerticalHeaderContentSpacing">8</x:Double>
     <x:Double x:Key="SettingsCardWrapThreshold">476</x:Double>
     <x:Double x:Key="SettingsCardWrapNoIconThreshold">286</x:Double>
+    <x:Double x:Key="SettingsCardBitmapIconDisabledOpacity">0.4</x:Double>
 
     <Style BasedOn="{StaticResource DefaultSettingsCardStyle}"
            TargetType="local:SettingsCard" />
@@ -294,6 +295,16 @@
                                     </VisualState>
                                 </VisualStateGroup>
 
+                                <!--  These states are only relevant if a BitmapIcon is used as HeaderIcon or ActionIcon.  -->
+                                <VisualStateGroup x:Name="BitmapHeaderIconStates">
+                                    <VisualState x:Name="BitmapHeaderIconEnabled" />
+                                    <VisualState x:Name="BitmapHeaderIconDisabled">
+                                        <VisualState.Setters>
+                                            <Setter Target="PART_HeaderIconPresenterHolder.Opacity" Value="{StaticResource SettingsCardBitmapIconDisabledOpacity}" />
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                </VisualStateGroup>
+
                                 <VisualStateGroup x:Name="ContentAlignmentStates">
                                     <!--  Default  -->
                                     <VisualState x:Name="Right" />

From a30fac42bf0c51f093a327636d39873c8a7f8e09 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Mon, 29 Sep 2025 09:26:48 +0200
Subject: [PATCH 3/6] Fixes

Co-Authored-By: Andrew KeepCoding <andrewkeepcoding@gmail.com>
---
 .../SettingsControls/src/SettingsCard/SettingsCard.cs       | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.cs b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
index f514ba104..064e87653 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.cs
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
@@ -2,8 +2,6 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
-using System.ComponentModel.Design;
-
 namespace CommunityToolkit.WinUI.Controls;
 
 /// <summary>
@@ -21,8 +19,8 @@ namespace CommunityToolkit.WinUI.Controls;
 [TemplateVisualState(Name = PressedState, GroupName = CommonStates)]
 [TemplateVisualState(Name = DisabledState, GroupName = CommonStates)]
 
-[TemplateVisualState(Name = BitmapHeaderIconEnabledState, GroupName = CommonStates)]
-[TemplateVisualState(Name = BitmapHeaderIconDisabledState, GroupName = CommonStates)]
+[TemplateVisualState(Name = BitmapHeaderIconEnabledState, GroupName = BitmapHeaderIconStates)]
+[TemplateVisualState(Name = BitmapHeaderIconDisabledState, GroupName = BitmapHeaderIconStates)]
 
 [TemplateVisualState(Name = RightState, GroupName = ContentAlignmentStates)]
 [TemplateVisualState(Name = RightWrappedState, GroupName = ContentAlignmentStates)]

From 5311dec71540fa7821ae2c96d0dd372154479dfe Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Mon, 29 Sep 2025 09:27:47 +0200
Subject: [PATCH 4/6] More tweaks

Co-Authored-By: Andrew KeepCoding <andrewkeepcoding@gmail.com>
---
 components/SettingsControls/src/SettingsCard/SettingsCard.cs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.cs b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
index 064e87653..028250ec0 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.cs
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
@@ -81,7 +81,7 @@ protected override void OnApplyTemplate()
         CheckInitialVisualState();
         SetAccessibleContentName();
         RegisterPropertyChangedCallback(ContentProperty, OnContentChanged);
-        IsEnabledChanged += OnIsEnabledChanged;     
+        IsEnabledChanged += OnIsEnabledChanged;
     }
 
     private void CheckInitialVisualState()
@@ -188,7 +188,6 @@ private void Control_PointerCanceled(object sender, PointerRoutedEventArgs e)
     /// </summary>
     protected override void OnPointerPressed(PointerRoutedEventArgs e)
     {
-        //  e.Handled = true;
         if (IsClickEnabled)
         {
             base.OnPointerPressed(e);

From 5f2cfd25006c158f3f5263b355c9d89e26dfefe7 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Thu, 2 Oct 2025 22:34:54 +0200
Subject: [PATCH 5/6] Update SettingsCard.cs

---
 .../src/SettingsCard/SettingsCard.cs                 | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.cs b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
index 028250ec0..4a0f6c183 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.cs
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
@@ -94,6 +94,8 @@ private void CheckInitialVisualState()
             CheckVerticalSpacingState(contentAlignmentStatesGroup.CurrentState);
             contentAlignmentStatesGroup.CurrentStateChanged += this.ContentAlignmentStates_Changed;
         }
+
+        CheckHeaderIconState();
     }
 
     // We automatically set the AutomationProperties.Name of the Content if not configured.
@@ -234,6 +236,14 @@ private void OnIsEnabledChanged(object sender, DependencyPropertyChangedEventArg
         VisualStateManager.GoToState(this, IsEnabled ? NormalState : DisabledState, true);
 
         // The Disabled visual state will only set the right Foreground brush, but for images we need to lower the opacity so it looks disabled.
+        if (HeaderIcon is BitmapIcon)
+        {
+            CheckHeaderIconState();
+        }
+    }
+    
+    private void CheckHeaderIconState()
+    {
         if (HeaderIcon is BitmapIcon)
         {
             VisualStateManager.GoToState(this, IsEnabled ? BitmapHeaderIconEnabledState : BitmapHeaderIconDisabledState, true);
@@ -250,7 +260,7 @@ private void OnActionIconChanged()
             }
             else
             {
-                actionIconPresenter.Visibility =Visibility.Collapsed;
+                actionIconPresenter.Visibility = Visibility.Collapsed;
             }
         }
     }

From 17ad7abb608db9c796aa6e2217d2cfb92ed9e788 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Thu, 2 Oct 2025 22:37:01 +0200
Subject: [PATCH 6/6] Update SettingsCard.cs

---
 .../SettingsControls/src/SettingsCard/SettingsCard.cs     | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.cs b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
index 4a0f6c183..ef1d4a09e 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.cs
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
@@ -235,15 +235,13 @@ private void OnIsEnabledChanged(object sender, DependencyPropertyChangedEventArg
     {
         VisualStateManager.GoToState(this, IsEnabled ? NormalState : DisabledState, true);
 
-        // The Disabled visual state will only set the right Foreground brush, but for images we need to lower the opacity so it looks disabled.
-        if (HeaderIcon is BitmapIcon)
-        {
-            CheckHeaderIconState();
-        }
+        CheckHeaderIconState();
     }
     
     private void CheckHeaderIconState()
     {
+        // The Disabled visual state will only set the right Foreground brush, but for images we need to lower the opacity so it looks disabled.
+        
         if (HeaderIcon is BitmapIcon)
         {
             VisualStateManager.GoToState(this, IsEnabled ? BitmapHeaderIconEnabledState : BitmapHeaderIconDisabledState, true);