RadioButtons: Fix header not having correct color when disabled (micr…

…osoft/microsoft-ui-xaml#3358)
Kinnara · Oct 25, 2020 · 76e1899 · 76e1899
1 parent 89bc3d6
commit 76e1899
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 3 deletions.
diff --git a/ModernWpf.Controls/RadioButtons/RadioButtons.cs b/ModernWpf.Controls/RadioButtons/RadioButtons.cs
@@ -36,6 +36,8 @@ public RadioButtons()
             PreviewKeyDown += OnChildPreviewKeyDown;
 
             m_radioButtonsElementFactory = new RadioButtonsElementFactory();
+
+            IsEnabledChanged += OnIsEnabledChanged;
         }
 
         #region ItemsSource
@@ -250,6 +252,7 @@ public override void OnApplyTemplate()
             }
 
             UpdateItemsSource();
+            UpdateVisualStateForIsEnabledChange();
         }
 
         // When focus comes from outside the RadioButtons control we will put focus on the selected radio button.
@@ -641,6 +644,11 @@ bool MoveFocus(int indexIncrement)
             return false;
         }
 
+        private void OnIsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
+        {
+            UpdateVisualStateForIsEnabledChange();
+        }
+
         public UIElement ContainerFromIndex(int index)
         {
             var repeater = m_repeater;
@@ -715,6 +723,11 @@ private void UpdateItemTemplate()
             m_radioButtonsElementFactory.UserElementFactory(ItemTemplate);
         }
 
+        private void UpdateVisualStateForIsEnabledChange()
+        {
+            VisualStateManager.GoToState(this, IsEnabled ? "Normal" : "Disabled", false);
+        }
+
         // Test Hooks helpers, only function when m_testHooksEnabled == true
         internal void SetTestHooksEnabled(bool enabled)
         {

diff --git a/ModernWpf.Controls/RadioButtons/RadioButtons.xaml b/ModernWpf.Controls/RadioButtons/RadioButtons.xaml
@@ -13,10 +13,17 @@
             <Setter.Value>
                 <ControlTemplate TargetType="local:RadioButtons">
                     <StackPanel SnapsToDevicePixels="True">
-                        <ContentPresenter
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="Disabled" />
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                        <ContentPresenter x:Name="HeaderContentPresenter"
                             Content="{TemplateBinding Header}"
                             ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            Margin="{DynamicResource RadioButtonsHeaderMargin}"
+                            TextElement.Foreground="{DynamicResource RadioButtonsHeaderForeground}"
+                            Margin="{DynamicResource RadioButtonsTopHeaderMargin}"
                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                         <local:ItemsRepeater x:Name="InnerRepeater">
                             <local:ItemsRepeater.Layout>
@@ -26,6 +33,11 @@
                             </local:ItemsRepeater.Layout>
                         </local:ItemsRepeater>
                     </StackPanel>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsEnabled" Value="False">
+                            <Setter TargetName="HeaderContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource RadioButtonsHeaderForegroundDisabled}" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>

diff --git a/ModernWpf/ControlsResources.xaml b/ModernWpf/ControlsResources.xaml
@@ -63,7 +63,7 @@
     <sys:Double x:Key="TextControlThemeMinHeight">32</sys:Double>
     <Thickness x:Key="NumberBoxSpinButtonBorderThickness">0,1,1,1</Thickness>
     <Thickness x:Key="NumberBoxIconMargin">10,0,0,0</Thickness>
-    <Thickness x:Key="RadioButtonsHeaderMargin">0,0,0,4</Thickness>
+    <Thickness x:Key="RadioButtonsTopHeaderMargin">0,0,0,4</Thickness>
     <Thickness x:Key="TextControlThemePadding">10,5,6,6</Thickness>
     <Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,0</Thickness>
 

diff --git a/ModernWpf/ThemeResources/Dark.xaml b/ModernWpf/ThemeResources/Dark.xaml
@@ -1015,6 +1015,10 @@
     <m:StaticResource x:Key="RadioButtonCheckGlyphStrokePressed" ResourceKey="SystemControlTransparentBrush" />
     <m:StaticResource x:Key="RadioButtonCheckGlyphStrokeDisabled" ResourceKey="SystemControlTransparentBrush" />
 
+    <!-- Resources for RadioButtons -->
+    <m:StaticResource x:Key="RadioButtonsHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <m:StaticResource x:Key="RadioButtonsHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+
     <!-- Resources for RatingControl -->
     <m:StaticResource x:Key="RatingControlUnselectedForeground" ResourceKey="SystemControlBackgroundBaseLowBrush" />
     <m:StaticResource x:Key="RatingControlSelectedForeground" ResourceKey="SystemControlForegroundAccentBrush" />

diff --git a/ModernWpf/ThemeResources/HighContrast.xaml b/ModernWpf/ThemeResources/HighContrast.xaml
@@ -1015,6 +1015,10 @@
     <m:StaticResource x:Key="RadioButtonCheckGlyphStrokePressed" ResourceKey="SystemControlTransparentBrush" />
     <m:StaticResource x:Key="RadioButtonCheckGlyphStrokeDisabled" ResourceKey="SystemControlTransparentBrush" />
 
+    <!-- Resources for RadioButtons -->
+    <m:StaticResource x:Key="RadioButtonsHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <m:StaticResource x:Key="RadioButtonsHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+
     <!-- Resources for RatingControl -->
     <m:StaticResource x:Key="RatingControlUnselectedForeground" ResourceKey="SystemControlForegroundBaseLowBrush" />
     <m:StaticResource x:Key="RatingControlSelectedForeground" ResourceKey="SystemControlHighlightAccentBrush" />

diff --git a/ModernWpf/ThemeResources/Light.xaml b/ModernWpf/ThemeResources/Light.xaml
@@ -1015,6 +1015,10 @@
     <m:StaticResource x:Key="RadioButtonCheckGlyphStrokePressed" ResourceKey="SystemControlTransparentBrush" />
     <m:StaticResource x:Key="RadioButtonCheckGlyphStrokeDisabled" ResourceKey="SystemControlTransparentBrush" />
 
+    <!-- Resources for RadioButtons -->
+    <m:StaticResource x:Key="RadioButtonsHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <m:StaticResource x:Key="RadioButtonsHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+
     <!-- Resources for RatingControl -->
     <m:StaticResource x:Key="RatingControlUnselectedForeground" ResourceKey="SystemControlBackgroundBaseLowBrush" />
     <m:StaticResource x:Key="RatingControlSelectedForeground" ResourceKey="SystemControlForegroundAccentBrush" />

diff --git a/test/ModernWpfTestApp/ApiTests/RadioButtonsTests.cs b/test/ModernWpfTestApp/ApiTests/RadioButtonsTests.cs
@@ -10,6 +10,7 @@
 using System.Collections.Generic;
 using System.Windows.Media;
 using System.Windows;
+using System.Linq;
 
 #if USING_TAEF
 using WEX.TestExecution;
@@ -80,5 +81,45 @@ public void VerifyCustomItemTemplate()
                 Verify.IsTrue(testCondition, "The foreground color of the RadioButton should have been [blue].");
             });
         }
