From c959c0594ff111f2e1a9342cfe046a3a4d7a50c7 Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Sun, 23 Oct 2022 16:08:09 -0400
Subject: [PATCH 1/4] Update palettes used in the ColorPickerPage

---
 .../ControlCatalog/Pages/ColorPickerPage.xaml | 21 ++++++++++++++++---
 .../Pages/ColorPickerPage.xaml.cs             |  1 +
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/samples/ControlCatalog/Pages/ColorPickerPage.xaml b/samples/ControlCatalog/Pages/ColorPickerPage.xaml
index 69ceaea328..c0bb95ae92 100644
--- a/samples/ControlCatalog/Pages/ColorPickerPage.xaml
+++ b/samples/ControlCatalog/Pages/ColorPickerPage.xaml
@@ -24,18 +24,19 @@
                  HsvColor="hsv(120, 1, 1)"
                  Margin="0,50,0,0">
       <ColorPicker.Palette>
-        <controls:FlatColorPalette />
+        <controls:FlatHalfColorPalette />
       </ColorPicker.Palette>
     </ColorPicker>
     <Grid Grid.Column="2"
           Grid.Row="0"
-          RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto">
+          RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto">
       <ColorSpectrum x:Name="ColorSpectrum1"
                      Grid.Row="0"
                      Color="Red"
                      CornerRadius="10"
                      Height="256"
                      Width="256" />
+      <!-- HSV Sliders -->
       <ColorSlider Grid.Row="1"
                    Margin="0,10,0,0"
                    ColorComponent="Component1"
@@ -53,7 +54,21 @@
                    ColorComponent="Alpha"
                    ColorModel="Hsva"
                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
-      <ColorPreviewer Grid.Row="5"
+      <!-- RGB Sliders -->
+      <!--<ColorSlider Grid.Row="5"
+                   Margin="0,10,0,0"
+                   ColorComponent="Component1"
+                   ColorModel="Rgba"
+                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
+      <ColorSlider Grid.Row="6"
+                   ColorComponent="Component2"
+                   ColorModel="Rgba"
+                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
+      <ColorSlider Grid.Row="7"
+                   ColorComponent="Component3"
+                   ColorModel="Rgba"
+                   HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />-->
+      <ColorPreviewer Grid.Row="8"
                       IsAccentColorsVisible="False"
                       HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
     </Grid>
diff --git a/samples/ControlCatalog/Pages/ColorPickerPage.xaml.cs b/samples/ControlCatalog/Pages/ColorPickerPage.xaml.cs
index 4671bbdb7c..52d63ded32 100644
--- a/samples/ControlCatalog/Pages/ColorPickerPage.xaml.cs
+++ b/samples/ControlCatalog/Pages/ColorPickerPage.xaml.cs
@@ -20,6 +20,7 @@ namespace ControlCatalog.Pages
                 Color = Colors.Blue,
                 Margin = new Thickness(0, 50, 0, 0),
                 HorizontalAlignment = HorizontalAlignment.Center,
+                Palette = new MaterialHalfColorPalette(),
             };
             Grid.SetColumn(colorPicker, 2);
             Grid.SetRow(colorPicker, 1);

From ca85843f99b26c7377ad81414df25567bb3f9d8e Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Sun, 23 Oct 2022 16:20:16 -0400
Subject: [PATCH 2/4] Rework ColorPicker control template duplicating from
 ColorView

---
 .../ColorPicker/ColorPicker.cs                |  28 -
 .../Themes/Fluent/ColorPicker.xaml            | 484 +++++++++++++++--
 .../Themes/Simple/ColorPicker.xaml            | 486 ++++++++++++++++--
 3 files changed, 907 insertions(+), 91 deletions(-)

diff --git a/src/Avalonia.Controls.ColorPicker/ColorPicker/ColorPicker.cs b/src/Avalonia.Controls.ColorPicker/ColorPicker/ColorPicker.cs
index 29f9f3c571..01cb745ba7 100644
--- a/src/Avalonia.Controls.ColorPicker/ColorPicker/ColorPicker.cs
+++ b/src/Avalonia.Controls.ColorPicker/ColorPicker/ColorPicker.cs
@@ -14,33 +14,5 @@ namespace Avalonia.Controls
         public ColorPicker() : base()
         {
         }
-
-        /// <inheritdoc/>
-        protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
-        {
-            base.OnApplyTemplate(e);
-
-            // Until this point the ColorPicker itself is responsible to process property updates.
-            // This, for example, syncs Color with HsvColor and updates primitive controls.
-            //
-            // However, when the template is created, hand-off this change processing to the
-            // ColorView within the control template itself. Remember ColorPicker derives from
-            // ColorView so we don't want two instances of the same logic fighting each other.
-            // It is best to hand-off to the ColorView in the control template because that is the
-            // primary point of user-interaction for the overall control. It also simplifies binding.
-            //
-            // Keep in mind this hand-off is not possible until the template controls are created
-            // which is done after the ColorPicker is instantiated. The ColorPicker must still
-            // process updates before the template is applied to ensure all property changes in
-            // XAML or object initializers are handled correctly. Otherwise, there can be bugs
-            // such as setting the Color property doesn't work because the HsvColor is never updated
-            // and then the Color value is lost once the template loads (and the template ColorView
-            // takes over).
-            //
-            // In order to complete this hand-off, completely ignore property changes here in the
-            // ColorPicker. This means the ColorView in the control template is now responsible to
-            // process property changes and handle primary calculations.
-            base.ignorePropertyChanged = true;
-        }
     }
 }
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
index 74a1df4991..1bcd17393d 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
@@ -1,8 +1,15 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:controls="using:Avalonia.Controls"
+                    xmlns:converters="using:Avalonia.Controls.Converters"
+                    xmlns:primitives="using:Avalonia.Controls.Primitives"
+                    xmlns:pc="clr-namespace:Avalonia.Controls.Primitives.Converters;assembly=Avalonia.Controls.ColorPicker"
                     x:CompileBindings="True">
 
+  <ResourceDictionary.MergedDictionaries>
+    <ResourceInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml" />
+  </ResourceDictionary.MergedDictionaries>
+
   <ControlTheme x:Key="{x:Type ColorPicker}"
                 TargetType="ColorPicker">
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
@@ -43,39 +50,454 @@
           </DropDownButton.Content>
           <DropDownButton.Flyout>
             <Flyout FlyoutPresenterClasses="nopadding">
