ColorAnalyzer Component Creation

components/ColorAnalyzer/OpenSolution.bat

@@ -0,0 +1,3 @@
+@ECHO OFF
+
+powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

components/ColorAnalyzer/samples/AccentAnalyzer.md

@@ -0,0 +1,19 @@
+---
+title: AccentAnalyzer Helper
+author: Avid29
+description: A tool for extracting colors from an image
+keywords: Accents, Color, Helpers
+dev_langs:
+  - csharp
+category: Helpers
+subcategory: Miscellaneous
+discussion-id: 254
+issue-id: 0
+icon: assets/icon.png
+---
+
+# AccentAnalyzer
+
+The AccentAnalyzer provides a pure XAML way to use the colors extracted from an image as a binding source for any `Color` property.
+
+> [!Sample AccentAnalyzerSample]

components/ColorAnalyzer/samples/AccentAnalyzerSample.xaml

@@ -0,0 +1,131 @@
+<!--  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"
+      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">
+
+    <Page.Resources>
+        <helpers:AccentAnalyzer x:Name="AccentAnalyzer"
+                                Source="{x:Bind AccentedImage}" />
+    </Page.Resources>
+
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
+
+        <StackPanel Padding="20"
+                    VerticalAlignment="Center">
+            <Image x:Name="AccentedImage"
+                   HorizontalAlignment="Center"
+                   Source="/ColorAnalyzerExperiment.Samples/Assets/StockImages/Bloom.jpg"
+                   Stretch="Uniform">
+                <interactivity:Interaction.Behaviors>
+                    <interactivity:EventTriggerBehavior EventName="ImageOpened">
+                        <interactivity:CallMethodAction MethodName="UpdateAccent"
+                                                        TargetObject="{x:Bind AccentAnalyzer}" />
+                    </interactivity:EventTriggerBehavior>
+                </interactivity:Interaction.Behaviors>
+            </Image>
+            <TextBlock HorizontalAlignment="Center"
+                       Text="{x:Bind AccentAnalyzer.Colorfulness, Mode=OneWay}" />
+        </StackPanel>
+
+        <Grid Grid.Column="1"
+              Height="400"
+              MaxWidth="600"
+              Margin="20">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition />
+                <ColumnDefinition />
+                <ColumnDefinition />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="4*" />
+                <RowDefinition Height="2*" />
+                <RowDefinition Height="*" />
+                <RowDefinition Height="2*" />
+            </Grid.RowDefinitions>
+
+            <!--  Dominant  -->
+            <Border Grid.RowSpan="3"
+                    Grid.Column="0"
+                    Margin="4"
+                    Padding="2">
+                <Border.Background>
+                    <SolidColorBrush Color="{x:Bind AccentAnalyzer.DominantColor, Mode=OneWay}" />
+                </Border.Background>
+                <TextBlock Foreground="Black"
+                           Text="Dominant" />
+            </Border>
+
+            <!--  Base  -->
+            <Border Grid.Row="4"
+                    Grid.ColumnSpan="4"
+                    Margin="4"
+                    Padding="2">
+                <Border.Background>
+                    <SolidColorBrush Color="{x:Bind AccentAnalyzer.BaseColor, Mode=OneWay}" />
+                </Border.Background>
+                <TextBlock Foreground="Black"
+                           Text="Base" />
+            </Border>
+
+            <!--  Primary  -->
+            <Border Grid.Row="0"
+                    Grid.Column="1"
+                    Margin="4"
+                    Padding="2">
+                <Border.Background>
+                    <SolidColorBrush Color="{x:Bind AccentAnalyzer.PrimaryAccentColor, Mode=OneWay}" />
+                </Border.Background>
+                <TextBlock Foreground="Black"
+                           Text="Primary" />
+            </Border>
+            <!--  Secondary  -->
+            <Border Grid.Row="1"
+                    Grid.Column="1"
+                    Margin="4"
+                    Padding="2">
+                <Border.Background>
+                    <SolidColorBrush Color="{x:Bind AccentAnalyzer.SecondaryAccentColor, Mode=OneWay}" />
+                </Border.Background>
+                <TextBlock Foreground="Black"
+                           Text="Secondary" />
+            </Border>
+            <!--  Tertiary  -->
+            <Border Grid.Row="2"
+                    Grid.Column="1"
+                    Margin="4"
+                    Padding="2">
+                <Border.Background>
+                    <SolidColorBrush Color="{x:Bind AccentAnalyzer.TertiaryAccentColor, Mode=OneWay}" />
+                </Border.Background>
+                <TextBlock Foreground="Black"
+                           Text="Tertiary" />
+            </Border>
+
+            <!--  Gradient  -->
+            <Rectangle Grid.RowSpan="3"
+                       Grid.Column="2"
+                       Margin="4">
+                <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}" />
+                        </GradientStopCollection>
+                    </LinearGradientBrush>
+                </Rectangle.Fill>
+            </Rectangle>
+        </Grid>
+    </Grid>
+</Page>

