Fix TabControl foreground color (#2639)

* WIP Work on fixing tab control styles * Fixes 2602 Addresses issues with tab control foreground not being set.
MaterialDesignInXAML · Apr 3, 2022 · ec1af57 · ec1af57
1 parent d197248
commit ec1af57
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 26 deletions.
diff --git a/MainDemo.Wpf/Tabs.xaml b/MainDemo.Wpf/Tabs.xaml
@@ -327,10 +327,10 @@
                 <materialDesign:Card>
                     <TabControl HorizontalContentAlignment="Left">
                         <TabItem Header="TAB1">
-                            <TextBlock Margin="8" Text="Full-width example tab 1" />
+                            <TextBlock Margin="8" Text="Not filled example tab 1" />
                         </TabItem>
                         <TabItem Header="TAB 2">
-                            <TextBlock Margin="8" Text="Full-width example tab 2" />
+                            <TextBlock Margin="8" Text="No filled example tab 2" />
                         </TabItem>
                     </TabControl>
                 </materialDesign:Card>
@@ -353,10 +353,10 @@
                 <materialDesign:Card>
                     <TabControl HorizontalContentAlignment="Left" materialDesign:ColorZoneAssist.Mode="SecondaryMid">
                         <TabItem Header="TAB1">
-                            <TextBlock Margin="8" Text="Full-width secondary example tab 1" />
+                            <TextBlock Margin="8" Text="Not filled secondary example tab 1" />
                         </TabItem>
                         <TabItem Header="TAB 2">
-                            <TextBlock Margin="8" Text="Full-width secondary example tab 2" />
+                            <TextBlock Margin="8" Text="Not filled secondary example tab 2" />
                         </TabItem>
                     </TabControl>
                 </materialDesign:Card>

diff --git a/MaterialDesignThemes.UITests/MaterialDesignSpec.cs b/MaterialDesignThemes.UITests/MaterialDesignSpec.cs
@@ -3,28 +3,27 @@
 using MaterialDesignColors.ColorManipulation;
 using Xunit;
 
-namespace MaterialDesignThemes.UITests
+namespace MaterialDesignThemes.UITests;
+
+public static class MaterialDesignSpec
 {
-    public static class MaterialDesignSpec
-    {
-        /// <summary>
-        /// Small text 4.5:1 against the background
-        /// https://www.material.io/design/usability/accessibility.html#color-and-contrast
-        /// </summary>
-        public const double MinimumContrastSmallText = 4.5;
+    /// <summary>
+    /// Small text 4.5:1 against the background
+    /// https://www.material.io/design/usability/accessibility.html#color-and-contrast
+    /// </summary>
+    public const double MinimumContrastSmallText = 4.5;
 
-        /// <summary>
-        /// Large text (at 14 pt bold/18 pt regular and up) and graphics 3:1 against the background
-        /// https://www.material.io/design/usability/accessibility.html#color-and-contrast
-        /// </summary>
-        public const double MinimumContrastLargeText = 3.0;
+    /// <summary>
+    /// Large text (at 14 pt bold/18 pt regular and up) and graphics 3:1 against the background
+    /// https://www.material.io/design/usability/accessibility.html#color-and-contrast
+    /// </summary>
+    public const double MinimumContrastLargeText = 3.0;
 
-        public static void AssertContrastRatio(Color foreground, Color background, double minimumContrastRatio)
-        {
-            const double tollerance = 0.1;
-
-            var ratio = ColorAssist.ContrastRatio(foreground, background);
-            Assert.True(ratio >= minimumContrastRatio - tollerance, $"Contrast ratio '{ratio}' is less than {minimumContrastRatio} with a tollerance of 0.1");
-        }
+    public static void AssertContrastRatio(Color foreground, Color background, double minimumContrastRatio)
+    {
+        const double tollerance = 0.1;
+
+        var ratio = ColorAssist.ContrastRatio(foreground, background);
+        Assert.True(ratio >= minimumContrastRatio - tollerance, $"Contrast ratio '{ratio}' is less than {minimumContrastRatio} with a tollerance of 0.1");
     }
 }
diff --git a/MaterialDesignThemes.UITests/WPF/TabControls/TabControlTests.cs b/MaterialDesignThemes.UITests/WPF/TabControls/TabControlTests.cs
@@ -0,0 +1,50 @@
+using System.ComponentModel;
+using System.Threading.Tasks;
+using System.Windows.Controls;
+using System.Windows.Media;
+using XamlTest;
+using Xunit;
+using Xunit.Abstractions;
+
+namespace MaterialDesignThemes.UITests.WPF.TabControls;
+
+public class TabControlTests : TestBase
+{
+    public TabControlTests(ITestOutputHelper output)
+        : base(output)
+    { }
+
+    [Fact]
+    [Description("Issue 2602")]
+    public async Task OnLoad_ThemeBrushesSet()
+    {
+        await using var recorder = new TestRecorder(App);
+
+        //Arrange
+        IVisualElement<TabControl> tabControl = await LoadXaml<TabControl>(@"
+<TabControl 
+        materialDesign:ColorZoneAssist.Mode=""PrimaryMid""
+        Style=""{StaticResource MaterialDesignFilledTabControl}"">
+    <TabItem Header=""TAB 1"">
+        <TextBlock Margin=""8"" Text=""PrimaryMid Tab 1"" />
+    </TabItem>
+    <TabItem Header=""TAB 2"">
+        <TextBlock Margin=""8"" Text=""PrimaryMid Tab 2"" />
+    </TabItem>
+</TabControl> ");
+
+        IVisualElement<TextBlock> textBlock = await tabControl.GetElement<TextBlock>(@"/TabItem[0]/TextBlock[0]");
+
+        //Act
+        Color? foreground = await textBlock.GetForegroundColor();
+        Color? background = await textBlock.GetEffectiveBackground();
+
+        //Assert
+        Assert.NotNull(foreground);
+        Assert.NotNull(background);
+
+        MaterialDesignSpec.AssertContrastRatio(foreground.Value, background.Value, MaterialDesignSpec.MinimumContrastSmallText);
+
+        recorder.Success();
+    }
+}
diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml
@@ -177,6 +177,7 @@
     <Style x:Key="MaterialDesignTabItem" TargetType="{x:Type TabItem}">
         <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
 
+        <Setter Property="Background" Value="{x:Null}" />
         <!--  Foreground is for the content, not the header  -->
         <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}" />
 
@@ -196,9 +197,7 @@
                         <wpf:ColorZone
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
-                            Background="{TemplateBinding wpf:ColorZoneAssist.Background}"
                             Focusable="False"
-                            Foreground="{TemplateBinding wpf:ColorZoneAssist.Foreground}"
                             Mode="{TemplateBinding wpf:ColorZoneAssist.Mode}">
                             <wpf:Ripple
                                 x:Name="contentPresenter"