-              <ColorView x:Name="FlyoutColorView"
-                         Color="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
-                         ColorModel="{Binding ColorModel, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
-                         ColorSpectrumComponents="{TemplateBinding ColorSpectrumComponents}"
-                         ColorSpectrumShape="{TemplateBinding ColorSpectrumShape}"
-                         HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
-                         IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
-                         IsAlphaEnabled="{TemplateBinding IsAlphaEnabled}"
-                         IsAlphaVisible="{TemplateBinding IsAlphaVisible}"
-                         IsColorComponentsVisible="{TemplateBinding IsColorComponentsVisible}"
-                         IsColorModelVisible="{TemplateBinding IsColorModelVisible}"
-                         IsColorPaletteVisible="{TemplateBinding IsColorPaletteVisible}"
-                         IsColorPreviewVisible="{TemplateBinding IsColorPreviewVisible}"
-                         IsColorSpectrumVisible="{TemplateBinding IsColorSpectrumVisible}"
-                         IsColorSpectrumSliderVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
-                         IsComponentSliderVisible="{TemplateBinding IsComponentSliderVisible}"
-                         IsComponentTextInputVisible="{TemplateBinding IsComponentTextInputVisible}"
-                         IsHexInputVisible="{TemplateBinding IsHexInputVisible}"
-                         MaxHue="{TemplateBinding MaxHue}"
-                         MaxSaturation="{TemplateBinding MaxSaturation}"
-                         MaxValue="{TemplateBinding MaxValue}"
-                         MinHue="{TemplateBinding MinHue}"
-                         MinSaturation="{TemplateBinding MinSaturation}"
-                         MinValue="{TemplateBinding MinValue}"
-                         PaletteColors="{TemplateBinding PaletteColors}"
-                         PaletteColumnCount="{TemplateBinding PaletteColumnCount}"
-                         Palette="{TemplateBinding Palette}"
-                         SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
-                <ColorView.Resources>
+
+              <!-- The following is copy-pasted from the ColorView's control template.
+                   It MUST always be kept in sync with the ColorView (which is master).
+                   Note the only changes are resources specific to the ColorPicker. -->
+              <Grid RowDefinitions="Auto,Auto">
+
+                <Grid.Resources>
                   <!-- This radius must follow OverlayCornerRadius -->
                   <CornerRadius x:Key="ColorViewTabBackgroundCornerRadius">5,5,0,0</CornerRadius>
