Moved AccentAnalyzer color properties into ColorPalette children

Author: Avid29

components/ColorAnalyzer/samples/AccentAnalyzerSample.xaml

@@ -1,4 +1,4 @@
-<!--  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.  -->
+<!--  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.  -->
 <Page x:Class="ColorAnalyzerExperiment.Samples.AccentAnalyzerSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -12,7 +12,11 @@
 
     <Page.Resources>
         <helpers:AccentAnalyzer x:Name="AccentAnalyzer"
-                                Source="{x:Bind AccentedImage}" />
+                                Source="{x:Bind AccentedImage}">
+            <helpers:AccentPalette x:Name="AccentPalette" />
+            <helpers:ProminencePalette x:Name="ProminencePalette" />
+            <helpers:BasePalette x:Name="BasePalette" />
+        </helpers:AccentAnalyzer>
     </Page.Resources>
 
     <Grid>
@@ -60,7 +64,7 @@
                     Margin="4"
                     Padding="2">
                 <Border.Background>
-                    <SolidColorBrush Color="{x:Bind AccentAnalyzer.DominantColor, Mode=OneWay}" />
+                    <SolidColorBrush Color="{x:Bind ProminencePalette.Primary, Mode=OneWay}" />
                 </Border.Background>
                 <TextBlock Foreground="Black"
                            Text="Dominant" />
@@ -72,7 +76,7 @@
                     Margin="4"
                     Padding="2">
                 <Border.Background>
-                    <SolidColorBrush Color="{x:Bind AccentAnalyzer.BaseColor, Mode=OneWay}" />
+                    <SolidColorBrush Color="{x:Bind BasePalette.Base, Mode=OneWay}" />
                 </Border.Background>
                 <TextBlock Foreground="Black"
                            Text="Base" />
@@ -84,7 +88,7 @@
                     Margin="4"
                     Padding="2">
                 <Border.Background>
-                    <SolidColorBrush Color="{x:Bind AccentAnalyzer.PrimaryAccentColor, Mode=OneWay}" />
+                    <SolidColorBrush Color="{x:Bind AccentPalette.Primary, Mode=OneWay}" />
                 </Border.Background>
                 <TextBlock Foreground="Black"
                            Text="Primary" />
@@ -95,7 +99,7 @@
                     Margin="4"
                     Padding="2">
                 <Border.Background>
-                    <SolidColorBrush Color="{x:Bind AccentAnalyzer.SecondaryAccentColor, Mode=OneWay}" />
+                    <SolidColorBrush Color="{x:Bind AccentPalette.Secondary, Mode=OneWay}" />
                 </Border.Background>
                 <TextBlock Foreground="Black"
                            Text="Secondary" />
@@ -106,7 +110,7 @@
                     Margin="4"
                     Padding="2">
                 <Border.Background>
-                    <SolidColorBrush Color="{x:Bind AccentAnalyzer.TertiaryAccentColor, Mode=OneWay}" />
+                    <SolidColorBrush Color="{x:Bind AccentPalette.Tertiary, Mode=OneWay}" />
                 </Border.Background>
                 <TextBlock Foreground="Black"
                            Text="Tertiary" />
@@ -119,9 +123,9 @@
                 <Rectangle.Fill>
                     <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                         <GradientStopCollection>
-                            <GradientStop Offset="0" Color="{x:Bind AccentAnalyzer.PrimaryAccentColor, Mode=OneWay}" />
-                            <GradientStop Offset="0.74" Color="{x:Bind AccentAnalyzer.SecondaryAccentColor, Mode=OneWay}" />
-                            <GradientStop Offset="1" Color="{x:Bind AccentAnalyzer.TertiaryAccentColor, Mode=OneWay}" />
+                            <GradientStop Offset="0" Color="{x:Bind AccentPalette.Primary, Mode=OneWay}" />
+                            <GradientStop Offset="0.74" Color="{x:Bind AccentPalette.Secondary, Mode=OneWay}" />
+                            <GradientStop Offset="1" Color="{x:Bind AccentPalette.Tertiary, Mode=OneWay}" />
                         </GradientStopCollection>
                     </LinearGradientBrush>
                 </Rectangle.Fill>

