ColorPicker Simple Theme Fixes (#16654)

* Disable vertical scrolling in Simple theme NumericUpDown

* Improve color picker simple themes

* VerticalContentAlignment

---------

Co-authored-by: Max Katz <[email protected]>

Author: robloo

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

@@ -103,7 +103,8 @@
                   <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
                            IsVisible="{TemplateBinding IsColorSpectrumVisible}">
                     <TabItem.Header>
-                      <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                      <Border Height="{DynamicResource ColorViewTabStripHeight}"
+                              Background="Transparent">
                         <PathIcon Width="20"
                                   Height="20"
                                   Data="{DynamicResource ColorViewSpectrumIconGeometry}" />
@@ -168,7 +169,8 @@
                   <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
                            IsVisible="{TemplateBinding IsColorPaletteVisible}">
                     <TabItem.Header>
-                      <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                      <Border Height="{DynamicResource ColorViewTabStripHeight}"
+                              Background="Transparent">
                         <PathIcon Width="20"
                                   Height="20"
                                   Data="{DynamicResource ColorViewPaletteIconGeometry}" />
@@ -203,7 +205,8 @@
                   <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
                            IsVisible="{TemplateBinding IsColorComponentsVisible}">
                     <TabItem.Header>
-                      <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                      <Border Height="{DynamicResource ColorViewTabStripHeight}"
+                              Background="Transparent">
                         <PathIcon Width="20"
                                   Height="20"
                                   Data="{DynamicResource ColorViewComponentsIconGeometry}" />
@@ -264,6 +267,8 @@
                                    AutomationProperties.Name="Hexadecimal Color"
                                    Height="32"
                                    MaxLength="9"
+                                   Padding="10,6,6,5"
+                                   VerticalContentAlignment="Center"
                                    HorizontalAlignment="Stretch"
                                    CornerRadius="0,0,0,0" />
                         </Grid>

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

@@ -306,7 +306,8 @@
             <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
                      IsVisible="{TemplateBinding IsColorSpectrumVisible}">
               <TabItem.Header>
-                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                <Border Height="{DynamicResource ColorViewTabStripHeight}"
+                        Background="Transparent">
                   <PathIcon Width="20"
                             Height="20"
                             Data="{DynamicResource ColorViewSpectrumIconGeometry}" />
@@ -371,7 +372,8 @@
             <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
                      IsVisible="{TemplateBinding IsColorPaletteVisible}">
               <TabItem.Header>
-                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                <Border Height="{DynamicResource ColorViewTabStripHeight}"
+                        Background="Transparent">
                   <PathIcon Width="20"
                             Height="20"
                             Data="{DynamicResource ColorViewPaletteIconGeometry}" />
@@ -406,7 +408,8 @@
             <TabItem Theme="{StaticResource ColorViewTabItemTheme}"
                      IsVisible="{TemplateBinding IsColorComponentsVisible}">
               <TabItem.Header>
-                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                <Border Height="{DynamicResource ColorViewTabStripHeight}"
+                        Background="Transparent">
                   <PathIcon Width="20"
                             Height="20"
                             Data="{DynamicResource ColorViewComponentsIconGeometry}" />
@@ -467,6 +470,8 @@
                              AutomationProperties.Name="Hexadecimal Color"
                              Height="32"
                              MaxLength="9"
+                             Padding="10,6,6,5"
+                             VerticalContentAlignment="Center"
                              HorizontalAlignment="Stretch"
                              CornerRadius="0,0,0,0" />
                   </Grid>

src/Avalonia.Themes.Simple/Controls/NumericUpDown.xaml

@@ -14,6 +14,8 @@
                          HorizontalContentAlignment="Stretch"
                          VerticalContentAlignment="Stretch"
                          IsTabStop="False"
+                         Padding="0"
+                         MinWidth="0"
                          AllowSpin="{TemplateBinding AllowSpin}"
                          Background="{TemplateBinding Background}"
                          BorderBrush="{TemplateBinding BorderBrush}"
@@ -25,6 +27,7 @@
                      MinWidth="20"
                      Margin="4"
                      Padding="{TemplateBinding Padding}"
+                     ScrollViewer.VerticalScrollBarVisibility="Disabled"
                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                      AcceptsReturn="False"