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

@@ -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>

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>

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}" />

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>

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>

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}" />

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>