Better implement ColorView backgrounds in the template for easier re-styling

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

@@ -7,6 +7,8 @@
   <Styles.Resources>
     <converters:ToBrushConverter x:Key="ToBrush" />
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft"/>
+    <!-- This must follow OverlayCornerRadius -->
+    <CornerRadius x:Key="OverlayTopCornerRadius">5,5,0,0</CornerRadius>
   </Styles.Resources>
 
   <Style Selector="ColorPicker">
@@ -81,4 +83,10 @@
     </Setter>
   </Style>
 
+  <!-- Adjust Background within Flyout -->
+  <!-- Note: This is implemented but there seems to be an issue and the selector can't match across the Flyout -->
+  <Style Selector="ColorPicker /template/ ColorView#FlyoutColorView /template/ Border#TabBackgroundBorder">
+    <Setter Property="CornerRadius" Value="{DynamicResource OverlayTopCornerRadius}" />
+  </Style>
+
 </Styles>

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

@@ -13,6 +13,8 @@
     <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayName" />
     <converters:ColorToHexConverter x:Key="ColorToHex" />
     <converters:EnumToBoolConverter x:Key="EnumToBool" />
+    <converters:CornerRadiusFilterConverter x:Key="TopCornerRadiusFilterConverter" Filter="TopLeft, TopRight"/>
+    <converters:CornerRadiusFilterConverter x:Key="BottomCornerRadiusFilterConverter" Filter="BottomLeft, BottomRight"/>
     <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
     <x:Double x:Key="ColorViewTabStripHeight">48</x:Double>
     <x:Double x:Key="ColorViewComponentLabelWidth">30</x:Double>
@@ -90,29 +92,26 @@
       <ControlTemplate>
         <Grid RowDefinitions="Auto,Auto">
 
-          <!-- Set the backgrounds -->
+          <!-- Backgrounds -->
-          <Border Grid.Row="0"
+          <!-- These are separated for Fluent v2 re-styling without having to re-template. -->
+          <Border x:Name="TabBackgroundBorder"
+                  Grid.Row="0"
                   Grid.RowSpan="2"
                   Height="48"
                   HorizontalAlignment="Stretch"
                   VerticalAlignment="Top"
                   Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"
                   CornerRadius="{TemplateBinding CornerRadius}" />
-
+          <Border x:Name="ContentBackgroundBorder"
-          <!-- Available for Fluent v2 use -->
+                  Grid.Row="0"
-          <!--<Border Grid.Row="0"
-                  Grid.RowSpan="2"
-                  HorizontalAlignment="Stretch"
-                  VerticalAlignment="Stretch"
-                  Background="{TemplateBinding Background}" />
-          <Border Grid.Row="0"
                   Grid.RowSpan="2"
                   Margin="0,48,0,0"
                   HorizontalAlignment="Stretch"
                   VerticalAlignment="Stretch"
-                  Background="{ThemeResource LayerFillColorAltBrush}"
+                  CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}"
-                  BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
+                  Background="Transparent"
-                  BorderThickness="0,1,0,0" />-->
+                  BorderBrush="Transparent"
+                  BorderThickness="0,1,0,0" />
 
           <TabControl x:Name="PART_TabControl"
                       Grid.Row="0"