Add ThirdComponentConverter and use it

samples/ControlCatalog/Pages/ColorPickerPage.xaml

@@ -3,49 +3,77 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:primitives="clr-namespace:Avalonia.Controls.Primitives;assembly=Avalonia.Controls"
+             xmlns:pc="clr-namespace:Avalonia.Controls.Primitives.Converters;assembly=Avalonia.Controls.ColorPicker"
              mc:Ignorable="d"
              d:DesignWidth="800"
              d:DesignHeight="450"
              x:Class="ControlCatalog.Pages.ColorPickerPage">
 
-  <Grid ColumnDefinitions="Auto,Auto"
-        RowDefinitions="Auto,Auto">
-    <ColorSpectrum x:Name="ColorSpectrum1"
-                   Grid.Column="0"
-                   Grid.Row="0"
-                   Color="Red"
-                   CornerRadius="10"
-                   Height="256"
-                   Width="256" />
-    <ColorSpectrum Grid.Column="1"
-                   Grid.Row="0"
-                   Color="Green"
-                   Shape="Ring"
-                   Height="256"
-                   Width="256" />
+  <UserControl.Resources>
+    <pc:ThirdComponentConverter x:Key="ThirdComponent" />
+  </UserControl.Resources>
+
+  <Grid ColumnDefinitions="Auto,10,Auto">
     <Grid Grid.Column="0"
-          Grid.Row="1"
-          RowDefinitions="Auto,Auto,Auto,Auto,Auto"
-          Margin="0,10,0,0">
-      <ColorSlider Grid.Row="0"
+          Grid.Row="0"
+          RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto">
+      <ColorSpectrum x:Name="ColorSpectrum1"
+                     Grid.Row="0"
+                     Color="Red"
+                     CornerRadius="10"
+                     Height="256"
+                     Width="256" />
+      <ColorSlider Grid.Row="1"
+                   Margin="0,10,0,0"
                    ColorComponent="Component1"
                    ColorModel="Hsva"
-                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1, Mode=TwoWay}" />
-      <ColorSlider Grid.Row="1"
+                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
+      <ColorSlider Grid.Row="2"
                    ColorComponent="Component2"
                    ColorModel="Hsva"
-                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1, Mode=TwoWay}" />
-      <ColorSlider Grid.Row="2"
+                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
+      <ColorSlider Grid.Row="3"
                    ColorComponent="Component3"
                    ColorModel="Hsva"
-                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1, Mode=TwoWay}" />
-      <ColorSlider Grid.Row="3"
+                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
+      <ColorSlider Grid.Row="4"
+                   ColorComponent="Alpha"
+                   ColorModel="Hsva"
+                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
+      <ColorPreviewer Grid.Row="5"
+                      ShowAccentColors="True"
+                      HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
+    </Grid>
+    <Grid Grid.Column="2"
+          Grid.Row="0"
+          ColumnDefinitions="Auto,Auto,Auto"
+          RowDefinitions="Auto,Auto">
+      <ColorSlider Grid.Column="0"
+                   Grid.Row="0"
+                   IsAlphaMaxForced="True"
+                   IsSaturationValueMaxForced="False"
+                   ColorComponent="{Binding Components, ElementName=ColorSpectrum2, Converter={StaticResource ThirdComponent}}"
+                   ColorModel="Hsva"
+                   Orientation="Vertical"
+                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum2}" />
+      <ColorSpectrum x:Name="ColorSpectrum2"
+                     Grid.Column="1"
+                     Grid.Row="0"
+                     Color="Green"
+                     Shape="Ring"
+                     Height="256"
+                     Width="256" />
+      <ColorSlider Grid.Column="2"
+                   Grid.Row="0"
                    ColorComponent="Alpha"
                    ColorModel="Hsva"
-                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1, Mode=TwoWay}" />
-      <ColorPreviewer Grid.Row="4"
+                   Orientation="Vertical"
+                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum2}" />
+      <ColorPreviewer Grid.Column="0"
+                      Grid.ColumnSpan="3"
+                      Grid.Row="1"
                       ShowAccentColors="True"
-                      HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1, Mode=TwoWay}" />
+                      HsvColor="{Binding HsvColor, ElementName=ColorSpectrum2}" />
     </Grid>
   </Grid>
 </UserControl>

src/Avalonia.Controls.ColorPicker/Converters/AccentColorConverter.cs

@@ -7,6 +7,7 @@ namespace Avalonia.Controls.Primitives.Converters
 {
     /// <summary>
     /// Creates an accent color for a given base color value and step parameter.
+    /// This is a highly-specialized converter for the color picker.
     /// </summary>
     public class AccentColorConverter : IValueConverter
     {

src/Avalonia.Controls.ColorPicker/Converters/ThirdComponentConverter.cs

@@ -0,0 +1,51 @@
+using System;
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace Avalonia.Controls.Primitives.Converters
+{
+    /// <summary>
+    /// Gets the third <see cref="ColorComponent"/> corresponding with a given
+    /// <see cref="ColorSpectrumComponents"/> that represents the other two components.
+    /// This is a highly-specialized converter for the color picker.
+    /// </summary>
+    public class ThirdComponentConverter : IValueConverter
+    {
+        /// <inheritdoc/>
+        public object? Convert(
+            object? value,
+            Type targetType,
+            object? parameter,
+            CultureInfo culture)
+        {
+            if (value is ColorSpectrumComponents components)
+            {
+                // Note: Alpha is not relevant here
+                switch (components)
+                {
+                    case ColorSpectrumComponents.HueSaturation:
+                    case ColorSpectrumComponents.SaturationHue:
+                        return (ColorComponent)HsvComponent.Value;
+                    case ColorSpectrumComponents.HueValue:
+                    case ColorSpectrumComponents.ValueHue:
+                        return (ColorComponent)HsvComponent.Saturation;
+                    case ColorSpectrumComponents.SaturationValue:
+                    case ColorSpectrumComponents.ValueSaturation:
+                        return (ColorComponent)HsvComponent.Hue;
+                }
+            }
+
+            return AvaloniaProperty.UnsetValue;
+        }
+
+        /// <inheritdoc/>
+        public object? ConvertBack(
+            object? value,
+            Type targetType,
+            object? parameter,
+            CultureInfo culture)
+        {
+            return AvaloniaProperty.UnsetValue;
+        }
+    }
+}