From d64a58459da73f9063c23bdb811cdeb012417bee Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Tue, 5 Jul 2022 22:57:04 -0400
Subject: [PATCH] Better implement ColorView backgrounds in the template for
 easier re-styling

---
 .../Themes/Fluent/ColorPicker.xaml            |  8 ++++++
 .../Themes/Fluent/ColorView.xaml              | 25 +++++++++----------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
index 8d172d7031..380e7110f0 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
+++ b/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>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
index 867e0f223f..9e795d81a2 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
+++ b/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 -->
-          <Border Grid.Row="0"
+          <!-- Backgrounds -->
+          <!-- 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}" />
-
-          <!-- Available for Fluent v2 use -->
-          <!--<Border Grid.Row="0"
-                  Grid.RowSpan="2"
-                  HorizontalAlignment="Stretch"
-                  VerticalAlignment="Stretch"
-                  Background="{TemplateBinding Background}" />
-          <Border Grid.Row="0"
+          <Border x:Name="ContentBackgroundBorder"
+                  Grid.Row="0"
                   Grid.RowSpan="2"
                   Margin="0,48,0,0"
                   HorizontalAlignment="Stretch"
                   VerticalAlignment="Stretch"
-                  Background="{ThemeResource LayerFillColorAltBrush}"
-                  BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
-                  BorderThickness="0,1,0,0" />-->
+                  CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}"
+                  Background="Transparent"
+                  BorderBrush="Transparent"
+                  BorderThickness="0,1,0,0" />
 
           <TabControl x:Name="PART_TabControl"
                       Grid.Row="0"