From c3cdf856a3345f74413aed31febb61d4f214eb21 Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Wed, 27 Apr 2022 23:14:29 -0400
Subject: [PATCH] Add default themes for ColorSlider and ColorPreviewer

---
 .../Themes/Default.xaml                       |  21 ++
 .../Themes/Default/ColorPreviewer.xaml        |  90 ++++++++
 .../Themes/Default/ColorSlider.xaml           | 198 ++++++++++++++++++
 .../Themes/Fluent/ColorSlider.xaml            |  32 ++-
 4 files changed, 332 insertions(+), 9 deletions(-)
 create mode 100644 src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
 create mode 100644 src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml

diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default.xaml
index 528eed9969..6d2f979f6e 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default.xaml
@@ -1,7 +1,28 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
+  <Styles.Resources>
+    <VisualBrush x:Key="CheckeredBackgroundBrush"
+                 TileMode="Tile"
+                 Stretch="Uniform"
+                 DestinationRect="0,0,8,8">
+      <VisualBrush.Visual>
+        <DrawingPresenter Width="8"
+                          Height="8">
+          <DrawingGroup>
+            <GeometryDrawing Geometry="M0,0 L2,0 2,2, 0,2Z"
+                             Brush="Transparent" />
+            <GeometryDrawing Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z"
+                             Brush="#19808080" />
+          </DrawingGroup>
+        </DrawingPresenter>
+      </VisualBrush.Visual>
+    </VisualBrush>
+  </Styles.Resources>
+
   <!-- Primitives -->
+  <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml" />
+  <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml" />
   <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml" />
 
 </Styles>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
