Complete initial ColorPicker

src/Avalonia.Controls.ColorPicker/ColorPicker/ColorPicker.cs

@@ -7,7 +7,8 @@ using System.Threading.Tasks;
 namespace Avalonia.Controls
 {
     /// <summary>
-    /// 
+    /// Presents a color for user editing using a spectrum, palette and component sliders within a drop down.
+    /// Editing is available when the drop down flyout is opened; otherwise, only the preview color is shown.
     /// </summary>
     public class ColorPicker : ColorView
     {

src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml

@@ -2,10 +2,11 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="using:Avalonia.Controls"
         xmlns:converters="using:Avalonia.Controls.Converters"
-        x:CompileBindings="True">
+        x:CompileBindings="False">
 
   <Styles.Resources>
     <converters:ToBrushConverter x:Key="ToBrush" />
+    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft"/>
   </Styles.Resources>
 
   <Style Selector="ColorPicker">
@@ -18,7 +19,9 @@
         <DropDownButton CornerRadius="{TemplateBinding CornerRadius}"
                         Height="{TemplateBinding Height}"
                         Width="{TemplateBinding Width}"
-                        Padding="0,0,8,0"
+                        HorizontalContentAlignment="Stretch"
+                        VerticalContentAlignment="Stretch"
+                        Padding="0,0,10,0"
                         UseLayoutRounding="False">
           <DropDownButton.Styles>
             <Style Selector="FlyoutPresenter.NoPadding">
@@ -27,24 +30,32 @@
           </DropDownButton.Styles>
           <DropDownButton.Content>
             <!-- Preview color -->
-            <Border Background="{Binding $parent[ColorPicker].HsvColor, Converter={StaticResource ToBrush}, Mode=OneWay}"
-                    CornerRadius="4,0,0,4"
-                    Margin="0,0,3,0"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch" />
+            <Panel>
+              <Border Background="{StaticResource CheckeredBackgroundBrush}"
+                      CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch"
+                      Margin="1,1,0,1" />
+              <Border Background="{Binding HsvColor, ElementName=FlyoutColorView, Converter={StaticResource ToBrush}, Mode=OneWay}"
+                      CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch"
+                      Margin="1,1,0,1" />
+            </Panel>
           </DropDownButton.Content>
           <DropDownButton.Flyout>
             <Flyout FlyoutPresenterClasses="NoPadding">
               <!-- Skip the following:
-                - Color
                 - CustomPaletteColors
               -->
-              <ColorView ColorModel="{TemplateBinding ColorModel}"
+              <ColorView x:Name="FlyoutColorView"
+                         Color="{Binding $parent[ColorPicker].Color, Mode=TwoWay}"
+                         ColorModel="{Binding $parent[ColorPicker].ColorModel, Mode=TwoWay}"
                          ColorSpectrumComponents="{TemplateBinding ColorSpectrumComponents}"
                          ColorSpectrumShape="{TemplateBinding ColorSpectrumShape}"
                          CustomPaletteColumnCount="{TemplateBinding CustomPaletteColumnCount}"
                          CustomPalette="{TemplateBinding CustomPalette}"
-                         HsvColor="{Binding $parent[ColorPicker].HsvColor}"
+                         HsvColor="{Binding $parent[ColorPicker].HsvColor, Mode=TwoWay}"
                          IsAlphaEnabled="{TemplateBinding IsAlphaEnabled}"
                          IsAlphaSliderVisible="{TemplateBinding IsAlphaSliderVisible}"
                          IsAlphaTextInputVisible="{TemplateBinding IsAlphaTextInputVisible}"

src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml

@@ -152,7 +152,7 @@
                                           Grid.Row="0"
                                           Grid.RowSpan="2"
                                           Components="{TemplateBinding ColorSpectrumComponents}"
-                                          HsvColor="{Binding $parent[ColorView].HsvColor}"
+                                          HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                           MinHue="{TemplateBinding MinHue}"
                                           MaxHue="{TemplateBinding MaxHue}"
                                           MinSaturation="{TemplateBinding MinSaturation}"
@@ -187,7 +187,7 @@
                 </Border>
               </TabItem.Header>
               <ListBox Items="{TemplateBinding CustomPaletteColors}"
-                       SelectedItem="{Binding $parent[ColorView].Color}"
+                       SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                        UseLayoutRounding="False"
                        Margin="12">
                 <ListBox.Styles>
@@ -421,7 +421,7 @@
                                         TickFrequency="1"
                                         ColorComponent="Component1"
                                         ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
-                                        HsvColor="{Binding $parent[ColorView].HsvColor}"
+                                        HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                         Margin="12,0,0,0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Center" />
@@ -467,7 +467,7 @@
                                         TickFrequency="1"
                                         ColorComponent="Component2"
                                         ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
-                                        HsvColor="{Binding $parent[ColorView].HsvColor}"
+                                        HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                         Margin="12,0,0,0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Center" />
@@ -513,7 +513,7 @@
                                         TickFrequency="1"
                                         ColorComponent="Component3"
                                         ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
-                                        HsvColor="{Binding $parent[ColorView].HsvColor}"
+                                        HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                         Margin="12,0,0,0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Center" />
@@ -554,7 +554,7 @@
                                         TickFrequency="1"
                                         ColorComponent="Alpha"
                                         ColorModel="{TemplateBinding ColorModel, Mode=OneWay}"
-                                        HsvColor="{Binding $parent[ColorView].HsvColor}"
+                                        HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                         Margin="12,0,0,0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Center" />
@@ -564,8 +564,8 @@
           <!-- Previewer -->
           <primitives:ColorPreviewer Grid.Row="1"
                                      ShowAccentColors="True"
-                                     HsvColor="{Binding $parent[ColorView].HsvColor}"
-                                     Margin="12,0,12,12" />
+                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                     Margin="12,-5,12,7" />
         </Grid>
       </ControlTemplate>
     </Setter>