components/ColorAnalyzer/src/AccentAnalyzer.Properties.cs

@@ -2,7 +2,6 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
-using System.Windows.Input;
 using Windows.UI;
 
 namespace CommunityToolkit.WinUI.Helpers;
@@ -15,36 +14,6 @@ public partial class AccentAnalyzer
     public static readonly DependencyProperty SourceProperty =
         DependencyProperty.Register(nameof(Source), typeof(UIElement), typeof(AccentAnalyzer), new PropertyMetadata(null, OnSourceChanged));
 
-    /// <summary>
-    /// Gets the <see cref="DependencyProperty"/> for the <see cref="PrimaryAccentColor"/> property.
-    /// </summary>
-    public static readonly DependencyProperty PrimaryAccentColorProperty =
-        DependencyProperty.Register(nameof(PrimaryAccentColor), typeof(Color), typeof(AccentAnalyzer), new PropertyMetadata(Colors.Transparent));
-    
-    /// <summary>
-    /// Gets the <see cref="DependencyProperty"/> for the <see cref="SecondaryAccentColor"/> property.
-    /// </summary>
-    public static readonly DependencyProperty SecondaryAccentColorProperty =
-        DependencyProperty.Register(nameof(SecondaryAccentColor), typeof(Color), typeof(AccentAnalyzer), new PropertyMetadata(Colors.Transparent));
-    
-    /// <summary>
-    /// Gets the <see cref="DependencyProperty"/> for the <see cref="TertiaryAccentColor"/> property.
-    /// </summary>
-    public static readonly DependencyProperty TertiaryAccentColorProperty =
-        DependencyProperty.Register(nameof(TertiaryAccentColor), typeof(Color), typeof(AccentAnalyzer), new PropertyMetadata(Colors.Transparent));
-    
-    /// <summary>
-    /// Gets the <see cref="DependencyProperty"/> for the <see cref="BaseColor"/> property.
-    /// </summary>
-    public static readonly DependencyProperty BaseColorProperty =
-        DependencyProperty.Register(nameof(BaseColor), typeof(Color), typeof(AccentAnalyzer), new PropertyMetadata(Colors.Transparent));
-    
-    /// <summary>
-    /// Gets the <see cref="DependencyProperty"/> for the <see cref="DominantColor"/> property.
-    /// </summary>
-    public static readonly DependencyProperty DominantColorProperty =
-        DependencyProperty.Register(nameof(DominantColor), typeof(Color), typeof(AccentAnalyzer), new PropertyMetadata(Colors.Transparent));
-    
     /// <summary>
     /// Gets the <see cref="DependencyProperty"/> for the <see cref="Colorfulness"/> property.
     /// </summary>
@@ -54,7 +23,7 @@ public partial class AccentAnalyzer
     /// <summary>
     /// An event fired when the accent properties are updated.
     /// </summary>
-    public event EventHandler? AccentsUpdated;
+    public event EventHandler? PalettesUpdated;
 
     /// <summary>
     /// Gets or sets the <see cref="UIElement"/> source for accent color analysis.
@@ -66,64 +35,9 @@ public UIElement? Source
     }
 
     /// <summary>
-    /// Gets the primary accent color as extracted from the <see cref="Source"/>.
-    /// </summary>
-    /// <remarks>
-    /// The most "colorful" found in the image.
-    /// </remarks>
-    public Color PrimaryAccentColor
-    {
-        get => (Color)GetValue(PrimaryAccentColorProperty);
-        protected set => SetValue(PrimaryAccentColorProperty, value);
-    }
-
-    /// <summary>
-    /// Gets the secondary accent color as extracted from the <see cref="Source"/>.
-    /// </summary>
-    /// <remarks>
-    /// The second most "colorful" color found in the image.
-    /// </remarks>
-    public Color SecondaryAccentColor
-    {
-        get => (Color)GetValue(SecondaryAccentColorProperty);
-        protected set => SetValue(SecondaryAccentColorProperty, value);
-    }
-
-    /// <summary>
-    /// Gets the tertiary accent color as extracted from the <see cref="Source"/>.
-    /// </summary>
-    /// <remarks>
-    /// The third most "colorful" color found in the image.
-    /// </remarks>
-    public Color TertiaryAccentColor
-    {
-        get => (Color)GetValue(TertiaryAccentColorProperty);
-        protected set => SetValue(TertiaryAccentColorProperty, value);
-    }
-    
-    /// <summary>
-    /// Gets the base color as extracted from the <see cref="Source"/>.
+    /// The list of <see cref="ColorPalette"/> to update when the <see cref="Source"/> is set or changed.
     /// </summary>
