Skip to content

Commit 103ed36

Browse files
Avid29Avid29
committed
Improved ContrastHelper samples
1 parent a04eca4 commit 103ed36

File tree

6 files changed

+145
-70
lines changed

6 files changed

+145
-70
lines changed

‎components/ColorAnalyzer/samples/ContrastHelperSample.xaml‎

Lines changed: 27 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -9,74 +9,31 @@
99
xmlns:local="using:ColorAnalyzerExperiment.Samples"
1010
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
1111
mc:Ignorable="d">
12-
13-
<Grid>
14-
<Grid.RowDefinitions>
15-
<RowDefinition />
16-
<RowDefinition Height="auto" />
17-
</Grid.RowDefinitions>
18-
19-
<Grid.ColumnDefinitions>
20-
<ColumnDefinition />
21-
<ColumnDefinition />
22-
</Grid.ColumnDefinitions>
23-
24-
<Border Grid.ColumnSpan="2">
25-
<Border.Background>
26-
<SolidColorBrush Color="{x:Bind BackgroundPicker.Color, Mode=OneWay}" />
27-
</Border.Background>
28-
<StackPanel Spacing="2" VerticalAlignment="Center" HorizontalAlignment="Center">
29-
<TextBlock helpers:ContrastHelper.Opponent="{x:Bind BackgroundPicker.Color, Mode=OneWay}"
30-
FontSize="24"
31-
Text="Always legible text" />
32-
<TextBlock helpers:ContrastHelper.MinRatio="5"
33-
helpers:ContrastHelper.Opponent="{x:Bind BackgroundPicker.Color, Mode=OneWay}"
34-
FontSize="24"
35-
Text="Legible text (MinRatio: 5)">
36-
<TextBlock.Foreground>
37-
<SolidColorBrush Color="{x:Bind ForegroundPicker.Color, Mode=OneWay}"/>
38-
</TextBlock.Foreground>
39-
</TextBlock>
40-
<TextBlock helpers:ContrastHelper.MinRatio="3"
41-
helpers:ContrastHelper.Opponent="{x:Bind BackgroundPicker.Color, Mode=OneWay}"
42-
FontSize="24"
43-
Text="Legible text (MinRatio: 3)">
44-
<TextBlock.Foreground>
45-
<SolidColorBrush Color="{x:Bind ForegroundPicker.Color, Mode=OneWay}" />
46-
</TextBlock.Foreground>
47-
</TextBlock>
48-
<TextBlock FontSize="24"
49-
Text="Potentially illegible text">
50-
<TextBlock.Foreground>
51-
<SolidColorBrush Color="{x:Bind ForegroundPicker.Color, Mode=OneWay}" />
52-
</TextBlock.Foreground>
53-
</TextBlock>
54-
<Rectangle Height="28" Width="28">
55-
<Rectangle.Stroke>
56-
<SolidColorBrush Color="{x:Bind ForegroundPicker.Color, Mode=OneWay}"
57-
helpers:ContrastHelper.Opponent="{x:Bind BackgroundPicker.Color, Mode=OneWay}"
58-
helpers:ContrastHelper.MinRatio="3"/>
59-
</Rectangle.Stroke>
60-
</Rectangle>
61-
</StackPanel>
62-
</Border>
63-
64-
<StackPanel Grid.Row="1"
65-
HorizontalAlignment="Center">
66-
<TextBlock Text="Desired Foreground" />
67-
<ColorPicker x:Name="ForegroundPicker"
68-
IsColorChannelTextInputVisible="False"
69-
IsHexInputVisible="False"
70-
Color="Black" />
71-
</StackPanel>
72-
73-
<StackPanel Grid.Row="1"
74-
Grid.Column="1"
75-
HorizontalAlignment="Center">
76-
<TextBlock Text="Backround" />
77-
<ColorPicker x:Name="BackgroundPicker"
78-
IsColorChannelTextInputVisible="False"
79-
IsHexInputVisible="False" />
80-
</StackPanel>
81-
</Grid>
12+
<Page.Background>
13+
<SolidColorBrush Color="{x:Bind DesiredBackground, Mode=OneWay}" />
14+
</Page.Background>
15+
16+
<StackPanel HorizontalAlignment="Center"
17+
Padding="20"
18+
VerticalAlignment="Top"
19+
Spacing="2">
20+
<TextBlock x:Name="TextSample"
21+
helpers:ContrastHelper.MinRatio="{x:Bind MinRatio, Mode=OneWay}"
22+
helpers:ContrastHelper.Opponent="{x:Bind DesiredBackground, Mode=OneWay}"
23+
FontSize="24"
24+
Text="Legible Text">
25+
<TextBlock.Foreground>
26+
<SolidColorBrush Color="{x:Bind DesiredForeground, Mode=OneWay}" />
27+
</TextBlock.Foreground>
28+
</TextBlock>
29+
<Rectangle x:Name="ShapeSample"
30+
Width="28"
31+
Height="28">
32+
<Rectangle.Stroke>
33+
<SolidColorBrush helpers:ContrastHelper.MinRatio="{x:Bind MinRatio, Mode=OneWay}"
34+
helpers:ContrastHelper.Opponent="{x:Bind DesiredBackground, Mode=OneWay}"
35+
Color="{x:Bind DesiredForeground, Mode=OneWay}" />
36+
</Rectangle.Stroke>
37+
</Rectangle>
38+
</StackPanel>
8239
</Page>

