Lower the opacity of a BitmapIcon when card is Disabled (#732)

* Lower the opacity of a BitmapIcon when card is Disabled

* Using VisualStates vs codebehind

* Fixes

Co-Authored-By: Andrew KeepCoding <andrewkeepcoding@gmail.com>

* More tweaks

Co-Authored-By: Andrew KeepCoding <andrewkeepcoding@gmail.com>

* Update SettingsCard.cs

* Update SettingsCard.cs

---------

Co-authored-by: Andrew KeepCoding <andrewkeepcoding@gmail.com>
Co-authored-by: Arlo <arlo.godfrey@outlook.com>

Author: 3 people

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,6 +19,9 @@ namespace CommunityToolkit.WinUI.Controls;
 [TemplateVisualState(Name = PressedState, GroupName = CommonStates)]
 [TemplateVisualState(Name = DisabledState, GroupName = CommonStates)]
 
+[TemplateVisualState(Name = BitmapHeaderIconEnabledState, GroupName = BitmapHeaderIconStates)]
+[TemplateVisualState(Name = BitmapHeaderIconDisabledState, GroupName = BitmapHeaderIconStates)]
+
 [TemplateVisualState(Name = RightState, GroupName = ContentAlignmentStates)]
 [TemplateVisualState(Name = RightWrappedState, GroupName = ContentAlignmentStates)]
 [TemplateVisualState(Name = RightWrappedNoIconState, GroupName = ContentAlignmentStates)]
@@ -38,6 +39,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";
@@ -76,7 +81,7 @@ protected override void OnApplyTemplate()
         CheckInitialVisualState();
         SetAccessibleContentName();
         RegisterPropertyChangedCallback(ContentProperty, OnContentChanged);
-        IsEnabledChanged += OnIsEnabledChanged;     
+        IsEnabledChanged += OnIsEnabledChanged;
     }
 
     private void CheckInitialVisualState()
@@ -89,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.
@@ -183,7 +190,6 @@ private void Control_PointerCanceled(object sender, PointerRoutedEventArgs e)
     /// </summary>
     protected override void OnPointerPressed(PointerRoutedEventArgs e)
     {
-        //  e.Handled = true;
         if (IsClickEnabled)
         {
             base.OnPointerPressed(e);
@@ -228,6 +234,18 @@ private void OnIsClickEnabledChanged()
     private void OnIsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
     {
         VisualStateManager.GoToState(this, IsEnabled ? NormalState : DisabledState, true);
+
+        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);
+        }
     }
 
     private void OnActionIconChanged()
@@ -240,7 +258,7 @@ private void OnActionIconChanged()
             }
             else
             {
-                actionIconPresenter.Visibility =Visibility.Collapsed;
+                actionIconPresenter.Visibility = Visibility.Collapsed;
             }
         }
     }

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" />