-    /// <remarks>
-    /// The least "colorful" color found in the image.
-    /// </remarks>
-    public Color BaseColor
-    {
-        get => (Color)GetValue(BaseColorProperty);
-        protected set => SetValue(BaseColorProperty, value);
-    }
-    
-    /// <summary>
-    /// Gets the dominant color as extracted from the <see cref="Source"/>.
-    /// </summary>
-    /// <remarks>
-    /// The color that takes up the most of the image.
-    /// </remarks>
-    public Color DominantColor
-    {
-        get => (Color)GetValue(DominantColorProperty);
-        protected set => SetValue(DominantColorProperty, value);
-    }
+    public IList<ColorPalette> Palettes { get; set; }
 
     /// <summary>
     /// Gets the "colorfulness" of the <see cref="Source"/>.

components/ColorAnalyzer/src/AccentAnalyzer.cs

@@ -19,13 +19,15 @@ namespace CommunityToolkit.WinUI.Helpers;
 /// <summary>
 /// A resource that can be used to extract color palettes out of any UIElement.
 /// </summary>
+[ContentProperty(Name = nameof(Palettes))]
 public partial class AccentAnalyzer : DependencyObject
 {
     /// <summary>
     /// Initialize an instance of the <see cref="AccentAnalyzer"/> class.
     /// </summary>
     public AccentAnalyzer()
     {
+        Palettes = [];
     }
 
     /// <summary>
@@ -38,6 +40,11 @@ public void UpdateAccent()
 
     private async Task UpdateAccentAsync()
     {
+        // No palettes to update.
+        // Skip a lot of unnecessary computation
+        if (Palettes.Count is 0)
+            return;
+
         const int sampleCount = 4096;
         const int k = 8;
 
@@ -59,8 +66,14 @@ private async Task UpdateAccentAsync()
         // TODO: Should this be weighted by cluster sizes?
         var overallColorfulness = FindColorfulness(clusters);
 
-        // Select accent colors
-        SelectAccentColors(colorData, overallColorfulness);
+        // Update palettes on the UI thread
+        foreach (var palette in Palettes)
+        {
+            DispatcherQueue.GetForCurrentThread().TryEnqueue(() =>
+            {
+                palette.SelectColors(colorData, overallColorfulness);
+            });
+        }
 
         // Update accent colors property
         // Not a dependency property, so no need to update from the UI Thread
@@ -75,54 +88,7 @@ private async Task UpdateAccentAsync()
         DispatcherQueue.GetForCurrentThread().TryEnqueue(() =>
         {
             Colorfulness = overallColorfulness;
-            AccentsUpdated?.Invoke(this, EventArgs.Empty);
-        });
-    }
-
-    /// <summary>
-    /// This method takes the processed color information and selects the accent colors from it.
-    /// </summary>
-    /// <remarks>
-    /// There is no guarentee that this method will be called from the UI Thread.
-    /// Dependency properties should be updated using a dispatcher.
-    /// </remarks>
-    /// <param name="colorData">The analyzed accent color info from the image.</param>
-    /// <param name="imageColorfulness">The overall colorfulness of the image.</param>
-    protected virtual void SelectAccentColors(IEnumerable<AccentColorInfo> colorData, float imageColorfulness)
-    {
-        // Select accent colors
-        var accentColors = colorData
-            .OrderByDescending(x => x.Colorfulness)
-            .Select(x => x.Color);
-
-        // Get primary/secondary/tertiary accents
-        var primary = accentColors.First();
-        var secondary = accentColors.ElementAtOrDefault(1);
-        secondary = secondary != default ? secondary : primary;
-        var tertiary = accentColors.ElementAtOrDefault(2);
-        tertiary = tertiary != default ? tertiary : secondary;
-
-        // Get base color
-        var baseColor = accentColors.Last();
-
-        // Get dominant color by prominence
-#if NET6_0_OR_GREATER
-        var dominantColor = colorData
-            .MaxBy(x => x.Prominence).Color;
-#else
-        var dominantColor = colorData
-            .OrderByDescending((x) => x.Prominence)
-            .First().Color;
-#endif
-
-        // Batch update the dependency properties in the UI Thread
-        DispatcherQueue.GetForCurrentThread().TryEnqueue(() =>
-        {
-            PrimaryAccentColor = primary;
-            SecondaryAccentColor = secondary;
-            TertiaryAccentColor = tertiary;
-            BaseColor = baseColor;
-            DominantColor = dominantColor;
+            PalettesUpdated?.Invoke(this, EventArgs.Empty);
         });
     }
 

components/ColorAnalyzer/src/ColorPalettes/AccentPalette.cs

@@ -0,0 +1,89 @@
+// 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.
+
+
+using Windows.UI;
+
+namespace CommunityToolkit.WinUI.Helpers;
+
+/// <summary>
+/// A <see cref="ColorPalette"/> based on the three most "colorful" colors.
+/// </summary>
+public class AccentPalette : ColorPalette
+{
+    /// <summary>
+    /// Gets the <see cref="DependencyProperty"/> for the <see cref="Primary"/> property.
+    /// </summary>
+    public static readonly DependencyProperty PrimaryProperty =
+        DependencyProperty.Register(nameof(Primary), typeof(Color), typeof(AccentPalette), new PropertyMetadata(Colors.Transparent));
+    
+    /// <summary>
+    /// Gets the <see cref="DependencyProperty"/> for the <see cref="Secondary"/> property.
+    /// </summary>
+    public static readonly DependencyProperty SecondaryProperty =
+        DependencyProperty.Register(nameof(Secondary), typeof(Color), typeof(AccentPalette), new PropertyMetadata(Colors.Transparent));
+    
+    /// <summary>
+    /// Gets the <see cref="DependencyProperty"/> for the <see cref="Tertiary"/> property.
+    /// </summary>
+    public static readonly DependencyProperty TertiaryProperty =
+        DependencyProperty.Register(nameof(Tertiary), typeof(Color), typeof(AccentPalette), new PropertyMetadata(Colors.Transparent));
+
+    /// <summary>
+    /// Gets the primary accent color.
+    /// </summary>
+    /// <remarks>
+    /// The most "colorful" found in the palette.
+    /// </remarks>
+    public Color Primary
+    {
+        get => (Color)GetValue(PrimaryProperty);
+        protected set => SetValue(PrimaryProperty, value);
+    }
+
+    /// <summary>
+    /// Gets the secondary accent color.
+    /// </summary>
+    /// <remarks>
+    /// The second most "colorful" color found in the palette.
+    /// </remarks>
+    public Color Secondary
+    {
+        get => (Color)GetValue(SecondaryProperty);
+        protected set => SetValue(SecondaryProperty, value);
+    }
+
+    /// <summary>
+    /// Gets the tertiary accent color.
+    /// </summary>
+    /// <remarks>
+    /// The third most "colorful" color found in the palette.
+    /// </remarks>
+    public Color Tertiary
+    {
+        get => (Color)GetValue(TertiaryProperty);
+        protected set => SetValue(TertiaryProperty, value);
+    }
+
+    /// <inheritdoc/>
+    public override void SelectColors(IEnumerable<AccentColorInfo> colors, float imageColorfulness)
+    {
+        // Select accent colors
+        var accentColors = colors
+            .OrderByDescending(x => x.Colorfulness)
+            .Select(x => x.Color);
+
+        // Get primary/secondary/tertiary accents
+        var primary = accentColors.First();
+        var secondary = accentColors.ElementAtOrDefault(1);
+        secondary = secondary != default ? secondary : primary;
+        var tertiary = accentColors.ElementAtOrDefault(2);
+        tertiary = tertiary != default ? tertiary : secondary;
+        
+        // Update DPs
+        Primary = primary;
+        Secondary = secondary;
+        Tertiary = tertiary;
+    }
+}