-                </ColorView.Resources>
-              </ColorView>
+                </Grid.Resources>
+
+                <!-- Backgrounds -->
+                <!-- TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}" -->
+                <Border x:Name="TabBackgroundBorder"
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Height="48"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Top"
+                        Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"
+                        BorderBrush="{DynamicResource ColorViewTabBorderBrush}"
+                        CornerRadius="{DynamicResource ColorViewTabBackgroundCornerRadius}" />
+                <Border x:Name="ContentBackgroundBorder"
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Margin="0,48,0,0"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}"
+                        Background="{DynamicResource ColorViewContentBackgroundBrush}"
+                        BorderBrush="{DynamicResource ColorViewContentBorderBrush}"
+                        BorderThickness="0,1,0,0" />
+
+                <TabControl x:Name="PART_TabControl"
+                            Grid.Row="0"
+                            Height="338"
+                            Width="350"
+                            Padding="0"
+                            SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                  <TabControl.ItemsPanel>
+                    <ItemsPanelTemplate>
+                      <UniformGrid Columns="0"
+                                   Rows="1" />
+                    </ItemsPanelTemplate>
+                  </TabControl.ItemsPanel>
+                  <!-- Spectrum Tab -->
+                  <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
+                           IsVisible="{TemplateBinding IsColorSpectrumVisible}">
+                    <TabItem.Header>
+                      <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                        <PathIcon Width="20"
+                                  Height="20"
+                                  Data="{DynamicResource ColorViewSpectrumIconGeometry}" />
+                      </Border>
+                    </TabItem.Header>
+                    <Grid RowDefinitions="*"
+                          Margin="12">
+                      <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto"
+                                          MinWidth="32" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto"
+                                          MinWidth="32" />
+                      </Grid.ColumnDefinitions>
+                      <primitives:ColorSlider x:Name="ColorSpectrumThirdComponentSlider"
+                                              AutomationProperties.Name="Third Component"
+                                              Grid.Column="0"
+                                              IsAlphaMaxForced="True"
+                                              IsSaturationValueMaxForced="False"
+                                              Orientation="Vertical"
+                                              ColorModel="Hsva"
+                                              ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
+                                              HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                              HorizontalAlignment="Center"
+                                              VerticalAlignment="Stretch"
+                                              Margin="0,0,12,0"
+                                              IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}" />
+                      <primitives:ColorSpectrum x:Name="ColorSpectrum"
+                                                Grid.Column="1"
+                                                Components="{TemplateBinding ColorSpectrumComponents}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                MinHue="{TemplateBinding MinHue}"
+                                                MaxHue="{TemplateBinding MaxHue}"
+                                                MinSaturation="{TemplateBinding MinSaturation}"
+                                                MaxSaturation="{TemplateBinding MaxSaturation}"
+                                                MinValue="{TemplateBinding MinValue}"
+                                                MaxValue="{TemplateBinding MaxValue}"
+                                                Shape="{TemplateBinding ColorSpectrumShape}"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Stretch" />
+                      <primitives:ColorSlider x:Name="ColorSpectrumAlphaSlider"
+                                              AutomationProperties.Name="Alpha Component"
+                                              Grid.Column="2"
+                                              Orientation="Vertical"
+                                              ColorModel="Hsva"
+                                              ColorComponent="Alpha"
+                                              HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                              HorizontalAlignment="Center"
+                                              VerticalAlignment="Stretch"
+                                              Margin="12,0,0,0"
+                                              IsEnabled="{TemplateBinding IsAlphaEnabled}">
+                        <primitives:ColorSlider.IsVisible>
+                          <MultiBinding Converter="{x:Static BoolConverters.And}">
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsAlphaVisible" />
+                          </MultiBinding>
+                        </primitives:ColorSlider.IsVisible>
+                      </primitives:ColorSlider>
+                    </Grid>
+                  </TabItem>
+                  <!-- Palette Tab -->
+                  <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
+                           IsVisible="{TemplateBinding IsColorPaletteVisible}">
+                    <TabItem.Header>
+                      <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                        <PathIcon Width="20"
+                                  Height="20"
+                                  Data="{DynamicResource ColorViewPaletteIconGeometry}" />
+                      </Border>
+                    </TabItem.Header>
+                    <ListBox Theme="{StaticResource ColorViewPaletteListBoxTheme}"
+                             ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
+                             Items="{TemplateBinding PaletteColors}"
+                             SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
+                             UseLayoutRounding="False"
+                             Margin="12">
+                      <ListBox.ItemTemplate>
+                        <DataTemplate DataType="{x:Type Color}">
+                          <Border AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                  ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                  HorizontalAlignment="Stretch"
+                                  VerticalAlignment="Stretch">
+                            <Border.Background>
+                              <SolidColorBrush Color="{Binding}" />
+                            </Border.Background>
+                          </Border>
+                        </DataTemplate>
+                      </ListBox.ItemTemplate>
+                      <ListBox.ItemsPanel>
+                        <ItemsPanelTemplate>
+                          <UniformGrid Columns="{Binding $parent[ColorView].PaletteColumnCount}" />
+                        </ItemsPanelTemplate>
+                      </ListBox.ItemsPanel>
+                    </ListBox>
+                  </TabItem>
+                  <!-- Components Tab -->
+                  <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
+                           IsVisible="{TemplateBinding IsColorComponentsVisible}">
+                    <TabItem.Header>
+                      <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                        <PathIcon Width="20"
+                                  Height="20"
+                                  Data="{DynamicResource ColorViewComponentsIconGeometry}" />
+                      </Border>
+                    </TabItem.Header>
+                    <Grid ColumnDefinitions="Auto,Auto,*"
+                          RowDefinitions="Auto,24,1*,1*,1*,1*,12"
+                          Margin="12">
+                      <!-- Top color model & Hex input -->
+                      <Grid Grid.Column="0"
+                            Grid.ColumnSpan="3"
+                            Grid.Row="0"
+                            ColumnDefinitions="1*,12,1*">
+                        <!-- Content RGB/HSV names are hard-coded and considered universal -->
+                        <!-- RadioButtons are styled to look like a 'SegmentedControl' or 'ButtonGroup' -->
+                        <Grid ColumnDefinitions="1*,1*"
+                              IsVisible="{TemplateBinding IsColorModelVisible}">
+                          <RadioButton x:Name="RgbRadioButton"
+                                       Theme="{StaticResource ColorViewColorModelRadioButtonTheme}"
+                                       Grid.Column="0"
+                                       Content="RGB"
+                                       CornerRadius="4,0,0,4"
+                                       BorderThickness="1,1,0,1"
+                                       IsChecked="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Rgba}, Mode=TwoWay}" />
+                          <RadioButton x:Name="HsvRadioButton"
+                                       Theme="{StaticResource ColorViewColorModelRadioButtonTheme}"
+                                       Grid.Column="1"
+                                       Content="HSV"
+                                       CornerRadius="0,4,4,0"
+                                       BorderThickness="0,1,1,1"
+                                       IsChecked="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Hsva}, Mode=TwoWay}" />
+                        </Grid>
+                        <Grid x:Name="HexInputGrid"
+                              Grid.Column="2"
+                              IsVisible="{TemplateBinding IsHexInputVisible}">
+                          <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="30" />
+                            <ColumnDefinition Width="*" />
+                          </Grid.ColumnDefinitions>
+                          <Border Grid.Column="0"
+                                  Height="32"
+                                  Background="{DynamicResource TextControlBackgroundDisabled}"
+                                  BorderBrush="{DynamicResource TextControlBorderBrush}"
+                                  BorderThickness="1,1,0,1"
+                                  CornerRadius="4,0,0,4">
+                            <TextBlock Foreground="{DynamicResource TextControlForegroundDisabled}"
+                                       FontWeight="SemiBold"
+                                       Text="#"
+                                       HorizontalAlignment="Center"
+                                       VerticalAlignment="Center" />
+                          </Border>
+                          <!-- Color updated in code-behind -->
+                          <TextBox x:Name="PART_HexTextBox"
+                                   Grid.Column="1"
+                                   AutomationProperties.Name="Hexadecimal Color"
+                                   Height="32"
+                                   MaxLength="8"
+                                   HorizontalAlignment="Stretch"
+                                   CornerRadius="0,4,4,0" />
+                        </Grid>
+                      </Grid>
+                      <!-- Color component editing controls -->
+                      <!-- Component 1 RGB:Red HSV:Hue -->
+                      <Border Grid.Column="0"
+                              Grid.Row="2"
+                              Height="{Binding ElementName=Component1NumericUpDown, Path=Bounds.Height}"
+                              Width="{DynamicResource ColorViewComponentLabelWidth}"
+                              Background="{DynamicResource TextControlBackgroundDisabled}"
+                              BorderBrush="{DynamicResource TextControlBorderBrush}"
+                              BorderThickness="1,1,0,1"
+                              CornerRadius="4,0,0,4"
+                              VerticalAlignment="Center"
+                              IsVisible="{TemplateBinding IsComponentTextInputVisible}">
+                        <Panel HorizontalAlignment="Center"
+                               VerticalAlignment="Center">
+                          <TextBlock Foreground="{DynamicResource TextControlForegroundDisabled}"
+                                     FontWeight="SemiBold"
+                                     Text="R"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Rgba}, Mode=OneWay}" />
+                          <TextBlock Foreground="{DynamicResource TextControlForegroundDisabled}"
+                                     FontWeight="SemiBold"
+                                     Text="H"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Hsva}, Mode=OneWay}" />
+                        </Panel>
+                      </Border>
+                      <NumericUpDown x:Name="Component1NumericUpDown"
+                                     Grid.Column="1"
+                                     Grid.Row="2"
+                                     AllowSpin="True"
+                                     ShowButtonSpinner="False"
+                                     Height="32"
+                                     Width="{DynamicResource ColorViewComponentTextInputWidth}"
+                                     CornerRadius="0,4,4,0"
+                                     Margin="0,0,12,0"
+                                     VerticalAlignment="Center"
+                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                     Minimum="{Binding Minimum, ElementName=Component1Slider}"
+                                     Maximum="{Binding Maximum, ElementName=Component1Slider}"
+                                     Value="{Binding Value, ElementName=Component1Slider}"
+                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}" />
+                      <primitives:ColorSlider x:Name="Component1Slider"
+                                              Grid.Column="2"
+                                              Grid.Row="2"
+                                              Orientation="Horizontal"
+                                              IsRoundingEnabled="True"
+                                              IsSnapToTickEnabled="True"
+                                              TickFrequency="1"
+                                              ColorComponent="Component1"
+                                              ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
+                                              HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Center"
+                                              IsVisible="{TemplateBinding IsComponentSliderVisible}" />
+                      <!-- Component 2 RGB:Green HSV:Saturation -->
+                      <Border Grid.Column="0"
+                              Grid.Row="3"
+                              Width="{DynamicResource ColorViewComponentLabelWidth}"
+                              Height="{Binding ElementName=Component2NumericUpDown, Path=Bounds.Height}"
+                              Background="{DynamicResource TextControlBackgroundDisabled}"
+                              BorderBrush="{DynamicResource TextControlBorderBrush}"
+                              BorderThickness="1,1,0,1"
+                              CornerRadius="4,0,0,4"
+                              VerticalAlignment="Center"
+                              IsVisible="{TemplateBinding IsComponentTextInputVisible}">
+                        <Panel HorizontalAlignment="Center"
+                               VerticalAlignment="Center">
+                          <TextBlock Foreground="{DynamicResource TextControlForegroundDisabled}"
+                                     FontWeight="SemiBold"
+                                     Text="G"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Rgba}, Mode=OneWay}" />
+                          <TextBlock Foreground="{DynamicResource TextControlForegroundDisabled}"
+                                     FontWeight="SemiBold"
+                                     Text="S"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Hsva}, Mode=OneWay}" />
+                        </Panel>
+                      </Border>
+                      <NumericUpDown x:Name="Component2NumericUpDown"
+                                     Grid.Column="1"
+                                     Grid.Row="3"
+                                     AllowSpin="True"
+                                     ShowButtonSpinner="False"
+                                     Height="32"
+                                     Width="{DynamicResource ColorViewComponentTextInputWidth}"
+                                     CornerRadius="0,4,4,0"
+                                     Margin="0,0,12,0"
+                                     VerticalAlignment="Center"
+                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                     Minimum="{Binding Minimum, ElementName=Component2Slider}"
+                                     Maximum="{Binding Maximum, ElementName=Component2Slider}"
+                                     Value="{Binding Value, ElementName=Component2Slider}"
+                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}" />
+                      <primitives:ColorSlider x:Name="Component2Slider"
+                                              Grid.Column="2"
+                                              Grid.Row="3"
+                                              Orientation="Horizontal"
+                                              IsRoundingEnabled="True"
+                                              IsSnapToTickEnabled="True"
+                                              TickFrequency="1"
+                                              ColorComponent="Component2"
+                                              ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
+                                              HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Center"
+                                              IsVisible="{TemplateBinding IsComponentSliderVisible}" />
+                      <!-- Component 3 RGB:Blue HSV:Value -->
+                      <Border Grid.Column="0"
+                              Grid.Row="4"
+                              Width="{DynamicResource ColorViewComponentLabelWidth}"
+                              Height="{Binding ElementName=Component3NumericUpDown, Path=Bounds.Height}"
+                              Background="{DynamicResource TextControlBackgroundDisabled}"
+                              BorderBrush="{DynamicResource TextControlBorderBrush}"
+                              BorderThickness="1,1,0,1"
+                              CornerRadius="4,0,0,4"
+                              VerticalAlignment="Center"
+                              IsVisible="{TemplateBinding IsComponentTextInputVisible}">
+                        <Panel HorizontalAlignment="Center"
+                               VerticalAlignment="Center">
+                          <TextBlock Foreground="{DynamicResource TextControlForegroundDisabled}"
+                                     FontWeight="SemiBold"
+                                     Text="B"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Rgba}, Mode=OneWay}" />
+                          <TextBlock Foreground="{DynamicResource TextControlForegroundDisabled}"
+                                     FontWeight="SemiBold"
+                                     Text="V"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Hsva}, Mode=OneWay}" />
+                        </Panel>
+                      </Border>
+                      <NumericUpDown x:Name="Component3NumericUpDown"
+                                     Grid.Column="1"
+                                     Grid.Row="4"
+                                     AllowSpin="True"
+                                     ShowButtonSpinner="False"
+                                     Height="32"
+                                     Width="{DynamicResource ColorViewComponentTextInputWidth}"
+                                     CornerRadius="0,4,4,0"
+                                     Margin="0,0,12,0"
+                                     VerticalAlignment="Center"
+                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                     Minimum="{Binding Minimum, ElementName=Component3Slider}"
+                                     Maximum="{Binding Maximum, ElementName=Component3Slider}"
+                                     Value="{Binding Value, ElementName=Component3Slider}"
+                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}" />
+                      <primitives:ColorSlider x:Name="Component3Slider"
+                                              Grid.Column="2"
+                                              Grid.Row="4"
+                                              Orientation="Horizontal"
+                                              IsRoundingEnabled="True"
+                                              IsSnapToTickEnabled="True"
+                                              TickFrequency="1"
+                                              ColorComponent="Component3"
+                                              ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
+                                              HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Center"
+                                              IsVisible="{TemplateBinding IsComponentSliderVisible}" />
+                      <!-- Alpha Component -->
+                      <Border Grid.Column="0"
+                              Grid.Row="5"
+                              Width="{DynamicResource ColorViewComponentLabelWidth}"
+                              Height="{Binding ElementName=AlphaComponentNumericUpDown, Path=Bounds.Height}"
+                              Background="{DynamicResource TextControlBackgroundDisabled}"
+                              BorderBrush="{DynamicResource TextControlBorderBrush}"
+                              BorderThickness="1,1,0,1"
+                              CornerRadius="4,0,0,4"
+                              VerticalAlignment="Center"
+                              IsEnabled="{TemplateBinding IsAlphaEnabled}">
+                        <TextBlock x:Name="AlphaComponentTextBlock"
+                                   Foreground="{DynamicResource TextControlForegroundDisabled}"
+                                   FontWeight="SemiBold"
+                                   Text="A"
+                                   HorizontalAlignment="Center"
+                                   VerticalAlignment="Center" />
+                        <Border.IsVisible>
+                          <MultiBinding Converter="{x:Static BoolConverters.And}">
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsAlphaVisible" />
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsComponentTextInputVisible" />
+                          </MultiBinding>
+                        </Border.IsVisible>
+                      </Border>
+                      <NumericUpDown x:Name="AlphaComponentNumericUpDown"
+                                     Grid.Column="1"
+                                     Grid.Row="5"
+                                     AllowSpin="True"
+                                     ShowButtonSpinner="False"
+                                     Height="32"
+                                     Width="{DynamicResource ColorViewComponentTextInputWidth}"
+                                     CornerRadius="0,4,4,0"
+                                     Margin="0,0,12,0"
+                                     VerticalAlignment="Center"
+                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                     Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
+                                     Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
+                                     Value="{Binding Value, ElementName=AlphaComponentSlider}"
+                                     IsEnabled="{TemplateBinding IsAlphaEnabled}">
+                        <NumericUpDown.IsVisible>
+                          <MultiBinding Converter="{x:Static BoolConverters.And}">
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsAlphaVisible" />
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsComponentTextInputVisible" />
+                          </MultiBinding>
+                        </NumericUpDown.IsVisible>
+                      </NumericUpDown>
+                      <primitives:ColorSlider x:Name="AlphaComponentSlider"
+                                              Grid.Column="2"
+                                              Grid.Row="5"
+                                              Orientation="Horizontal"
+                                              IsRoundingEnabled="True"
+                                              IsSnapToTickEnabled="True"
+                                              TickFrequency="1"
+                                              ColorComponent="Alpha"
+                                              ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
+                                              HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Center"
+                                              IsEnabled="{TemplateBinding IsAlphaEnabled}">
+                        <primitives:ColorSlider.IsVisible>
+                          <MultiBinding Converter="{x:Static BoolConverters.And}">
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsAlphaVisible" />
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsComponentSliderVisible" />
+                          </MultiBinding>
+                        </primitives:ColorSlider.IsVisible>
+                      </primitives:ColorSlider>
+                    </Grid>
+                  </TabItem>
+                </TabControl>
+                <!-- Previewer -->
+                <!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
+                <primitives:ColorPreviewer Grid.Row="1"
+                                           HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                           IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
+                                           Margin="12,-5,12,7"
+                                           IsVisible="{TemplateBinding IsColorPreviewVisible}" />
+              </Grid>
             </Flyout>
           </DropDownButton.Flyout>
         </DropDownButton>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml
