Adding ColorPicker

components/ColorPicker/OpenSolution.bat

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

components/ColorPicker/samples/ColorPicker.Samples.csproj

@@ -0,0 +1,17 @@
+<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
+  <PropertyGroup>
+    <ToolkitComponentName>ColorPicker</ToolkitComponentName>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <None Remove="Assets\ColorPicker.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Assets\ColorPicker.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+
+  <!-- Sets this up as a toolkit component's sample project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
+</Project>

components/ColorPicker/samples/ColorPicker.md

@@ -0,0 +1,22 @@
+---
+title: ColorPicker
+author: michael-hawker
+description: An extended color picker control that lets a user pick a color using a color spectrum, sliders, or text input.
+keywords: ColorPicker, Control, Layout
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Input
+discussion-id: 0
+issue-id: 0
+icon: Assets/ColorPicker.png
+---
+
+The [ColorPicker](/dotnet/api/microsoft.toolkit.uwp.ui.controls.colorpicker) control lets a user pick a color using a color spectrum, palette, sliders, or text input.
+
+> [!Sample ColorPickerSample]
+
+## ColorPickerButton
+The `ColorPickerButton` variant represents a `DropDownButton` variant which provides a preview of the selected color and allows a user to expand the drop-down to select a new color.
+
+> [!Sample ColorPickerButtonSample]

components/ColorPicker/samples/ColorPickerButtonSample.xaml

@@ -0,0 +1,16 @@
+<!--  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="ColorPickerExperiment.Samples.ColorPickerButtonSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:ColorPickerExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <Grid>
+        <controls:ColorPickerButton HorizontalAlignment="Center"
+                                    VerticalAlignment="Top"
+                                    SelectedColor="LightBlue" />
+    </Grid>
+</Page>

components/ColorPicker/samples/ColorPickerButtonSample.xaml.cs