+
+        [TestMethod]
+        public void VerifyIsEnabledChangeUpdatesVisualState()
+        {
+            RadioButtons radioButtons = null; ;
+            VisualStateGroup commonStatesGroup = null;
+            RunOnUIThread.Execute(() =>
+            {
+                radioButtons = new RadioButtons();
+
+                // Check 1: Set IsEnabled to true.
+                radioButtons.IsEnabled = true;
+
+                Content = radioButtons;
+                Content.UpdateLayout();
+
+                var radioButtonsLayoutRoot = (FrameworkElement)VisualTreeHelper.GetChild(radioButtons, 0);
+                commonStatesGroup = VisualStateManager.GetVisualStateGroups(radioButtonsLayoutRoot).Cast<VisualStateGroup>().First(vsg => vsg.Name.Equals("CommonStates"));
+
+                Verify.AreEqual("Normal", commonStatesGroup.CurrentState.Name);
+
+                // Check 2: Set IsEnabled to false.
+                radioButtons.IsEnabled = false;
+            });
+            IdleSynchronizer.Wait();
+
+            RunOnUIThread.Execute(() =>
+            {
+                Verify.AreEqual("Disabled", commonStatesGroup.CurrentState.Name);
+
+                // Check 3: Set IsEnabled back to true.
+                radioButtons.IsEnabled = true;
+            });
+            IdleSynchronizer.Wait();
+
+            RunOnUIThread.Execute(() =>
+            {
+                Verify.AreEqual("Normal", commonStatesGroup.CurrentState.Name);
+            });
+        }
     }
 }