Skip to content

Commit ec1af57

Browse files
authored
Fix TabControl foreground color (#2639)
* WIP Work on fixing tab control styles * Fixes 2602 Addresses issues with tab control foreground not being set.
1 parent d197248 commit ec1af57

File tree

4 files changed

+74
-26
lines changed

4 files changed

+74
-26
lines changed

MainDemo.Wpf/Tabs.xaml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -327,10 +327,10 @@
327327
<materialDesign:Card>
328328
<TabControl HorizontalContentAlignment="Left">
329329
<TabItem Header="TAB1">
330-
<TextBlock Margin="8" Text="Full-width example tab 1" />
330+
<TextBlock Margin="8" Text="Not filled example tab 1" />
331331
</TabItem>
332332
<TabItem Header="TAB 2">
333-
<TextBlock Margin="8" Text="Full-width example tab 2" />
333+
<TextBlock Margin="8" Text="No filled example tab 2" />
334334
</TabItem>
335335
</TabControl>
336336
</materialDesign:Card>
@@ -353,10 +353,10 @@
353353
<materialDesign:Card>
354354
<TabControl HorizontalContentAlignment="Left" materialDesign:ColorZoneAssist.Mode="SecondaryMid">
355355
<TabItem Header="TAB1">
356-
<TextBlock Margin="8" Text="Full-width secondary example tab 1" />
356+
<TextBlock Margin="8" Text="Not filled secondary example tab 1" />
357357
</TabItem>
358358
<TabItem Header="TAB 2">
359-
<TextBlock Margin="8" Text="Full-width secondary example tab 2" />
359+
<TextBlock Margin="8" Text="Not filled secondary example tab 2" />
360360
</TabItem>
361361
</TabControl>
362362
</materialDesign:Card>

MaterialDesignThemes.UITests/MaterialDesignSpec.cs

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,27 @@
33
using MaterialDesignColors.ColorManipulation;
44
using Xunit;
55

6-
namespace MaterialDesignThemes.UITests
6+
namespace MaterialDesignThemes.UITests;
7+
8+
public static class MaterialDesignSpec
79
{
8-
public static class MaterialDesignSpec
9-
{
10-
/// <summary>
11-
/// Small text 4.5:1 against the background
12-
/// https://www.material.io/design/usability/accessibility.html#color-and-contrast
13-
/// </summary>
14-
public const double MinimumContrastSmallText = 4.5;
10+
/// <summary>
11+
/// Small text 4.5:1 against the background
12+
/// https://www.material.io/design/usability/accessibility.html#color-and-contrast
13+
/// </summary>
14+
public const double MinimumContrastSmallText = 4.5;
1515

16-
/// <summary>
17-
/// Large text (at 14 pt bold/18 pt regular and up) and graphics 3:1 against the background
18-
/// https://www.material.io/design/usability/accessibility.html#color-and-contrast
19-
/// </summary>
20-
public const double MinimumContrastLargeText = 3.0;
16+
/// <summary>
17+
/// Large text (at 14 pt bold/18 pt regular and up) and graphics 3:1 against the background
18+
/// https://www.material.io/design/usability/accessibility.html#color-and-contrast
19+
/// </summary>
20+
public const double MinimumContrastLargeText = 3.0;
2121

22-
public static void AssertContrastRatio(Color foreground, Color background, double minimumContrastRatio)
23-
{
24-
const double tollerance = 0.1;
25-
26-
var ratio = ColorAssist.ContrastRatio(foreground, background);
27-
Assert.True(ratio >= minimumContrastRatio - tollerance, $"Contrast ratio '{ratio}' is less than {minimumContrastRatio} with a tollerance of 0.1");
28-
}
22+
public static void AssertContrastRatio(Color foreground, Color background, double minimumContrastRatio)
23+
{
24+
const double tollerance = 0.1;
25+
26+
var ratio = ColorAssist.ContrastRatio(foreground, background);
27+
Assert.True(ratio >= minimumContrastRatio - tollerance, $"Contrast ratio '{ratio}' is less than {minimumContrastRatio} with a tollerance of 0.1");
2928
}
3029
}
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
using System.ComponentModel;
2+
using System.Threading.Tasks;
3+
using System.Windows.Controls;
4+
using System.Windows.Media;
5+
using XamlTest;
6+
using Xunit;
7+
using Xunit.Abstractions;
8+
9+
namespace MaterialDesignThemes.UITests.WPF.TabControls;
10+
11+
public class TabControlTests : TestBase
12+
{
13+
public TabControlTests(ITestOutputHelper output)
14+
: base(output)
15+
{ }
16+
17+
[Fact]
18+
[Description("Issue 2602")]
19+
public async Task OnLoad_ThemeBrushesSet()
20+
{
21+
await using var recorder = new TestRecorder(App);
22+
23+
//Arrange
24+
IVisualElement<TabControl> tabControl = await LoadXaml<TabControl>(@"
25+
<TabControl
26+
materialDesign:ColorZoneAssist.Mode=""PrimaryMid""
27+
Style=""{StaticResource MaterialDesignFilledTabControl}"">
28+
<TabItem Header=""TAB 1"">
29+
<TextBlock Margin=""8"" Text=""PrimaryMid Tab 1"" />
30+
</TabItem>
31+
<TabItem Header=""TAB 2"">
32+
<TextBlock Margin=""8"" Text=""PrimaryMid Tab 2"" />
33+
</TabItem>
34+
</TabControl> ");
35+
36+
IVisualElement<TextBlock> textBlock = await tabControl.GetElement<TextBlock>(@"/TabItem[0]/TextBlock[0]");
37+
38+
//Act
39+
Color? foreground = await textBlock.GetForegroundColor();
40+
Color? background = await textBlock.GetEffectiveBackground();
41+
42+
//Assert
43+
Assert.NotNull(foreground);
44+
Assert.NotNull(background);
45+
46+
MaterialDesignSpec.AssertContrastRatio(foreground.Value, background.Value, MaterialDesignSpec.MinimumContrastSmallText);
47+
48+
recorder.Success();
49+
}
50+
}

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,7 @@
177177
<Style x:Key="MaterialDesignTabItem" TargetType="{x:Type TabItem}">
178178
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
179179

180+
<Setter Property="Background" Value="{x:Null}" />
180181
<!-- Foreground is for the content, not the header -->
181182
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}" />
182183

@@ -196,9 +197,7 @@
196197
<wpf:ColorZone
197198
HorizontalAlignment="Stretch"
198199
VerticalAlignment="Stretch"
199-
Background="{TemplateBinding wpf:ColorZoneAssist.Background}"
200200
Focusable="False"
201-
Foreground="{TemplateBinding wpf:ColorZoneAssist.Foreground}"
202201
Mode="{TemplateBinding wpf:ColorZoneAssist.Mode}">
203202
<wpf:Ripple
204203
x:Name="contentPresenter"

0 commit comments

Comments
 (0)