From 31a1e514fa9d4075386b032b117fb46eab1b56b7 Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Sun, 7 May 2023 10:11:34 -0400
Subject: [PATCH] Improve ColorPreviewer margins with drop shadow

This sets ClipToBounds to false for the control which allows the drop shadow to fully draw above/below the control itself. Doing this removes the need to adjust margins in almost all places. This is a big simplification to margin calculation and removes strange negative values.
---
 samples/ControlCatalog/Pages/ColorPickerPage.xaml   |  3 ++-
 .../Themes/Fluent/ColorPicker.xaml                  |  4 ++--
 .../Themes/Fluent/ColorPreviewer.xaml               | 13 +++++--------
 .../Themes/Fluent/ColorView.xaml                    |  4 ++--
 .../Themes/Simple/ColorPicker.xaml                  |  4 ++--
 .../Themes/Simple/ColorPreviewer.xaml               | 13 +++++--------
 .../Themes/Simple/ColorView.xaml                    |  4 ++--
 7 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/samples/ControlCatalog/Pages/ColorPickerPage.xaml b/samples/ControlCatalog/Pages/ColorPickerPage.xaml
index b759720cf2..25fffabfd2 100644
--- a/samples/ControlCatalog/Pages/ColorPickerPage.xaml
+++ b/samples/ControlCatalog/Pages/ColorPickerPage.xaml
@@ -103,7 +103,8 @@
                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />-->
       <ColorPreviewer Grid.Row="8"
                       IsAccentColorsVisible="False"
-                      HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
+                      HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}"
+                      Margin="0,2,0,0" />
     </Grid>
   </Grid>
 </UserControl>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
index a0daff2e3f..bbb3c0c01a 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
@@ -490,11 +490,11 @@
                   </TabItem>
                 </TabControl>
                 <!-- Previewer -->
-                <!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
+                <!-- Note that the drop shadow is allowed to extend past the control bounds -->
                 <primitives:ColorPreviewer Grid.Row="1"
                                            HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                            IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
-                                           Margin="12,-5,12,7"
+                                           Margin="12,0,12,12"
                                            IsVisible="{TemplateBinding IsColorPreviewVisible}" />
               </Grid>
             </Flyout>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml
index e05fa5a907..fabc5d0349 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml
@@ -8,7 +8,9 @@
 
   <ControlTheme x:Key="{x:Type ColorPreviewer}"
                 TargetType="ColorPreviewer">
-    <Setter Property="Height" Value="70" />
+    <Setter Property="Height" Value="50" />
+    <!-- The preview color drop shadow is allowed to extend outside the control bounds -->
+    <Setter Property="ClipToBounds" Value="False" />
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="Template">
       <ControlTemplate TargetType="{x:Type ColorPreviewer}">
@@ -21,7 +23,6 @@
                   Height="{StaticResource ColorPreviewerAccentSectionHeight}"
                   Width="{StaticResource ColorPreviewerAccentSectionWidth}"
                   ColumnDefinitions="*,*"
-                  Margin="0,0,-10,0"
                   VerticalAlignment="Center">
               <Border Grid.Column="0"
                       Grid.ColumnSpan="2"
@@ -43,7 +44,6 @@
                   Height="{StaticResource ColorPreviewerAccentSectionHeight}"
                   Width="{StaticResource ColorPreviewerAccentSectionWidth}"
                   ColumnDefinitions="*,*"
-                  Margin="-10,0,0,0"
                   VerticalAlignment="Center">
               <Border Grid.Column="0"
                       Grid.ColumnSpan="2"
@@ -64,10 +64,8 @@
             <Border Grid.Column="1"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
-                    Background="Transparent"
                     BoxShadow="0 0 10 2 #BF000000"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    Margin="10">
+                    CornerRadius="{TemplateBinding CornerRadius}">
               <Panel>
                 <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
@@ -82,8 +80,7 @@
           <Border CornerRadius="{TemplateBinding CornerRadius}"
                   IsVisible="{TemplateBinding IsAccentColorsVisible, Converter={x:Static BoolConverters.Not}}"
                   HorizontalAlignment="Stretch"