new file mode 100644
index 0000000000..fe35dbd587
--- /dev/null
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
@@ -0,0 +1,90 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:primitives="using:Avalonia.Controls.Primitives"
+        x:CompileBindings="True">
+
+  <Styles.Resources>
+    <primitives:AccentColorConverter x:Key="AccentColor" />
+  </Styles.Resources>
+
+  <Style Selector="ColorPreviewer">
+    <Setter Property="Height" Value="70" />
+    <Setter Property="CornerRadius" Value="0" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid ColumnDefinitions="Auto,*,Auto">
+          <!-- Left accent colors -->
+          <Grid Grid.Column="0"
+                Height="40"
+                Width="80"
+                Margin="0,0,-10,0"
+                VerticalAlignment="Center"
+                IsVisible="{TemplateBinding ShowAccentColors}">
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="*" />
+              <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Border Grid.Column="0"
+                    Grid.ColumnSpan="2"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch"
+                    Background="{StaticResource CheckeredBackgroundBrush}" />
+            <Border x:Name="AccentDec2Border"
+                    Grid.Column="0"
+                    CornerRadius="4,0,0,4"
+                    Tag="-2"
+                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColor}, ConverterParameter='-2'}" />
+            <Border x:Name="AccentDec1Border"
+                    Grid.Column="1"
+                    Tag="-1"
+                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColor}, ConverterParameter='-1'}" />
+          </Grid>
+          <!-- Right accent colors -->
+          <Grid Grid.Column="2"
+                Height="40"
+                Width="80"
+                Margin="-10,0,0,0"
+                VerticalAlignment="Center"
+                IsVisible="{TemplateBinding ShowAccentColors}">
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="*" />
+              <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Border Grid.Column="0"
+                    Grid.ColumnSpan="2"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch"
+                    Background="{StaticResource CheckeredBackgroundBrush}" />
+            <Border x:Name="AccentInc1Border"
+                    Grid.Column="0"
+                    Tag="1"
+                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColor}, ConverterParameter='1'}" />
+            <Border x:Name="AccentInc2Border"
+                    Grid.Column="1"
+                    CornerRadius="0,4,4,0"
+                    Tag="2"
+                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColor}, ConverterParameter='2'}" />
+          </Grid>
+          <!-- Must be last for drop shadow Z-index -->
+          <Border Grid.Column="1"
+                  BoxShadow="0 0 10 2 #BF000000"
+                  CornerRadius="{TemplateBinding CornerRadius}"
+                  Margin="10">
+            <Grid>
+              <Border Background="{DynamicResource ThemeBackgroundBrush}"
+                      CornerRadius="{TemplateBinding CornerRadius}" />
+              <Border Background="{StaticResource CheckeredBackgroundBrush}"
+                      CornerRadius="{TemplateBinding CornerRadius}" />
+              <Border x:Name="PreviewBorder"
+                      CornerRadius="{TemplateBinding CornerRadius}"
+                      Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColor}, ConverterParameter='0'}"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch" />
+            </Grid>
+          </Border>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+</Styles>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml
new file mode 100644
index 0000000000..c0b78d628a
--- /dev/null
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml
@@ -0,0 +1,198 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:converters="using:Avalonia.Controls.Converters"
+        x:CompileBindings="True">
+
+  <Styles.Resources>
+    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadius" Corner="TopLeft" />
+    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadius" Corner="BottomRight" />
+  </Styles.Resources>
+
+  <Style Selector="Thumb.ColorSliderThumbStyle">
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate>
+          <Border Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="10" />
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+  </Style>
+
+  <Style Selector="ColorSlider:horizontal">
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="CornerRadius" Value="10" />
+    <Setter Property="Height" Value="20" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border BorderThickness="{TemplateBinding BorderThickness}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <Grid Margin="{TemplateBinding Padding}">
+            <Rectangle HorizontalAlignment="Stretch"
+                       VerticalAlignment="Stretch"
+                       Fill="{StaticResource CheckeredBackgroundBrush}"
+                       RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadius}}"
+                       RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadius}}" />
+            <Rectangle HorizontalAlignment="Stretch"
+                       VerticalAlignment="Stretch"
+                       Fill="{TemplateBinding Background}"
+                       RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadius}}"
+                       RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadius}}" />
+            <Track Name="PART_Track"
+                   HorizontalAlignment="Stretch"
+                   VerticalAlignment="Stretch"
+                   Minimum="{TemplateBinding Minimum}"
+                   Maximum="{TemplateBinding Maximum}"
+                   Value="{TemplateBinding Value, Mode=TwoWay}"
+                   IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                   Orientation="Horizontal">
+              <Track.DecreaseButton>
+                <RepeatButton Name="PART_DecreaseButton"
+                              Background="Transparent"
+                              Focusable="False"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch">
+                  <RepeatButton.Template>
+                    <ControlTemplate>
+                      <Border Name="FocusTarget"
+                              Background="Transparent"
+                              Margin="0,-10" />
+                    </ControlTemplate>
+                  </RepeatButton.Template>
+                </RepeatButton>
+              </Track.DecreaseButton>
+              <Track.IncreaseButton>
+                <RepeatButton Name="PART_IncreaseButton"
+                              Background="Transparent"
+                              Focusable="False"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch">
+                  <RepeatButton.Template>
+                    <ControlTemplate>
+                      <Border Name="FocusTarget"
+                              Background="Transparent"
+                              Margin="0,-10" />
+                    </ControlTemplate>
+                  </RepeatButton.Template>
+                </RepeatButton>
+              </Track.IncreaseButton>
+              <Thumb Classes="ColorSliderThumbStyle"
+                     Name="ColorSliderThumb"
+                     Margin="0"
+                     Padding="0"
+                     DataContext="{TemplateBinding Value}"
+                     Height="{TemplateBinding Height}"
+                     Width="{TemplateBinding Height}" />
+            </Track>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+  <Style Selector="ColorSlider:vertical">
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="CornerRadius" Value="10" />
+    <Setter Property="Width" Value="20" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border BorderThickness="{TemplateBinding BorderThickness}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <Grid Margin="{TemplateBinding Padding}">
+            <Rectangle HorizontalAlignment="Stretch"
+                       VerticalAlignment="Stretch"
+                       Fill="{StaticResource CheckeredBackgroundBrush}"
+                       RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadius}}"
+                       RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadius}}" />
+            <Rectangle HorizontalAlignment="Stretch"
+                       VerticalAlignment="Stretch"
+                       Fill="{TemplateBinding Background}"
+                       RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadius}}"
+                       RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadius}}" />
+            <Track Name="PART_Track"
+                   HorizontalAlignment="Stretch"
+                   VerticalAlignment="Stretch"
+                   Minimum="{TemplateBinding Minimum}"
+                   Maximum="{TemplateBinding Maximum}"
+                   Value="{TemplateBinding Value, Mode=TwoWay}"
+                   IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                   Orientation="Vertical">
+              <Track.DecreaseButton>
+                <RepeatButton Name="PART_DecreaseButton"
+                              Background="Transparent"
+                              Focusable="False"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch">
+                  <RepeatButton.Template>
+                    <ControlTemplate>
+                      <Border Name="FocusTarget"
+                              Background="Transparent"
+                              Margin="0,-10" />
+                    </ControlTemplate>
+                  </RepeatButton.Template>
+                </RepeatButton>
+              </Track.DecreaseButton>
+              <Track.IncreaseButton>
+                <RepeatButton Name="PART_IncreaseButton"
+                              Background="Transparent"
+                              Focusable="False"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch">
+                  <RepeatButton.Template>
+                    <ControlTemplate>
+                      <Border Name="FocusTarget"
+                              Background="Transparent"
+                              Margin="0,-10" />
+                    </ControlTemplate>
+                  </RepeatButton.Template>
+                </RepeatButton>
+              </Track.IncreaseButton>
+              <Thumb Classes="ColorSliderThumbStyle"
+                     Name="ColorSliderThumb"
+                     Margin="0"
+                     Padding="0"
+                     DataContext="{TemplateBinding Value}"
+                     Height="{TemplateBinding Width}"
+                     Width="{TemplateBinding Width}" />
+            </Track>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+  <!-- Normal State -->
+  <Style Selector="ColorSlider /template/ Thumb.ColorSliderThumbStyle">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentBrush}" />
+    <Setter Property="BorderThickness" Value="3" />
+  </Style>
+
+  <!-- Selector/Thumb Color -->
+  <Style Selector="ColorSlider:pressed /template/ Thumb.ColorSliderThumbStyle">
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentBrush}" />
+  </Style>
+
+  <Style Selector="ColorSlider:pointerover /template/ Thumb.ColorSliderThumbStyle">
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentBrush}" />
+  </Style>
+  <Style Selector="ColorSlider:pointerover:dark-selector /template/ Thumb.ColorSliderThumbStyle">
+    <Setter Property="Opacity" Value="0.7" />
+  </Style>
+  <Style Selector="ColorSlider:pointerover:light-selector /template/ Thumb.ColorSliderThumbStyle">
+    <Setter Property="Opacity" Value="0.8" />
+  </Style>
+
+  <Style Selector="ColorSlider:dark-selector /template/ Thumb.ColorSliderThumbStyle">
+    <Setter Property="BorderBrush" Value="Black" />
+  </Style>
+  <Style Selector="ColorSlider:light-selector /template/ Thumb.ColorSliderThumbStyle">
+    <Setter Property="BorderBrush" Value="White" />
+  </Style>
+
+</Styles>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorSlider.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorSlider.xaml
index 620e9f658d..54f58d2a8f 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorSlider.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorSlider.xaml
@@ -8,6 +8,20 @@
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadius" Corner="BottomRight" />
   </Styles.Resources>
 
