Add ColorPickerButton

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -272,6 +272,7 @@
     <Content Include="Icons\More.png" />
     <Content Include="Icons\Notifications.png" />
     <Content Include="Icons\Services.png" />
+    <Content Include="SamplePages\ColorPicker\ColorPicker.png" />
     <Content Include="SamplePages\TilesBrush\TilesBrush.png" />
     <Content Include="SamplePages\Eyedropper\Eyedropper.png" />
     <Content Include="SamplePages\OnDevice\OnDevice.png" />
@@ -509,6 +510,12 @@
     <Compile Include="SamplePages\AutoFocusBehavior\AutoFocusBehaviorPage.xaml.cs">
       <DependentUpon>AutoFocusBehaviorPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="SamplePages\ColorPicker\ColorPickerButtonPage.xaml.cs">
+      <DependentUpon>ColorPickerButtonPage.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="SamplePages\ColorPicker\ColorPickerPage.xaml.cs">
+      <DependentUpon>ColorPickerPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\EnumValuesExtension\EnumValuesExtensionPage.xaml.cs">
       <DependentUpon>EnumValuesExtensionPage.xaml</DependentUpon>
     </Compile>
@@ -620,6 +627,8 @@
     <Content Include="SamplePages\EnumValuesExtension\EnumValuesExtensionCode.bind" />
     <Content Include="SamplePages\FocusBehavior\FocusBehaviorXaml.bind" />
     <Content Include="SamplePages\AutoFocusBehavior\AutoFocusBehaviorXaml.bind" />
+    <Content Include="SamplePages\ColorPicker\ColorPickerXaml.bind" />
+    <Content Include="SamplePages\ColorPicker\ColorPickerButtonXaml.bind" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">
@@ -993,6 +1002,14 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="SamplePages\ColorPicker\ColorPickerButtonPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="SamplePages\ColorPicker\ColorPickerPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="SamplePages\EnumValuesExtension\EnumValuesExtensionPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonPage.xaml

@@ -0,0 +1,15 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ColorPickerButtonPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      xmlns:primitives="using:Microsoft.Toolkit.Uwp.UI.Controls.Primitives"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+      mc:Ignorable="d">
+
+    <Grid Visibility="Collapsed">
+        <controls:ColorPickerButton />
+        <primitives:ColorPickerSlider />
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonPage.xaml.cs