@@ -0,0 +1,16 @@
+// 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 ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape;
+
+namespace ColorPickerExperiment.Samples;
+
+[ToolkitSample(id: nameof(ColorPickerButtonSample), "ColorPickerButton", description: $"A sample for showing how to create and use a {nameof(CommunityToolkit.WinUI.Controls.ColorPickerButton)} control.")]
+public sealed partial class ColorPickerButtonSample : Page
+{
+    public ColorPickerButtonSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/ColorPicker/samples/ColorPickerSample.xaml

@@ -0,0 +1,24 @@
+<!--  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="ColorPickerExperiment.Samples.ColorPickerSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:ColorPickerExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <Grid>
+        <controls:ColorPicker HorizontalAlignment="Center"
+                              VerticalAlignment="Top"
+                              ColorSpectrumShape="{x:Bind local:ColorPickerSample.ConvertStringToColorSpectrumShape(SpectrumShape), Mode=OneWay}"
+                              IsAlphaEnabled="{x:Bind AlphaEnabled, Mode=OneWay}"
+                              IsAlphaSliderVisible="{x:Bind AlphaSlider, Mode=OneWay}"
+                              IsColorChannelTextInputVisible="{x:Bind ColorChannel, Mode=OneWay}"
+                              IsColorPaletteVisible="{x:Bind ColorPalette, Mode=OneWay}"
+                              IsColorSliderVisible="{x:Bind ColorSlider, Mode=OneWay}"
+                              IsColorSpectrumVisible="{x:Bind SpectrumVisible, Mode=OneWay}"
+                              ShowAccentColors="{x:Bind AccentColors, Mode=OneWay}"
+                              Color="LightBlue" />
+    </Grid>
+</Page>

components/ColorPicker/samples/ColorPickerSample.xaml.cs

@@ -0,0 +1,34 @@
+// 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 ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape;
+
+namespace ColorPickerExperiment.Samples;
+
+[ToolkitSampleBoolOption("AccentColors", true, Title = "ShowAccentColors")]
+[ToolkitSampleBoolOption("AlphaEnabled", true, Title = "IsAlphaEnabled")]
+[ToolkitSampleBoolOption("AlphaSlider", true, Title = "IsAlphaSliderVisible")]
+[ToolkitSampleBoolOption("ColorSlider", true, Title = "IsColorSliderVisible")]
+[ToolkitSampleBoolOption("ColorChannel", true, Title = "IsColorChannelTextInputVisible")]
+[ToolkitSampleBoolOption("SpectrumVisible", true, Title = "IsColorSpectrumVisible")]
+[ToolkitSampleBoolOption("ColorPalette", true, Title = "IsColorPaletteVisible")]
+
+[ToolkitSampleMultiChoiceOption("SpectrumShape", "Box", "Ring", Title = "ColorSpectrumShape")]
+
+[ToolkitSample(id: nameof(ColorPickerSample), "ColorPicker", description: $"A sample for showing how to create and use a {nameof(CommunityToolkit.WinUI.Controls.ColorPicker)} control.")]
+public sealed partial class ColorPickerSample : Page
+{
+    public ColorPickerSample()
+    {
+        this.InitializeComponent();
+    }
+
+    // TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149
+    public static ColorSpectrumShape ConvertStringToColorSpectrumShape(string shape) => shape switch
+    {
+        "Ring" => ColorSpectrumShape.Ring,
+        "Box" => ColorSpectrumShape.Box,
+        _ => throw new System.NotImplementedException(),
+    };
+}

components/ColorPicker/samples/Dependencies.props

@@ -0,0 +1,31 @@
+<!--
+    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 / UWP -->
+    <ItemGroup Condition="'$(IsUwp)' == 'true'">
+        <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 2 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / WinAppSdk -->
+    <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+        <!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+        <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
+    </ItemGroup>
+</Project>

components/ColorPicker/src/ColorChannel.cs

@@ -0,0 +1,32 @@
+// 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 CommunityToolkit.WinUI.Controls;
+
+/// <summary>
+/// Defines a specific channel within a color representation.
+/// </summary>
+[EditorBrowsable(EditorBrowsableState.Advanced)]
+public enum ColorChannel
+{
+    /// <summary>
+    /// Represents the alpha channel.
+    /// </summary>
+    Alpha,
+
+    /// <summary>
+    /// Represents the first color channel which is Red when RGB or Hue when HSV.
+    /// </summary>
+    Channel1,
+
+    /// <summary>
+    /// Represents the second color channel which is Green when RGB or Saturation when HSV.
+    /// </summary>
+    Channel2,
+
+    /// <summary>
+    /// Represents the third color channel which is Blue when RGB or Value when HSV.
+    /// </summary>
+    Channel3
+}

components/ColorPicker/src/ColorPicker.Properties.cs

@@ -0,0 +1,143 @@
+// 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 CommunityToolkit.WinUI.Controls;
+
+/// <summary>
+/// Contains all properties for the <see cref="ColorPicker"/>.
+/// </summary>
+public partial class ColorPicker
+{
+    /// <summary>
+    /// Identifies the <see cref="CustomPaletteColors"/> dependency property.
+    /// </summary>
+    public static readonly DependencyProperty CustomPaletteColorsProperty =
+        DependencyProperty.Register(
+            nameof(CustomPaletteColors),
+            typeof(ObservableCollection<Windows.UI.Color>),
+            typeof(ColorPicker),
+            new PropertyMetadata(
+                null,
+                (s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
+
+    /// <summary>
+    /// Gets the list of custom palette colors.
+    /// </summary>
+    public ObservableCollection<Windows.UI.Color> CustomPaletteColors
+    {
+        get => (ObservableCollection<Windows.UI.Color>)this.GetValue(CustomPaletteColorsProperty);
+    }
+
+    /// <summary>
+    /// Identifies the <see cref="CustomPaletteColumnCount"/> dependency property.
+    /// </summary>
+    public static readonly DependencyProperty CustomPaletteColumnCountProperty =
+        DependencyProperty.Register(
+            nameof(CustomPaletteColumnCount),
+            typeof(int),
+            typeof(ColorPicker),
+            new PropertyMetadata(
+                4,
+                (s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
+
+    /// <summary>
+    /// Gets or sets the number of colors in each row (section) of the custom color palette.
+    /// Within a standard palette, rows are shades and columns are unique colors.
+    /// </summary>
+    public int CustomPaletteColumnCount
+    {
+        get => (int)this.GetValue(CustomPaletteColumnCountProperty);
+        set
+        {
+            if (object.Equals(value, this.GetValue(CustomPaletteColumnCountProperty)) == false)
+            {
+                this.SetValue(CustomPaletteColumnCountProperty, value);
+            }
+        }
+    }
+
+    /// <summary>
+    /// Identifies the <see cref="CustomPalette"/> dependency property.
+    /// </summary>
+    public static readonly DependencyProperty CustomPaletteProperty =
+        DependencyProperty.Register(
+            nameof(CustomPalette),
+            typeof(IColorPalette),
+            typeof(ColorPicker),
+            new PropertyMetadata(
+                null,
+                (s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
+
+    /// <summary>
+    /// Gets or sets the custom color palette.
+    /// This will automatically set <see cref="CustomPaletteColors"/> and <see cref="CustomPaletteColumnCount"/>
+    /// overwriting any existing values.
+    /// </summary>
+    public IColorPalette CustomPalette
+    {
+        get => (IColorPalette)this.GetValue(CustomPaletteProperty);
+        set
+        {
+            if (object.Equals(value, this.GetValue(CustomPaletteProperty)) == false)
+            {
+                this.SetValue(CustomPaletteProperty, value);
+            }
+        }
+    }
+
+    /// <summary>
+    /// Identifies the <see cref="IsColorPaletteVisible"/> dependency property.
+    /// </summary>
+    public static readonly DependencyProperty IsColorPaletteVisibleProperty =
+        DependencyProperty.Register(
+            nameof(IsColorPaletteVisible),
+            typeof(bool),
+            typeof(ColorPicker),
+            new PropertyMetadata(
+                true,
+                (s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
+
+    /// <summary>
+    /// Gets or sets a value indicating whether the color palette is visible.
+    /// </summary>
+    public bool IsColorPaletteVisible
+    {
+        get => (bool)this.GetValue(IsColorPaletteVisibleProperty);
+        set
+        {
+            if (object.Equals(value, this.GetValue(IsColorPaletteVisibleProperty)) == false)
+            {
+                this.SetValue(IsColorPaletteVisibleProperty, value);
+            }
+        }
+    }
+
+    /// <summary>
+    /// Identifies the <see cref="ShowAccentColors"/> dependency property.
+    /// </summary>
+    public static readonly DependencyProperty ShowAccentColorsProperty =
+        DependencyProperty.Register(
+            nameof(ShowAccentColors),
+            typeof(bool),
+            typeof(ColorPicker),
+            new PropertyMetadata(
+                true,
+                (s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
+
+    /// <summary>
+    /// Gets or sets a value indicating whether accent colors are shown along
+    /// with the preview color.
+    /// </summary>
+    public bool ShowAccentColors
+    {
+        get => (bool)this.GetValue(ShowAccentColorsProperty);
+        set
+        {
+            if (object.Equals(value, this.GetValue(ShowAccentColorsProperty)) == false)
+            {
+                this.SetValue(ShowAccentColorsProperty, value);
+            }
+        }
+    }
+}