+  <Style Selector="Thumb.ColorSliderThumbStyle">
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate>
+          <Border Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="10" />
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+  </Style>
+
   <Style Selector="ColorSlider:horizontal">
     <Setter Property="BorderThickness" Value="0" />
     <Setter Property="CornerRadius" Value="10" />
@@ -66,7 +80,7 @@
                   </RepeatButton.Template>
                 </RepeatButton>
               </Track.IncreaseButton>
-              <Thumb Classes="SliderThumbStyle"
+              <Thumb Classes="ColorSliderThumbStyle"
                      Name="ColorSliderThumb"
                      Margin="0"
                      Padding="0"
@@ -138,7 +152,7 @@
                   </RepeatButton.Template>
                 </RepeatButton>
               </Track.IncreaseButton>
-              <Thumb Classes="SliderThumbStyle"
+              <Thumb Classes="ColorSliderThumbStyle"
                      Name="ColorSliderThumb"
                      Margin="0"
                      Padding="0"
@@ -153,31 +167,31 @@
   </Style>
 
   <!-- Normal State -->
-  <Style Selector="ColorSlider /template/ Thumb.SliderThumbStyle">
+  <Style Selector="ColorSlider /template/ Thumb.ColorSliderThumbStyle">
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="BorderBrush" Value="{DynamicResource SliderThumbBackground}" />
     <Setter Property="BorderThickness" Value="3" />
   </Style>
 
   <!-- Selector/Thumb Color -->
-  <Style Selector="ColorSlider:pressed /template/ Thumb.SliderThumbStyle">
+  <Style Selector="ColorSlider:pressed /template/ Thumb.ColorSliderThumbStyle">
     <Setter Property="BorderBrush" Value="{DynamicResource SliderThumbBackgroundPressed}" />
   </Style>
 
-  <Style Selector="ColorSlider:pointerover /template/ Thumb.SliderThumbStyle">
+  <Style Selector="ColorSlider:pointerover /template/ Thumb.ColorSliderThumbStyle">
     <Setter Property="BorderBrush" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
   </Style>
-  <Style Selector="ColorSlider:pointerover:dark-selector /template/ Thumb.SliderThumbStyle">
+  <Style Selector="ColorSlider:pointerover:dark-selector /template/ Thumb.ColorSliderThumbStyle">
     <Setter Property="Opacity" Value="0.7" />
   </Style>
-  <Style Selector="ColorSlider:pointerover:light-selector /template/ Thumb.SliderThumbStyle">
+  <Style Selector="ColorSlider:pointerover:light-selector /template/ Thumb.ColorSliderThumbStyle">
     <Setter Property="Opacity" Value="0.8" />
   </Style>
 
-  <Style Selector="ColorSlider:dark-selector /template/ Thumb.SliderThumbStyle">
+  <Style Selector="ColorSlider:dark-selector /template/ Thumb.ColorSliderThumbStyle">
     <Setter Property="BorderBrush" Value="{DynamicResource SystemControlBackgroundChromeBlackHighBrush}" />
   </Style>
-  <Style Selector="ColorSlider:light-selector /template/ Thumb.SliderThumbStyle">
+  <Style Selector="ColorSlider:light-selector /template/ Thumb.ColorSliderThumbStyle">
     <Setter Property="BorderBrush" Value="{DynamicResource SystemControlBackgroundChromeWhiteBrush}" />
   </Style>