-                  VerticalAlignment="Stretch"
-                  Margin="0,10,0,10">
+                  VerticalAlignment="Stretch">
             <Panel>
               <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
                       CornerRadius="{TemplateBinding CornerRadius}" />
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
index e7db283c9e..6159a96cc5 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
@@ -737,11 +737,11 @@
             </TabItem>
           </TabControl>
           <!-- Previewer -->
-          <!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
+          <!-- Note that the drop shadow is allowed to extend past the control bounds -->
           <primitives:ColorPreviewer Grid.Row="1"
                                      HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                      IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
-                                     Margin="12,-5,12,7"
+                                     Margin="12,0,12,12"
                                      IsVisible="{TemplateBinding IsColorPreviewVisible}" />
         </Grid>
       </ControlTemplate>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml
index bad4ae9e44..82c98e22f7 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPicker.xaml
@@ -489,11 +489,11 @@
                   </TabItem>
                 </TabControl>
                 <!-- Previewer -->
-                <!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
+                <!-- Note that the drop shadow is allowed to extend past the control bounds -->
                 <primitives:ColorPreviewer Grid.Row="1"
                                            HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                            IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
-                                           Margin="12,-5,12,7"
+                                           Margin="12,0,12,12"
                                            IsVisible="{TemplateBinding IsColorPreviewVisible}" />
               </Grid>
             </Flyout>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPreviewer.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPreviewer.xaml
index a39dd91f52..9e123b2a1f 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPreviewer.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorPreviewer.xaml
@@ -8,7 +8,9 @@
 
   <ControlTheme x:Key="{x:Type ColorPreviewer}"
                 TargetType="ColorPreviewer">
-    <Setter Property="Height" Value="70" />
+    <Setter Property="Height" Value="50" />
+    <!-- The preview color drop shadow is allowed to extend outside the control bounds -->
+    <Setter Property="ClipToBounds" Value="False" />
     <Setter Property="CornerRadius" Value="0" />
     <Setter Property="Template">
       <ControlTemplate TargetType="{x:Type ColorPreviewer}">
@@ -21,7 +23,6 @@
                   Height="{StaticResource ColorPreviewerAccentSectionHeight}"
                   Width="{StaticResource ColorPreviewerAccentSectionWidth}"
                   ColumnDefinitions="*,*"
-                  Margin="0,0,-10,0"
                   VerticalAlignment="Center">
               <Border Grid.Column="0"
                       Grid.ColumnSpan="2"
@@ -43,7 +44,6 @@
                   Height="{StaticResource ColorPreviewerAccentSectionHeight}"
                   Width="{StaticResource ColorPreviewerAccentSectionWidth}"
                   ColumnDefinitions="*,*"
-                  Margin="-10,0,0,0"
                   VerticalAlignment="Center">
               <Border Grid.Column="0"
                       Grid.ColumnSpan="2"
@@ -64,10 +64,8 @@
             <Border Grid.Column="1"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
-                    Background="Transparent"
                     BoxShadow="0 0 10 2 #BF000000"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    Margin="10">
+                    CornerRadius="{TemplateBinding CornerRadius}">
               <Panel>
                 <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
@@ -82,8 +80,7 @@
           <Border CornerRadius="{TemplateBinding CornerRadius}"
                   IsVisible="{TemplateBinding IsAccentColorsVisible, Converter={x:Static BoolConverters.Not}}"
                   HorizontalAlignment="Stretch"
-                  VerticalAlignment="Stretch"
-                  Margin="0,10,0,10">
+                  VerticalAlignment="Stretch">
             <Panel>
               <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
                       CornerRadius="{TemplateBinding CornerRadius}" />
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml
index a3cb7bca1d..97a8d4b885 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Simple/ColorView.xaml
@@ -699,11 +699,11 @@
             </TabItem>
           </TabControl>
           <!-- Previewer -->
-          <!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
+          <!-- Note that the drop shadow is allowed to extend past the control bounds -->
           <primitives:ColorPreviewer Grid.Row="1"
                                      HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                      IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
-                                     Margin="12,-5,12,7"
+                                     Margin="12,0,12,12"
                                      IsVisible="{TemplateBinding IsColorPreviewVisible}" />
         </Grid>
       </ControlTemplate>