index 560d326f92..fdee64dfd2 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml
@@ -1,8 +1,15 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:controls="using:Avalonia.Controls"
+                    xmlns:converters="using:Avalonia.Controls.Converters"
+                    xmlns:primitives="using:Avalonia.Controls.Primitives"
+                    xmlns:pc="clr-namespace:Avalonia.Controls.Primitives.Converters;assembly=Avalonia.Controls.ColorPicker"
                     x:CompileBindings="True">
 
+  <ResourceDictionary.MergedDictionaries>
+    <ResourceInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml" />
+  </ResourceDictionary.MergedDictionaries>
+
   <ControlTheme x:Key="{x:Type ColorPicker}"
                 TargetType="ColorPicker">
     <Setter Property="CornerRadius" Value="0" />
@@ -42,40 +49,455 @@
             </Panel>
           </DropDownButton.Content>
           <DropDownButton.Flyout>
-            <Flyout FlyoutPresenterClasses="nopadding">
-              <ColorView x:Name="FlyoutColorView"
-                         Color="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
-                         ColorModel="{Binding ColorModel, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
-                         ColorSpectrumComponents="{TemplateBinding ColorSpectrumComponents}"
-                         ColorSpectrumShape="{TemplateBinding ColorSpectrumShape}"
-                         HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
-                         IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
-                         IsAlphaEnabled="{TemplateBinding IsAlphaEnabled}"
-                         IsAlphaVisible="{TemplateBinding IsAlphaVisible}"
-                         IsColorComponentsVisible="{TemplateBinding IsColorComponentsVisible}"
-                         IsColorModelVisible="{TemplateBinding IsColorModelVisible}"
-                         IsColorPaletteVisible="{TemplateBinding IsColorPaletteVisible}"
-                         IsColorPreviewVisible="{TemplateBinding IsColorPreviewVisible}"
-                         IsColorSpectrumVisible="{TemplateBinding IsColorSpectrumVisible}"
-                         IsColorSpectrumSliderVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
-                         IsComponentSliderVisible="{TemplateBinding IsComponentSliderVisible}"
-                         IsComponentTextInputVisible="{TemplateBinding IsComponentTextInputVisible}"
-                         IsHexInputVisible="{TemplateBinding IsHexInputVisible}"
-                         MaxHue="{TemplateBinding MaxHue}"
-                         MaxSaturation="{TemplateBinding MaxSaturation}"
-                         MaxValue="{TemplateBinding MaxValue}"
-                         MinHue="{TemplateBinding MinHue}"
-                         MinSaturation="{TemplateBinding MinSaturation}"
-                         MinValue="{TemplateBinding MinValue}"
-                         PaletteColors="{TemplateBinding PaletteColors}"
-                         PaletteColumnCount="{TemplateBinding PaletteColumnCount}"
-                         Palette="{TemplateBinding Palette}"
-                         SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
-                <ColorView.Resources>
+            <Flyout>
+
+              <!-- The following is copy-pasted from the ColorView's control template.
+                   It MUST always be kept in sync with the ColorView (which is master).
+                   Note the only changes are resources specific to the ColorPicker. -->
+              <Grid RowDefinitions="Auto,Auto">
+
+                <Grid.Resources>
                   <!-- This radius must follow OverlayCornerRadius -->
                   <CornerRadius x:Key="ColorViewTabBackgroundCornerRadius">0,0,0,0</CornerRadius>