‎components/ColorAnalyzer/samples/ContrastHelperSample.xaml.cs‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5+
using Microsoft.UI;
6+
using Windows.UI;
7+
58
namespace ColorAnalyzerExperiment.Samples;
69

710
/// <summary>
@@ -10,6 +13,33 @@ namespace ColorAnalyzerExperiment.Samples;
1013
[ToolkitSample(id: nameof(ContrastHelperSample), "ContrastAnalyzer helper", description: $"A sample for showing how the contrast analyzer can be used.")]
1114
public sealed partial class ContrastHelperSample : Page
1215
{
16+
public static readonly DependencyProperty DesiredBackgroundProperty =
17+
DependencyProperty.Register(nameof(DesiredBackground), typeof(Color), typeof(ContrastHelperSample), new PropertyMetadata(Colors.Black));
18+
19+
public static readonly DependencyProperty DesiredForegroundProperty =
20+
DependencyProperty.Register(nameof(DesiredForeground), typeof(Color), typeof(ContrastHelperSample), new PropertyMetadata(Colors.White));
21+
22+
private static readonly DependencyProperty MinRatioProperty =
23+
DependencyProperty.Register(nameof(MinRatio), typeof(double), typeof(ContrastHelperSample), new PropertyMetadata(0d));
24+
25+
public Color DesiredBackground
26+
{
27+
get => (Color)GetValue(DesiredBackgroundProperty);
28+
set => SetValue(DesiredBackgroundProperty, value);
29+
}
30+
31+
public Color DesiredForeground
32+
{
33+
get => (Color)GetValue(DesiredForegroundProperty);
34+
set => SetValue(DesiredForegroundProperty, value);
35+
}
36+
37+
public double MinRatio
38+
{
39+
get => (double)GetValue(MinRatioProperty);
40+
set => SetValue(MinRatioProperty, value);
41+
}
42+
1343
public ContrastHelperSample()
1444
{
1545
this.InitializeComponent();

‎components/ColorAnalyzer/samples/ContrastOptionsPane.xaml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<UserControl x:Class="ColorAnalyzerExperiment.Samples.ContrastOptionsPane"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:local="using:ColorAnalyzerExperiment.Samples"
6+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
mc:Ignorable="d">
9+
10+
<StackPanel Spacing="2">
11+
<TextBlock Text="Desired Foreground"/>
12+
<controls:ColorPicker Color="White" IsColorSliderVisible="True" IsColorChannelTextInputVisible="True" ColorChanged="Foreground_ColorChanged"/>
13+
14+
<TextBlock Text="Background"/>
15+
<controls:ColorPicker Color="Black" IsColorSliderVisible="True" IsColorChannelTextInputVisible="True" ColorChanged="Background_ColorChanged"/>
16+
17+
<Slider Header="Minimum Ratio" Value="3" Minimum="1" Maximum="21" ValueChanged="Ratio_ValueChanged"/>
18+
19+
<Slider Header="Font Size" Value="18" Minimum="8" Maximum="48" ValueChanged="FontSize_ValueChanged"/>
20+
21+
<Slider Header="Stroke Thickness" Value="4" Minimum="0" Maximum="8" ValueChanged="Thickness_ValueChanged"/>
22+
</StackPanel>
23+
</UserControl>

‎components/ColorAnalyzer/samples/ContrastOptionsPane.xaml.cs‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
#if !WINDOWS_UWP
6+
using Microsoft.UI.Xaml.Media.Imaging;
7+
#elif WINDOWS_UWP
8+
using Windows.UI.Xaml.Media.Imaging;
9+
#endif
10+
11+
namespace ColorAnalyzerExperiment.Samples;
12+
13+
[ToolkitSampleOptionsPane(nameof(ContrastHelperSample))]
14+
public partial class ContrastOptionsPane : UserControl
15+
{
16+
private ContrastHelperSample _sample;
17+
private ContrastHelperSample.XamlNamedPropertyRelay _sampleXamlRelay;
18+
19+
public ContrastOptionsPane(ContrastHelperSample sample)
20+
{
21+
_sample = sample;
22+
_sampleXamlRelay = new ContrastHelperSample.XamlNamedPropertyRelay(sample);
23+
24+
this.InitializeComponent();
25+
}
26+
27+
private void Foreground_ColorChanged(MUXC.ColorPicker sender, MUXC.ColorChangedEventArgs args)
28+
{
29+
// TODO: Disect the colorpicker
30+
if (args.NewColor.A != 255)
31+
return;
32+
33+
_sample.DesiredForeground = args.NewColor;
34+
}
35+
36+
private void Background_ColorChanged(MUXC.ColorPicker sender, MUXC.ColorChangedEventArgs args)
37+
{
38+
// TODO: Disect the colorpicker
39+
if (args.NewColor.A != 255)
40+
return;
41+
42+
_sample.DesiredBackground = args.NewColor;
43+
}
44+
45+
private void Ratio_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
46+
{
47+
_sample.MinRatio = (double)e.NewValue;
48+
}
49+
50+
private void FontSize_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
51+
{
52+
_sampleXamlRelay.TextSample.FontSize = (double)e.NewValue;
53+
}
54+
55+
private void Thickness_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
56+
{
57+
_sampleXamlRelay.ShapeSample.StrokeThickness = (double)e.NewValue;
58+
}
59+
}

‎components/ColorAnalyzer/samples/Dependencies.props‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@
1313
<ItemGroup Condition="'$(WinUIMajorVersion)' == '2'">
1414
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
1515
<PackageReference Include="CommunityToolkit.Uwp.Behaviors" Version="8.2.250402"/>
16+
<PackageReference Include="CommunityToolkit.Uwp.Controls.ColorPicker" Version="8.2.250402"/>
1617
</ItemGroup>
1718

1819
<!-- WinUI 3 -->
1920
<ItemGroup Condition="'$(WinUIMajorVersion)' == '3'">
2021
<PackageReference Include="CommunityToolkit.WinUI.Behaviors" Version="8.2.250402"/>
22+
<PackageReference Include="CommunityToolkit.WinUI.Controls.ColorPicker" Version="8.2.250402"/>
2123
</ItemGroup>
2224
</Project>

‎components/ColorAnalyzer/src/Contrast/ContrastHelper.Callbacks.cs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5+
#if WINUI2
6+
using Windows.UI;
7+
#endif
8+
59
namespace CommunityToolkit.WinUI.Helpers;
610

711
public partial class ContrastHelper

0 commit comments

Comments
 (0)