components/ColorAnalyzer/samples/AccentAnalyzerSample.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(AccentAnalyzerSample), "AccentAnalyzer helper", description: $"A sample for showing how the accent analyzer can be used.")]
+public sealed partial class AccentAnalyzerSample : Page
+{
+    public AccentAnalyzerSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/ColorAnalyzer/samples/ColorAnalyzer.Samples.csproj

@@ -0,0 +1,21 @@
+<Project>
+  <Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
+
+  <PropertyGroup>
+    <ToolkitComponentName>ColorAnalyzer</ToolkitComponentName>
+  </PropertyGroup>
+
+  <!-- Sets this up as a toolkit component's sample project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
+  <ItemGroup>
+    <Content Include="Assets\StockImages\Flowers.jpg">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Assets\StockImages\Headphones.jpg">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Assets\StockImages\Paint.jpg">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+</Project>

components/ColorAnalyzer/samples/Dependencies.props

@@ -0,0 +1,22 @@
+<!--
+    WinUI 2 under UWP uses TargetFramework uap10.0.*
+    WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
+    However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
+
+    MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
+
+    For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
+    For UWP / WinAppSDK / Uno packages, place the package references here.
+-->
+<Project>
+    <!-- WinUI 2 -->
+    <ItemGroup Condition="'$(WinUIMajorVersion)' == '2'">
+        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
+      <PackageReference Include="CommunityToolkit.Uwp.Behaviors" Version="8.2.250402"/>
+    </ItemGroup>
+
+    <!-- WinUI 3 -->
+    <ItemGroup Condition="'$(WinUIMajorVersion)' == '3'">
+      <PackageReference Include="CommunityToolkit.WinUI.Behaviors" Version="8.2.250402"/>
+    </ItemGroup>
+</Project>

components/ColorAnalyzer/samples/ImageOptionsPane.xaml

@@ -0,0 +1,50 @@
+<UserControl x:Class="ColorAnalyzerExperiment.Samples.ImageOptionsPane"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="using:ColorAnalyzerExperiment.Samples"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="Auto" />
+        </Grid.ColumnDefinitions>
+
+        <TextBox x:Name="UrlTextbox"
+                 MaxWidth="500"
+                 Margin="4"
+                 HorizontalAlignment="Stretch"
+                 PlaceholderText="Enter a url" />
+
+        <Button Grid.Column="1"
+                Margin="4"
+                Click="Button_Click"
+                Content="Set Image" />
+
+        <GridView Grid.Row="1"
+                  Grid.ColumnSpan="2"
+                  Margin="4"
+                  IsItemClickEnabled="True"
+                  ItemClick="GridView_ItemClick"
+                  ItemsSource="{x:Bind StockImages, Mode=OneWay}"
+                  SelectionMode="Single">
+            <GridView.ItemTemplate>
+                <DataTemplate x:DataType="x:String">
+                    <Image MaxWidth="128"
+                           Stretch="UniformToFill">
+                        <Image.Source>
+                            <BitmapImage UriSource="{x:Bind}" />
+                        </Image.Source>
+                    </Image>
+                </DataTemplate>
+            </GridView.ItemTemplate>
+        </GridView>
+    </Grid>
+</UserControl>

components/ColorAnalyzer/samples/ImageOptionsPane.xaml.cs

@@ -0,0 +1,44 @@
+// 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.
+
+#if !WINDOWS_UWP
+using Microsoft.UI.Xaml.Media.Imaging;
+#elif WINDOWS_UWP
+using Windows.UI.Xaml.Media.Imaging;
+#endif
+
+namespace ColorAnalyzerExperiment.Samples;
+
+[ToolkitSampleOptionsPane(nameof(AccentAnalyzerSample))]
+public partial class ImageOptionsPane : UserControl
+{
+    private AccentAnalyzerSample.XamlNamedPropertyRelay _sample;
+
+    public ImageOptionsPane(AccentAnalyzerSample sample)
+    {
+        this.InitializeComponent();
+
+        _sample = new AccentAnalyzerSample.XamlNamedPropertyRelay(sample);
+
+        string[] images = ["Flowers.jpg", "Headphones.jpg", "Paint.jpg"];
+        StockImages = images.Select(x => $"ms-appx:///Assets/StockImages/{x}").ToList();
+    }
+
+    private void Button_Click(object sender, RoutedEventArgs e)
+    {
+        SetImage(new Uri(UrlTextbox.Text));
+    }
+
+    public IList<string> StockImages { get; }
+
+    private void GridView_ItemClick(object sender, ItemClickEventArgs e)
+    {
+        SetImage(new Uri((string)e.ClickedItem));
+    }
+
+    private void SetImage(Uri uri)
+    {
+        _sample.AccentedImage.Source = new BitmapImage(uri);
+    }
+}