-                </ColorView.Resources>
-              </ColorView>
+                </Grid.Resources>
+
+                <!-- Backgrounds -->
+                <!-- TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}" -->
+                <Border x:Name="TabBackgroundBorder"
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Height="48"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Top"
+                        Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"
+                        BorderBrush="{DynamicResource ColorViewTabBorderBrush}"
+                        CornerRadius="{DynamicResource ColorViewTabBackgroundCornerRadius}" />
+                <Border x:Name="ContentBackgroundBorder"
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Margin="0,48,0,0"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}"
+                        Background="{DynamicResource ColorViewContentBackgroundBrush}"
+                        BorderBrush="{DynamicResource ColorViewContentBorderBrush}"
+                        BorderThickness="0,1,0,0" />
+
+                <TabControl x:Name="PART_TabControl"
+                            Grid.Row="0"
+                            Height="338"
+                            Width="350"
+                            Padding="0"
+                            SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                  <TabControl.ItemsPanel>
+                    <ItemsPanelTemplate>
+                      <UniformGrid Columns="0"
+                                   Rows="1" />
+                    </ItemsPanelTemplate>
+                  </TabControl.ItemsPanel>
+                  <!-- Spectrum Tab -->
+                  <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
+                           IsVisible="{TemplateBinding IsColorSpectrumVisible}">
+                    <TabItem.Header>
+                      <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                        <PathIcon Width="20"
+                                  Height="20"
+                                  Data="{DynamicResource ColorViewSpectrumIconGeometry}" />
+                      </Border>
+                    </TabItem.Header>
+                    <Grid RowDefinitions="*"
+                          Margin="12">
+                      <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto"
+                                          MinWidth="32" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto"
+                                          MinWidth="32" />
+                      </Grid.ColumnDefinitions>
+                      <primitives:ColorSlider x:Name="ColorSpectrumThirdComponentSlider"
+                                              AutomationProperties.Name="Third Component"
+                                              Grid.Column="0"
+                                              IsAlphaMaxForced="True"
+                                              IsSaturationValueMaxForced="False"
+                                              Orientation="Vertical"
+                                              ColorModel="Hsva"
+                                              ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
+                                              HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                              HorizontalAlignment="Center"
+                                              VerticalAlignment="Stretch"
+                                              Margin="0,0,12,0"
+                                              IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}" />
+                      <primitives:ColorSpectrum x:Name="ColorSpectrum"
+                                                Grid.Column="1"
+                                                Components="{TemplateBinding ColorSpectrumComponents}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                MinHue="{TemplateBinding MinHue}"
+                                                MaxHue="{TemplateBinding MaxHue}"
+                                                MinSaturation="{TemplateBinding MinSaturation}"
+                                                MaxSaturation="{TemplateBinding MaxSaturation}"
+                                                MinValue="{TemplateBinding MinValue}"
+                                                MaxValue="{TemplateBinding MaxValue}"
+                                                Shape="{TemplateBinding ColorSpectrumShape}"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Stretch" />
+                      <primitives:ColorSlider x:Name="ColorSpectrumAlphaSlider"
+                                              AutomationProperties.Name="Alpha Component"
+                                              Grid.Column="2"
+                                              Orientation="Vertical"
+                                              ColorModel="Hsva"
+                                              ColorComponent="Alpha"
+                                              HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                              HorizontalAlignment="Center"
+                                              VerticalAlignment="Stretch"
+                                              Margin="12,0,0,0"
+                                              IsEnabled="{TemplateBinding IsAlphaEnabled}">
+                        <primitives:ColorSlider.IsVisible>
+                          <MultiBinding Converter="{x:Static BoolConverters.And}">
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsAlphaVisible" />
+                          </MultiBinding>
+                        </primitives:ColorSlider.IsVisible>
+                      </primitives:ColorSlider>
+                    </Grid>
+                  </TabItem>
+                  <!-- Palette Tab -->
+                  <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
+                           IsVisible="{TemplateBinding IsColorPaletteVisible}">
+                    <TabItem.Header>
+                      <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                        <PathIcon Width="20"
+                                  Height="20"
+                                  Data="{DynamicResource ColorViewPaletteIconGeometry}" />
+                      </Border>
+                    </TabItem.Header>
+                    <ListBox Theme="{StaticResource ColorViewPaletteListBoxTheme}"
+                             ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
+                             Items="{TemplateBinding PaletteColors}"
+                             SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
+                             UseLayoutRounding="False"
+                             Margin="12">
+                      <ListBox.ItemTemplate>
+                        <DataTemplate DataType="{x:Type Color}">
+                          <Border AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                  ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                  HorizontalAlignment="Stretch"
+                                  VerticalAlignment="Stretch">
+                            <Border.Background>
+                              <SolidColorBrush Color="{Binding}" />
+                            </Border.Background>
+                          </Border>
+                        </DataTemplate>
+                      </ListBox.ItemTemplate>
+                      <ListBox.ItemsPanel>
+                        <ItemsPanelTemplate>
+                          <UniformGrid Columns="{Binding $parent[ColorView].PaletteColumnCount}" />
+                        </ItemsPanelTemplate>
+                      </ListBox.ItemsPanel>
+                    </ListBox>
+                  </TabItem>
+                  <!-- Components Tab -->
+                  <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
+                           IsVisible="{TemplateBinding IsColorComponentsVisible}">
+                    <TabItem.Header>
+                      <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                        <PathIcon Width="20"
+                                  Height="20"
+                                  Data="{DynamicResource ColorViewComponentsIconGeometry}" />
+                      </Border>
+                    </TabItem.Header>
+                    <Grid ColumnDefinitions="Auto,Auto,*"
+                          RowDefinitions="Auto,24,1*,1*,1*,1*,12"
+                          Margin="12">
+                      <!-- Top color model & Hex input -->
+                      <Grid Grid.Column="0"
+                            Grid.ColumnSpan="3"
+                            Grid.Row="0"
+                            ColumnDefinitions="1*,12,1*">
+                        <!-- Content RGB/HSV names are hard-coded and considered universal -->
+                        <!-- RadioButtons are styled to look like a 'SegmentedControl' or 'ButtonGroup' -->
+                        <Grid ColumnDefinitions="1*,1*"
+                              IsVisible="{TemplateBinding IsColorModelVisible}">
+                          <RadioButton x:Name="RgbRadioButton"
+                                       Theme="{StaticResource ColorViewColorModelRadioButtonTheme}"
+                                       Grid.Column="0"
+                                       Content="RGB"
+                                       CornerRadius="0,0,0,0"
+                                       BorderThickness="1,1,0,1"
+                                       IsChecked="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Rgba}, Mode=TwoWay}" />
+                          <RadioButton x:Name="HsvRadioButton"
+                                       Theme="{StaticResource ColorViewColorModelRadioButtonTheme}"
+                                       Grid.Column="1"
+                                       Content="HSV"
+                                       CornerRadius="0,0,0,0"
+                                       BorderThickness="0,1,1,1"
+                                       IsChecked="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Hsva}, Mode=TwoWay}" />
+                        </Grid>
+                        <Grid x:Name="HexInputGrid"
+                              Grid.Column="2"
+                              IsVisible="{TemplateBinding IsHexInputVisible}">
+                          <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="30" />
+                            <ColumnDefinition Width="*" />
+                          </Grid.ColumnDefinitions>
+                          <Border Grid.Column="0"
+                                  Height="32"
+                                  Background="{DynamicResource ThemeControlMidBrush}"
+                                  BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                                  BorderThickness="1,1,0,1"
+                                  CornerRadius="0,0,0,0">
+                            <TextBlock Foreground="{DynamicResource ThemeForegroundBrush}"
+                                       FontWeight="SemiBold"
+                                       Text="#"
+                                       HorizontalAlignment="Center"
+                                       VerticalAlignment="Center" />
+                          </Border>
+                          <!-- Color updated in code-behind -->
+                          <TextBox x:Name="PART_HexTextBox"
+                                   Grid.Column="1"
+                                   AutomationProperties.Name="Hexadecimal Color"
+                                   Height="32"
+                                   MaxLength="8"
+                                   HorizontalAlignment="Stretch"
+                                   CornerRadius="0,0,0,0" />
+                        </Grid>
+                      </Grid>
+                      <!-- Color component editing controls -->
+                      <!-- Component 1 RGB:Red HSV:Hue -->
+                      <Border Grid.Column="0"
+                              Grid.Row="2"
+                              Height="{Binding ElementName=Component1NumericUpDown, Path=Bounds.Height}"
+                              Width="{DynamicResource ColorViewComponentLabelWidth}"
+                              Background="{DynamicResource ThemeControlMidBrush}"
+                              BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                              BorderThickness="1,1,0,1"
+                              CornerRadius="0,0,0,0"
+                              VerticalAlignment="Center"
+                              IsVisible="{TemplateBinding IsComponentTextInputVisible}">
+                        <Panel HorizontalAlignment="Center"
+                               VerticalAlignment="Center">
+                          <TextBlock Foreground="{DynamicResource ThemeForegroundBrush}"
+                                     FontWeight="SemiBold"
+                                     Text="R"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Rgba}, Mode=OneWay}" />
+                          <TextBlock Foreground="{DynamicResource ThemeForegroundBrush}"
+                                     FontWeight="SemiBold"
+                                     Text="H"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Hsva}, Mode=OneWay}" />
+                        </Panel>
+                      </Border>
+                      <NumericUpDown x:Name="Component1NumericUpDown"
+                                     Grid.Column="1"
+                                     Grid.Row="2"
+                                     AllowSpin="True"
+                                     ShowButtonSpinner="False"
+                                     Height="32"
+                                     Width="{DynamicResource ColorViewComponentTextInputWidth}"
+                                     CornerRadius="0,0,0,0"
+                                     Margin="0,0,12,0"
+                                     VerticalAlignment="Center"
+                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                     Minimum="{Binding Minimum, ElementName=Component1Slider}"
+                                     Maximum="{Binding Maximum, ElementName=Component1Slider}"
+                                     Value="{Binding Value, ElementName=Component1Slider}"
+                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}" />
+                      <primitives:ColorSlider x:Name="Component1Slider"
+                                              Grid.Column="2"
+                                              Grid.Row="2"
+                                              Orientation="Horizontal"
+                                              IsRoundingEnabled="True"
+                                              IsSnapToTickEnabled="True"
+                                              TickFrequency="1"
+                                              ColorComponent="Component1"
+                                              ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
+                                              HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Center"
+                                              IsVisible="{TemplateBinding IsComponentSliderVisible}" />
+                      <!-- Component 2 RGB:Green HSV:Saturation -->
+                      <Border Grid.Column="0"
+                              Grid.Row="3"
+                              Width="{DynamicResource ColorViewComponentLabelWidth}"
+                              Height="{Binding ElementName=Component2NumericUpDown, Path=Bounds.Height}"
+                              Background="{DynamicResource ThemeControlMidBrush}"
+                              BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                              BorderThickness="1,1,0,1"
+                              CornerRadius="0,0,0,0"
+                              VerticalAlignment="Center"
+                              IsVisible="{TemplateBinding IsComponentTextInputVisible}">
+                        <Panel HorizontalAlignment="Center"
+                               VerticalAlignment="Center">
+                          <TextBlock Foreground="{DynamicResource ThemeForegroundBrush}"
+                                     FontWeight="SemiBold"
+                                     Text="G"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Rgba}, Mode=OneWay}" />
+                          <TextBlock Foreground="{DynamicResource ThemeForegroundBrush}"
+                                     FontWeight="SemiBold"
+                                     Text="S"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Hsva}, Mode=OneWay}" />
+                        </Panel>
+                      </Border>
+                      <NumericUpDown x:Name="Component2NumericUpDown"
+                                     Grid.Column="1"
+                                     Grid.Row="3"
+                                     AllowSpin="True"
+                                     ShowButtonSpinner="False"
+                                     Height="32"
+                                     Width="{DynamicResource ColorViewComponentTextInputWidth}"
+                                     CornerRadius="0,0,0,0"
+                                     Margin="0,0,12,0"
+                                     VerticalAlignment="Center"
+                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                     Minimum="{Binding Minimum, ElementName=Component2Slider}"
+                                     Maximum="{Binding Maximum, ElementName=Component2Slider}"
+                                     Value="{Binding Value, ElementName=Component2Slider}"
+                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}" />
+                      <primitives:ColorSlider x:Name="Component2Slider"
+                                              Grid.Column="2"
+                                              Grid.Row="3"
+                                              Orientation="Horizontal"
+                                              IsRoundingEnabled="True"
+                                              IsSnapToTickEnabled="True"
+                                              TickFrequency="1"
+                                              ColorComponent="Component2"
+                                              ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
+                                              HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Center"
+                                              IsVisible="{TemplateBinding IsComponentSliderVisible}" />
+                      <!-- Component 3 RGB:Blue HSV:Value -->
+                      <Border Grid.Column="0"
+                              Grid.Row="4"
+                              Width="{DynamicResource ColorViewComponentLabelWidth}"
+                              Height="{Binding ElementName=Component3NumericUpDown, Path=Bounds.Height}"
+                              Background="{DynamicResource ThemeControlMidBrush}"
+                              BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                              BorderThickness="1,1,0,1"
+                              CornerRadius="0,0,0,0"
+                              VerticalAlignment="Center"
+                              IsVisible="{TemplateBinding IsComponentTextInputVisible}">
+                        <Panel HorizontalAlignment="Center"
+                               VerticalAlignment="Center">
+                          <TextBlock Foreground="{DynamicResource ThemeForegroundBrush}"
+                                     FontWeight="SemiBold"
+                                     Text="B"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Rgba}, Mode=OneWay}" />
+                          <TextBlock Foreground="{DynamicResource ThemeForegroundBrush}"
+                                     FontWeight="SemiBold"
+                                     Text="V"
+                                     IsVisible="{TemplateBinding ColorModel, Converter={StaticResource EnumToBoolConverter}, ConverterParameter={x:Static controls:ColorModel.Hsva}, Mode=OneWay}" />
+                        </Panel>
+                      </Border>
+                      <NumericUpDown x:Name="Component3NumericUpDown"
+                                     Grid.Column="1"
+                                     Grid.Row="4"
+                                     AllowSpin="True"
+                                     ShowButtonSpinner="False"
+                                     Height="32"
+                                     Width="{DynamicResource ColorViewComponentTextInputWidth}"
+                                     CornerRadius="0,0,0,0"
+                                     Margin="0,0,12,0"
+                                     VerticalAlignment="Center"
+                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                     Minimum="{Binding Minimum, ElementName=Component3Slider}"
+                                     Maximum="{Binding Maximum, ElementName=Component3Slider}"
+                                     Value="{Binding Value, ElementName=Component3Slider}"
+                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}" />
+                      <primitives:ColorSlider x:Name="Component3Slider"
+                                              Grid.Column="2"
+                                              Grid.Row="4"
+                                              Orientation="Horizontal"
+                                              IsRoundingEnabled="True"
+                                              IsSnapToTickEnabled="True"
+                                              TickFrequency="1"
+                                              ColorComponent="Component3"
+                                              ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
+                                              HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Center"
+                                              IsVisible="{TemplateBinding IsComponentSliderVisible}" />
+                      <!-- Alpha Component -->
+                      <Border Grid.Column="0"
+                              Grid.Row="5"
+                              Width="{DynamicResource ColorViewComponentLabelWidth}"
+                              Height="{Binding ElementName=AlphaComponentNumericUpDown, Path=Bounds.Height}"
+                              Background="{DynamicResource ThemeControlMidBrush}"
+                              BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                              BorderThickness="1,1,0,1"
+                              CornerRadius="0,0,0,0"
+                              VerticalAlignment="Center"
+                              IsEnabled="{TemplateBinding IsAlphaEnabled}">
+                        <TextBlock x:Name="AlphaComponentTextBlock"
+                                   Foreground="{DynamicResource ThemeForegroundBrush}"
+                                   FontWeight="SemiBold"
+                                   Text="A"
+                                   HorizontalAlignment="Center"
+                                   VerticalAlignment="Center" />
+                        <Border.IsVisible>
+                          <MultiBinding Converter="{x:Static BoolConverters.And}">
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsAlphaVisible" />
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsComponentTextInputVisible" />
+                          </MultiBinding>
+                        </Border.IsVisible>
+                      </Border>
+                      <NumericUpDown x:Name="AlphaComponentNumericUpDown"
+                                     Grid.Column="1"
+                                     Grid.Row="5"
+                                     AllowSpin="True"
+                                     ShowButtonSpinner="False"
+                                     Height="32"
+                                     Width="{DynamicResource ColorViewComponentTextInputWidth}"
+                                     CornerRadius="0,0,0,0"
+                                     Margin="0,0,12,0"
+                                     VerticalAlignment="Center"
+                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                     Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
+                                     Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
+                                     Value="{Binding Value, ElementName=AlphaComponentSlider}"
+                                     IsEnabled="{TemplateBinding IsAlphaEnabled}">
+                        <NumericUpDown.IsVisible>
+                          <MultiBinding Converter="{x:Static BoolConverters.And}">
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsAlphaVisible" />
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsComponentTextInputVisible" />
+                          </MultiBinding>
+                        </NumericUpDown.IsVisible>
+                      </NumericUpDown>
+                      <primitives:ColorSlider x:Name="AlphaComponentSlider"
+                                              Grid.Column="2"
+                                              Grid.Row="5"
+                                              Orientation="Horizontal"
+                                              IsRoundingEnabled="True"
+                                              IsSnapToTickEnabled="True"
+                                              TickFrequency="1"
+                                              ColorComponent="Alpha"
+                                              ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
+                                              HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Center"
+                                              IsEnabled="{TemplateBinding IsAlphaEnabled}">
+                        <primitives:ColorSlider.IsVisible>
+                          <MultiBinding Converter="{x:Static BoolConverters.And}">
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsAlphaVisible" />
+                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
+                                     Path="IsComponentSliderVisible" />
+                          </MultiBinding>
+                        </primitives:ColorSlider.IsVisible>
+                      </primitives:ColorSlider>
+                    </Grid>
+                  </TabItem>
+                </TabControl>
+                <!-- Previewer -->
+                <!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
+                <primitives:ColorPreviewer Grid.Row="1"
+                                           HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                           IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
+                                           Margin="12,-5,12,7"
+                                           IsVisible="{TemplateBinding IsColorPreviewVisible}" />
+              </Grid>
             </Flyout>
           </DropDownButton.Flyout>
         </DropDownButton>

