Implement :large-selector pseudo class

src/Avalonia.Controls/ColorPicker/ColorSpectrum/ColorSpectrum.cs

@@ -20,9 +20,10 @@ namespace Avalonia.Controls.Primitives
     /// <summary>
     /// A two dimensional spectrum for color selection.
     /// </summary>
-    [PseudoClasses(pcLightSelector)]
+    [PseudoClasses(pcLargeSelector, pcLightSelector)]
     public partial class ColorSpectrum : TemplatedControl
     {
+        protected const string pcLargeSelector = ":large-selector";
         protected const string pcLightSelector = ":light-selector";
 
         /// <summary>
@@ -514,18 +515,19 @@ namespace Avalonia.Controls.Primitives
         /// </summary>
         private void UpdatePseudoClasses()
         {
-            //if (m_isPointerPressed)
+            if (_isPointerPressed)
-            //{
+            {
-            //    VisualStateManager.GoToState(this, m_shouldShowLargeSelection ? "PressedLarge" : "Pressed", useTransitions);
+                PseudoClasses.Set(pcLargeSelector, _shouldShowLargeSelection);
-            //}
+            }
-            //else if (m_isPointerOver)
+            else if (_isPointerOver)
-            //{
+            {
-            //    VisualStateManager.GoToState(this, "PointerOver", useTransitions);
+                //VisualStateManager.GoToState(this, "PointerOver", useTransitions);
-            //}
+                PseudoClasses.Set(pcLargeSelector, false);
-            //else
+            }
-            //{
+            else
-            //    VisualStateManager.GoToState(this, "Normal", useTransitions);
+            {
-            //}
+                PseudoClasses.Set(pcLargeSelector, false);
+            }
 
             PseudoClasses.Set(pcLightSelector, SelectionEllipseShouldBeLight());
 

src/Avalonia.Themes.Fluent/Controls/ColorSpectrum.xaml

@@ -52,9 +52,7 @@
                       Background="Transparent"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch">
-                <Grid x:Name="PART_SelectionEllipsePanel"
+                <Grid x:Name="PART_SelectionEllipsePanel">
-                      Width="16"
-                      Height="16">
                   <Ellipse x:Name="FocusEllipse"
                            Margin="-2"
                            StrokeThickness="2"
@@ -98,7 +96,7 @@
     </Setter>
   </Style>
 
-  <!-- SelectionEllipseColor -->
+  <!-- Selector Color -->
   <Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse">
     <Setter Property="Stroke" Value="{DynamicResource SystemControlBackgroundChromeWhiteBrush}" />
   </Style>
@@ -112,11 +110,19 @@
     <Setter Property="Stroke" Value="{DynamicResource SystemControlBackgroundChromeWhiteBrush}" />
   </Style>
 
+  <!-- Selector Size -->
+  <Style Selector="ColorSpectrum /template/ Grid#PART_SelectionEllipsePanel">
+    <Setter Property="Width" Value="16" />
+    <Setter Property="Height" Value="16" />
+  </Style>
+  <Style Selector="ColorSpectrum:large-selector /template/ Grid#PART_SelectionEllipsePanel">
+    <Setter Property="Width" Value="48" />
+    <Setter Property="Height" Value="48" />
+  </Style>
+
   <!--<VisualStateManager.VisualStateGroups>
     <VisualStateGroup
       x:Name="CommonStates">
-      <VisualState
-        x:Name="Normal" />
       <VisualState
         x:Name="PointerOver">
         <VisualState.Setters>
@@ -127,17 +133,6 @@
       </VisualState>
       <VisualState
         x:Name="Pressed" />
-      <VisualState
-        x:Name="PressedLarge">
-        <VisualState.Setters>
-          <Setter
-            Target="SelectionEllipsePanel.Width"
-            Value="48" />
-          <Setter
-            Target="SelectionEllipsePanel.Height"
-            Value="48" />
-        </VisualState.Setters>
-      </VisualState>
     </VisualStateGroup>
     <VisualStateGroup
       x:Name="FocusStates">