@@ -0,0 +1,20 @@
+// 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 Microsoft.Toolkit.Uwp.UI.Controls;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    /// <summary>
+    /// A page that shows how to use the <see cref="UI.Controls.ColorPicker"/> control.
+    /// </summary>
+    public sealed partial class ColorPickerButtonPage : Page
+    {
+        public ColorPickerButtonPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind

@@ -0,0 +1,135 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+  <Page.Resources>
+    <SolidColorBrush Color="{ThemeResource SystemChromeLowColor}" x:Key="SystemControlForegroundChromeLowBrush"/>
+  </Page.Resources>
+
+  <Grid>
+    <Grid.RowDefinitions>
+      <RowDefinition Height="*" />
+      <RowDefinition Height="*" />
+      <RowDefinition Height="*" />
+      <RowDefinition Height="*" />
+    </Grid.RowDefinitions>
+    <!-- Example 1 -->
+    <StackPanel Grid.Row="0"
+                Orientation="Vertical"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Spacing="20">
+      <Border Background="{ThemeResource SystemChromeMediumColor}"
+              CornerRadius="4"
+              Height="100"
+              Width="300"
+              Padding="10">
+        <TextBlock TextAlignment="Center"
+                   VerticalAlignment="Center">
+          Box-shaped spectrum <LineBreak />
+          Alpha channel disabled
+        </TextBlock>
+      </Border>
+      <controls:ColorPickerButton x:Name="ColorPickerButton1"
+                                  SelectedColor="Navy">
+        <controls:ColorPickerButton.ColorPickerStyle>
+          <Style TargetType="controls:ColorPicker">
+            <Setter Property="ColorSpectrumShape" Value="Box"/>
+            <Setter Property="IsAlphaEnabled" Value="False"/>
+            <Setter Property="IsHexInputVisible" Value="True"/>
+          </Style>
+        </controls:ColorPickerButton.ColorPickerStyle>
+      </controls:ColorPickerButton>
+    </StackPanel>
+    <!-- Example 2 -->
+    <StackPanel Grid.Row="1"
+                Orientation="Vertical"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Spacing="20">
+      <Border Background="{ThemeResource SystemChromeMediumColor}"
+              CornerRadius="4"
+              Height="100"
+              Width="300"
+              Padding="10">
+        <TextBlock TextAlignment="Center"
+                  VerticalAlignment="Center">
+          Box-shaped spectrum <LineBreak />
+          Alpha channel enabled
+        </TextBlock>
+      </Border>
+      <controls:ColorPickerButton x:Name="ColorPickerButton2"
+                                  SelectedColor="Green">
+        <controls:ColorPickerButton.ColorPickerStyle>
+          <Style TargetType="controls:ColorPicker">
+            <Setter Property="ColorSpectrumShape" Value="Box"/>
+            <Setter Property="IsAlphaEnabled" Value="True"/>
+            <Setter Property="IsHexInputVisible" Value="False"/>
+          </Style>
+        </controls:ColorPickerButton.ColorPickerStyle>
+      </controls:ColorPickerButton>
+    </StackPanel>
+    <!-- Example 3 -->
+    <StackPanel Grid.Row="2"
+                Orientation="Vertical"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Spacing="20">
+      <Border Background="{ThemeResource SystemChromeMediumColor}"
+              CornerRadius="4"
+              Height="100"
+              Width="300"
+              Padding="10">
+        <TextBlock TextAlignment="Center"
+                  VerticalAlignment="Center">
+          Ring-shaped spectrum <LineBreak />
+          Alpha channel enabled
+        </TextBlock>
+      </Border>
+      <controls:ColorPickerButton x:Name="ColorPickerButton3"
+                                  SelectedColor="Transparent">
+        <controls:ColorPickerButton.ColorPickerStyle>
+          <Style TargetType="controls:ColorPicker">
+            <Setter Property="ColorSpectrumShape" Value="Ring"/>
+            <Setter Property="IsAlphaEnabled" Value="True"/>
+            <Setter Property="IsHexInputVisible" Value="True"/>
+          </Style>
+        </controls:ColorPickerButton.ColorPickerStyle>
+      </controls:ColorPickerButton>
+    </StackPanel>
+    <!-- Example 4 -->
+    <StackPanel Grid.Row="3"
+                Orientation="Vertical"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Spacing="20">
+      <Border Background="{ThemeResource SystemChromeMediumColor}"
+              CornerRadius="4"
+              Height="100"
+              Width="300"
+              Padding="10">
+        <TextBlock TextAlignment="Center"
+                  VerticalAlignment="Center">
+          Ring-shaped spectrum <LineBreak />
+          Alpha channel enabled <LineBreak />
+          Saturation+Value spectrum channels
+        </TextBlock>
+      </Border>
+      <controls:ColorPickerButton x:Name="ColorPickerButton4"
+                                  SelectedColor="Maroon">
+        <controls:ColorPickerButton.ColorPickerStyle>
+          <Style TargetType="controls:ColorPicker">
+            <Setter Property="ColorSpectrumShape" Value="Ring"/>
+            <Setter Property="ColorSpectrumComponents" Value="SaturationValue"/>
+            <Setter Property="IsAlphaEnabled" Value="True"/>
+            <Setter Property="IsHexInputVisible" Value="True"/>
+          </Style>
+        </controls:ColorPickerButton.ColorPickerStyle>
+      </controls:ColorPickerButton>
+    </StackPanel>
+  </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerPage.xaml

@@ -0,0 +1,17 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ColorPickerPage"
+      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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      xmlns:primitives="using:Microsoft.Toolkit.Uwp.UI.Controls.Primitives"
+      mc:Ignorable="d"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid
+        Visibility="Collapsed">
+        <controls:ColorPicker />
+        <primitives:ColorPickerSlider />
+    </Grid>
+
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerPage.xaml.cs

@@ -0,0 +1,20 @@
+// 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 Microsoft.Toolkit.Uwp.UI.Controls;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    /// <summary>
+    /// A page that shows how to use the <see cref="UI.Controls.ColorPicker"/> control.
+    /// </summary>
+    public sealed partial class ColorPickerPage : Page
+    {
+        public ColorPickerPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerXaml.bind

@@ -0,0 +1,89 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+  <Page.Resources>
+    <SolidColorBrush Color="{ThemeResource SystemChromeLowColor}" x:Key="SystemControlForegroundChromeLowBrush"/>
+  </Page.Resources>
+
+  <ScrollViewer>
+    <StackPanel Orientation="Vertical"
+                HorizontalAlignment="Center"
+                Spacing="20">
+      <!-- Example 1 -->
+      <Border Background="{ThemeResource SystemChromeMediumColor}"
+              CornerRadius="4"
+              Height="100"
+              Width="300"
+              Padding="10">
+        <TextBlock TextAlignment="Center"
+                   VerticalAlignment="Center">
+          Box-shaped spectrum <LineBreak />
+          Alpha channel disabled
+        </TextBlock>
+      </Border>
+      <controls:ColorPicker x:Name="ColorPicker1"
+                            Color="Navy"
+                            ColorSpectrumShape="Box"
+                            IsAlphaEnabled="False"
+                            IsHexInputVisible="True" />
+      <!-- Example 2 -->
+      <Border Background="{ThemeResource SystemChromeMediumColor}"
+              CornerRadius="4"
+              Height="100"
+              Width="300"
+              Padding="10">
+        <TextBlock TextAlignment="Center"
+                  VerticalAlignment="Center">
+          Box-shaped spectrum <LineBreak />
+          Alpha channel enabled
+        </TextBlock>
+      </Border>
+      <controls:ColorPicker x:Name="ColorPicker2"
+                            Color="Green"
+                            ColorSpectrumShape="Box"
+                            IsAlphaEnabled="True"
+                            IsHexInputVisible="False" />
+      <!-- Example 3 -->
+      <Border Background="{ThemeResource SystemChromeMediumColor}"
+              CornerRadius="4"
+              Height="100"
+              Width="300"
+              Padding="10">
+        <TextBlock TextAlignment="Center"
+                  VerticalAlignment="Center">
+          Ring-shaped spectrum <LineBreak />
+          Alpha channel enabled
+        </TextBlock>
+      </Border>
+      <controls:ColorPicker x:Name="ColorPickerButton3"
+                            Color="Transparent"
+                            ColorSpectrumShape="Ring"
+                            IsAlphaEnabled="True"
+                            IsHexInputVisible="True" />
+      <!-- Example 4 -->
+      <Border Background="{ThemeResource SystemChromeMediumColor}"
+              CornerRadius="4"
+              Height="100"
+              Width="300"
+              Padding="10">
+        <TextBlock TextAlignment="Center"
+                  VerticalAlignment="Center">
+          Ring-shaped spectrum <LineBreak />
+          Alpha channel enabled <LineBreak />
+          Saturation+Value spectrum channels
+        </TextBlock>
+      </Border>
+      <controls:ColorPicker x:Name="ColorPickerButton4"
+                            Color="Maroon"
+                            ColorSpectrumShape="Ring"
+                            ColorSpectrumComponents="SaturationValue"
+                            IsAlphaEnabled="True"
+                            IsHexInputVisible="True"/>
+    </StackPanel>
+  </ScrollViewer>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -34,6 +34,26 @@
         "Icon": "/SamplePages/Carousel/Carousel.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/Carousel.md"
       },
+      {
+        "Name": "ColorPicker",
+        "Type": "ColorPickerPage",
+        "Subcategory": "Input",
+        "About": "An improved color picker control providing more options to select colors.",
+        "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/ColorPicker",
+        "XamlCodeFile": "ColorPickerXaml.bind",
+        "Icon": "/SamplePages/ColorPicker/ColorPicker.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/ColorPicker.md"
+      },
+      {
+        "Name": "ColorPickerButton",
+        "Type": "ColorPickerButtonPage",
+        "Subcategory": "Input",
+        "About": "A color picker within a flyout opened by pressing a dropdown button containing the selected color.",
+        "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/ColorPicker",
+        "XamlCodeFile": "/SamplePages/ColorPicker/ColorPickerButtonXaml.bind",
+        "Icon": "/SamplePages/ColorPicker/ColorPicker.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/ColorPickerButton.md"
+      },
       {
         "Name": "AdaptiveGridView",
         "Type": "AdaptiveGridViewPage",