Improved samples and markdown docs for ContrastHelper and ColorPaletteSampler

components/ColorAnalyzer/samples/ColorAnalyzer.Samples.csproj

@@ -18,7 +18,4 @@
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
   </ItemGroup>
-  <ItemGroup>
-    <Folder Include="ContrastHelper\" />
-  </ItemGroup>
 </Project>

components/ColorAnalyzer/samples/ColorPaletteSampler/AccentColorSample.xaml

@@ -0,0 +1,113 @@
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<local:ColorPaletteSamplerToolkitSampleBase x:Class="ColorAnalyzerExperiment.Samples.AccentColorSample"
+                                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                                            xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
+                                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+                                            xmlns:helpers="using:CommunityToolkit.WinUI.Helpers"
+                                            xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+                                            xmlns:local="using:ColorAnalyzerExperiment.Samples"
+                                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+                                            mc:Ignorable="d">
+
+    <local:ColorPaletteSamplerToolkitSampleBase.Resources>
+        <helpers:ColorPaletteSampler x:Name="ColorPaletteSampler"
+                                     Source="{x:Bind SampledImage}">
+            <helpers:AccentColorPaletteSelector x:Name="AccentPalette"
+                                                MinColorCount="3" />
+        </helpers:ColorPaletteSampler>
+    </local:ColorPaletteSamplerToolkitSampleBase.Resources>
+
+    <!--
+        ConstrastHelper is used in this sample to auto-adjust text Foreground to ensure
+        readability against dynamic background. This is not the ContrastHelper sample.
+        (though it is a fantastic example use case for it!)
+    -->
+    <Grid Margin="20">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
+
+        <StackPanel MaxHeight="250"
+                    VerticalAlignment="Center">
+            <Image x:Name="SampledImage"
+                   HorizontalAlignment="Center"
+                   Source="{x:Bind SelectedImage, Mode=OneWay}"
+                   Stretch="Uniform">
+                <interactivity:Interaction.Behaviors>
+                    <interactivity:EventTriggerBehavior EventName="ImageOpened">
+                        <interactivity:CallMethodAction MethodName="UpdatePalette"
+                                                        TargetObject="{x:Bind ColorPaletteSampler}" />
+                    </interactivity:EventTriggerBehavior>
+                </interactivity:Interaction.Behaviors>
+            </Image>
+        </StackPanel>
+
+        <Grid Grid.Column="1"
+              MaxWidth="400"
+              MaxHeight="250"
+              Margin="20"
+              HorizontalAlignment="Stretch"
+              VerticalAlignment="Stretch">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition />
+                <ColumnDefinition />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition />
+                <RowDefinition Height="0.6*" />
+                <RowDefinition Height="0.4*" />
+            </Grid.RowDefinitions>
+
+            <!--  Primary Accent Color  -->
+            <Border Grid.ColumnSpan="2"
+                    Margin="4"
+                    Padding="2">
+                <Border.Background>
+                    <SolidColorBrush Color="{x:Bind AccentPalette.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}" />
+                </Border.Background>
+                <TextBlock helpers:ContrastHelper.Opponent="{x:Bind AccentPalette.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}"
+                           Text="Primary Accent" />
+            </Border>
+
+            <!--  Secondary Accent Color  -->
+            <Border Grid.Row="1"
+                    Margin="4"
+                    Padding="2">
+                <Border.Background>
+                    <SolidColorBrush Color="{x:Bind AccentPalette.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}" />
+                </Border.Background>
+                <TextBlock helpers:ContrastHelper.Opponent="{x:Bind AccentPalette.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}"
+                           Text="Secondary Accent" />
+            </Border>
+
+            <!--  Tertiary Accent Color  -->
+            <Border Grid.Row="1"
+                    Grid.Column="1"
+                    Margin="4"
+                    Padding="2">
+                <Border.Background>
+                    <SolidColorBrush Color="{x:Bind AccentPalette.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}" />
+                </Border.Background>
+                <TextBlock helpers:ContrastHelper.Opponent="{x:Bind AccentPalette.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}"
+                           Text="Tertiary Accent" />
+            </Border>
+
+            <!--  Accent Colors Gradient  -->
+            <Rectangle Grid.Row="3"
+                       Grid.ColumnSpan="2"
+                       Margin="4">
+                <Rectangle.Fill>
+                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
+                        <GradientStopCollection>
+                            <GradientStop Offset="0" Color="{x:Bind AccentPalette.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}" />
+                            <GradientStop Offset="0.6" Color="{x:Bind AccentPalette.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}" />
+                            <GradientStop Offset="1" Color="{x:Bind AccentPalette.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}" />
+                        </GradientStopCollection>
+                    </LinearGradientBrush>
+                </Rectangle.Fill>
+            </Rectangle>
+        </Grid>
+    </Grid>
+</local:ColorPaletteSamplerToolkitSampleBase>

components/ColorAnalyzer/samples/ColorPaletteSampler/AccentColorSample.xaml.cs

@@ -0,0 +1,17 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace ColorAnalyzerExperiment.Samples;
+
+/// <summary>
+/// An example sample page of a custom control inheriting from Panel.
+/// </summary>
+[ToolkitSample(id: nameof(AccentColorSample), "AccentAnalyzer helper", description: $"A sample for showing how the accent analyzer can be used.")]
+public sealed partial class AccentColorSample : ColorPaletteSamplerToolkitSampleBase
+{
+    public AccentColorSample()
+    {
+        this.InitializeComponent();
+    }
+}