From ae570453c7b33bd7abdc5cac792a9e306de2cb59 Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Sun, 23 Oct 2022 16:32:52 -0400
Subject: [PATCH 3/4] Allow derived controls to call
 ColorSpectrum.ThirdComponent.set()

---
 .../ColorSpectrum/ColorSpectrum.Properties.cs                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.Properties.cs b/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.Properties.cs
index 39b7b7f660..5c7de2459b 100644
--- a/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.Properties.cs
+++ b/src/Avalonia.Controls.ColorPicker/ColorSpectrum/ColorSpectrum.Properties.cs
@@ -240,7 +240,7 @@ namespace Avalonia.Controls.Primitives
         public ColorComponent ThirdComponent
         {
             get => GetValue(ThirdComponentProperty);
-            private set => SetValue(ThirdComponentProperty, value);
+            protected set => SetValue(ThirdComponentProperty, value);
         }
     }
 }

From 7278dce4e24c7fb40f143faaec2d9db8c00c774b Mon Sep 17 00:00:00 2001
From: workgroupengineering <workgroupengineering@users.noreply.github.com>
Date: Fri, 28 Oct 2022 13:24:33 +0200
Subject: [PATCH 4/4] fix: make StringCompatibilityExtensions internal (#9289)

* fix: make StringCompatibilityExtensions internal

* fix: missnig commit
---
 Avalonia.sln                                                 | 1 +
 src/Avalonia.Base/Avalonia.Base.csproj                       | 2 ++
 src/Markup/Avalonia.Markup.Xaml/Avalonia.Markup.Xaml.csproj  | 5 +++++
 .../StringCompatibilityExtensions.cs                         | 2 +-
 4 files changed, 9 insertions(+), 1 deletion(-)
 rename src/{Avalonia.Base/Compatibility => Shared}/StringCompatibilityExtensions.cs (83%)

diff --git a/Avalonia.sln b/Avalonia.sln
index c000f56d09..461de8530b 100644
--- a/Avalonia.sln
+++ b/Avalonia.sln
@@ -41,6 +41,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Shared", "Shared", "{A689DE
 		src\Shared\IsExternalInit.cs = src\Shared\IsExternalInit.cs
 		src\Shared\ModuleInitializer.cs = src\Shared\ModuleInitializer.cs
 		src\Shared\SourceGeneratorAttributes.cs = src\Shared\SourceGeneratorAttributes.cs
+		src\Avalonia.Base\Compatibility\StringCompatibilityExtensions.cs = src\Avalonia.Base\Compatibility\StringCompatibilityExtensions.cs
 	EndProjectSection
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Avalonia.ReactiveUI", "src\Avalonia.ReactiveUI\Avalonia.ReactiveUI.csproj", "{6417B24E-49C2-4985-8DB2-3AB9D898EC91}"
diff --git a/src/Avalonia.Base/Avalonia.Base.csproj b/src/Avalonia.Base/Avalonia.Base.csproj
index 402bc3a099..bdb5882ef2 100644
--- a/src/Avalonia.Base/Avalonia.Base.csproj
+++ b/src/Avalonia.Base/Avalonia.Base.csproj
@@ -23,6 +23,7 @@
   <Import Project="..\..\build\SourceGenerators.props" />
   <ItemGroup>
     <Compile Include="..\Shared\IsExternalInit.cs" Link="IsExternalInit.cs" />
+    <Compile Include="..\Shared\StringCompatibilityExtensions.cs" Link="Compatibility\StringCompatibilityExtensions.cs" />
   </ItemGroup>
 
   <ItemGroup Label="InternalsVisibleTo">
@@ -46,6 +47,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <Folder Include="Compatibility\" />
     <Folder Include="Rendering\Composition\Utils" />
   </ItemGroup>
 </Project>
diff --git a/src/Markup/Avalonia.Markup.Xaml/Avalonia.Markup.Xaml.csproj b/src/Markup/Avalonia.Markup.Xaml/Avalonia.Markup.Xaml.csproj
index d0c39f0289..75746273c2 100644
--- a/src/Markup/Avalonia.Markup.Xaml/Avalonia.Markup.Xaml.csproj
+++ b/src/Markup/Avalonia.Markup.Xaml/Avalonia.Markup.Xaml.csproj
@@ -9,6 +9,7 @@
     <NoWarn>CS1591</NoWarn>
   </PropertyGroup>
     <ItemGroup>
+        <Compile Include="..\..\Shared\StringCompatibilityExtensions.cs" Link="Compatibility\StringCompatibilityExtensions.cs" />
         <Compile Include="AvaloniaXamlLoader.cs" />
         <Compile Include="Converters\AvaloniaUriTypeConverter.cs" />
         <Compile Include="Converters\ColorToBrushConverter.cs" />
@@ -68,4 +69,8 @@
   <ItemGroup Label="InternalsVisibleTo">
     <InternalsVisibleTo Include="Avalonia.Markup.Xaml.UnitTests, PublicKey=$(AvaloniaPublicKey)" />
   </ItemGroup>
+
+  <ItemGroup>
+    <Folder Include="Compatibility\" />
+  </ItemGroup>
 </Project>
diff --git a/src/Avalonia.Base/Compatibility/StringCompatibilityExtensions.cs b/src/Shared/StringCompatibilityExtensions.cs
similarity index 83%
rename from src/Avalonia.Base/Compatibility/StringCompatibilityExtensions.cs
rename to src/Shared/StringCompatibilityExtensions.cs
index 45e41b44d6..7c894dba97 100644
--- a/src/Avalonia.Base/Compatibility/StringCompatibilityExtensions.cs
+++ b/src/Shared/StringCompatibilityExtensions.cs
@@ -3,7 +3,7 @@
 namespace System;
 
 #if !NET6_0_OR_GREATER
-public static class StringCompatibilityExtensions
+internal static class StringCompatibilityExtensions
 {
     [MethodImpl(MethodImplOptions.AggressiveInlining)]
     public static bool Contains(this string str, char search) =>