Add initial ColorSpectrum Fluent style/template

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

@@ -104,15 +104,15 @@ namespace Avalonia.Controls.Primitives
 
             UnregisterEvents();
 
-            _layoutRoot = e.NameScope.Find<Grid>("LayoutRoot");
+            _layoutRoot = e.NameScope.Find<Grid>("PART_LayoutRoot");
-            _sizingGrid = e.NameScope.Find<Grid>("SizingGrid");
+            _sizingGrid = e.NameScope.Find<Grid>("PART_SizingGrid");
-            _spectrumRectangle = e.NameScope.Find<Rectangle>("SpectrumRectangle");
+            _spectrumRectangle = e.NameScope.Find<Rectangle>("PART_SpectrumRectangle");
-            _spectrumEllipse = e.NameScope.Find<Ellipse>("SpectrumEllipse");
+            _spectrumEllipse = e.NameScope.Find<Ellipse>("PART_SpectrumEllipse");
-            _spectrumOverlayRectangle = e.NameScope.Find<Rectangle>("SpectrumOverlayRectangle");
+            _spectrumOverlayRectangle = e.NameScope.Find<Rectangle>("PART_SpectrumOverlayRectangle");
-            _spectrumOverlayEllipse = e.NameScope.Find<Ellipse>("SpectrumOverlayEllipse");
+            _spectrumOverlayEllipse = e.NameScope.Find<Ellipse>("PART_SpectrumOverlayEllipse");
-            _inputTarget = e.NameScope.Find<Canvas>("InputTarget");
+            _inputTarget = e.NameScope.Find<Canvas>("PART_InputTarget");
-            _selectionEllipsePanel = e.NameScope.Find<Panel>("SelectionEllipsePanel");
+            _selectionEllipsePanel = e.NameScope.Find<Panel>("PART_SelectionEllipsePanel");
-            _colorNameToolTip = e.NameScope.Find<ToolTip>("ColorNameToolTip");
+            _colorNameToolTip = e.NameScope.Find<ToolTip>("PART_ColorNameToolTip");
 
             if (_layoutRoot != null)
             {
@@ -149,7 +149,7 @@ namespace Avalonia.Controls.Primitives
             }
 
             UpdateEllipse();
-            UpdateVisualState(useTransitions: false);
+            UpdatePseudoClasses();
         }
 
         /// <summary>
@@ -290,7 +290,7 @@ namespace Avalonia.Controls.Primitives
                 }
             }
 
-            UpdateVisualState(useTransitions: true);
+            UpdatePseudoClasses();
         }
 
         /// <inheritdoc/>
@@ -305,7 +305,7 @@ namespace Avalonia.Controls.Primitives
                 }
             }
 
-            UpdateVisualState(useTransitions: true);
+            UpdatePseudoClasses();
         }
 
         /// <inheritdoc/>
@@ -508,7 +508,10 @@ namespace Avalonia.Controls.Primitives
             CreateBitmapsAndColorMap();
         }
 
-        private void UpdateVisualState(bool useTransitions)
+        /// <summary>
+        /// Updates the visual state of the control by applying latest PseudoClasses.
+        /// </summary>
+        private void UpdatePseudoClasses()
         {
             //if (m_isPointerPressed)
             //{
@@ -555,7 +558,7 @@ namespace Avalonia.Controls.Primitives
             HsvColor = newHsv.ToHsvColor(alpha);
 
             UpdateEllipse();
-            UpdateVisualState(useTransitions: true);
+            UpdatePseudoClasses();
 
             _updatingHsvColor = false;
             _updatingColor = false;
@@ -822,7 +825,7 @@ namespace Avalonia.Controls.Primitives
                 }
             }
 
-            UpdateVisualState(useTransitions: true);
+            UpdatePseudoClasses();
         }
 
         private void OnLayoutRootSizeChanged()
@@ -833,14 +836,14 @@ namespace Avalonia.Controls.Primitives
         private void OnInputTargetPointerEnter(object? sender, PointerEventArgs args)
         {
             _isPointerOver = true;
-            UpdateVisualState(useTransitions: true);
+            UpdatePseudoClasses();
             args.Handled = true;
         }
 
         private void OnInputTargetPointerLeave(object? sender, PointerEventArgs args)
         {
             _isPointerOver = false;
-            UpdateVisualState(useTransitions: true);
+            UpdatePseudoClasses();
             args.Handled = true;
         }
 
@@ -858,7 +861,7 @@ namespace Avalonia.Controls.Primitives
 
             args.Pointer.Capture(inputTarget);
             UpdateColorFromPoint(args.GetCurrentPoint(inputTarget));
-            UpdateVisualState(useTransitions: true);
+            UpdatePseudoClasses();
             UpdateEllipse();
 
             args.Handled = true;
@@ -881,7 +884,7 @@ namespace Avalonia.Controls.Primitives
             _shouldShowLargeSelection = false;
 
             args.Pointer.Capture(null);
-            UpdateVisualState(useTransitions: true);
+            UpdatePseudoClasses();
             UpdateEllipse();
 
             args.Handled = true;

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

@@ -0,0 +1,183 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        x:CompileBindings="True">
+
+  <Design.PreviewWith>
+  </Design.PreviewWith>
+
+  <Styles.Resources>
+  </Styles.Resources>
+
+  <Style Selector="ColorSpectrum">
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate>
+          <Grid x:Name="PART_LayoutRoot">
+            <Grid x:Name="PART_SizingGrid"
+                  HorizontalAlignment="Center"
+                  VerticalAlignment="Center">
+              <Grid.Clip>
+                <RectangleGeometry />
+              </Grid.Clip>
+              <Rectangle x:Name="PART_SpectrumRectangle"
+                         IsHitTestVisible="False"
+                         HorizontalAlignment="Stretch"
+                         VerticalAlignment="Stretch" />
+                         <!--RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
+                         RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />-->
+              <Rectangle x:Name="PART_SpectrumOverlayRectangle"
+                         IsHitTestVisible="False"
+                         HorizontalAlignment="Stretch"
+                         VerticalAlignment="Stretch" />
+                         <!--RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
+                         RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />-->
+              <Ellipse x:Name="PART_SpectrumEllipse"
+                       IsHitTestVisible="False"
+                       HorizontalAlignment="Stretch"
+                       VerticalAlignment="Stretch"
+                       IsVisible="False" />
+              <Ellipse x:Name="PART_SpectrumOverlayEllipse"
+                       IsHitTestVisible="False"
+                       HorizontalAlignment="Stretch"
+                       VerticalAlignment="Stretch"
+                       IsVisible="False" />
+              <Canvas x:Name="PART_InputTarget"
+                      Background="Transparent"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch">
+                <Grid x:Name="PART_SelectionEllipsePanel"
+                      Width="16"
+                      Height="16">
+                  <Ellipse x:Name="FocusEllipse"
+                           Stroke="{DynamicResource SystemControlBackgroundChromeBlackHighBrush}"
+                           Margin="-2"
+                           StrokeThickness="2"
+                           IsHitTestVisible="False"
+                           HorizontalAlignment="Stretch"
+                           VerticalAlignment="Stretch"
+                           IsVisible="False" />
+                  <Ellipse x:Name="SelectionEllipse"
+                           Stroke="{DynamicResource SystemControlBackgroundChromeWhiteBrush}"
+                           StrokeThickness="2"
+                           IsHitTestVisible="False"
+                           HorizontalAlignment="Stretch"
+                           VerticalAlignment="Stretch"
+                           ToolTip.VerticalOffset="-20"
+                           ToolTip.Placement="Top">
+                    <ToolTip.Tip>
+                      <ToolTip x:Name="PART_ColorNameToolTip" />
+                    </ToolTip.Tip>
+                  </Ellipse>
+                </Grid>
+              </Canvas>
+              <Rectangle x:Name="RectangleBorder"
+                         Stroke="{DynamicResource SystemControlForegroundListLowBrush}"
+                         StrokeThickness="2"
+                         IsHitTestVisible="False"
+                         HorizontalAlignment="Stretch"
+                         VerticalAlignment="Stretch" />
+                         <!--RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
+                         RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />-->
+              <Ellipse x:Name="EllipseBorder"
+                       Stroke="{DynamicResource SystemControlForegroundListLowBrush}"
+                       StrokeThickness="2"
+                       IsHitTestVisible="False"
+                       IsVisible="False"
+                       HorizontalAlignment="Stretch"
+                       VerticalAlignment="Stretch" />
+            </Grid>
+          </Grid>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+  </Style>
+
+  <!--<VisualStateManager.VisualStateGroups>
+    <VisualStateGroup
+      x:Name="CommonStates">
+      <VisualState
+        x:Name="Normal" />
+      <VisualState
+        x:Name="PointerOver">
+        <VisualState.Setters>
+          <Setter
+            Target="SelectionEllipse.Opacity"
+            Value="0.8" />
+        </VisualState.Setters>
+      </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="SelectionEllipseColor">
+      <VisualState
+        x:Name="SelectionEllipseLight" />
+      <VisualState
+        x:Name="SelectionEllipseDark">
+        <VisualState.Setters>
+          <Setter
+            Target="FocusEllipse.Stroke"
+            Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" />
+          <Setter
+            Target="SelectionEllipse.Stroke"
+            Value="{ThemeResource SystemControlBackgroundChromeBlackHighBrush}" />
+        </VisualState.Setters>
+      </VisualState>
+    </VisualStateGroup>
+    <VisualStateGroup
+      x:Name="ShapeSelected">
+      <VisualState
+        x:Name="BoxSelected" />
+      <VisualState
+        x:Name="RingSelected">
+        <VisualState.Setters>
+          <Setter
+            Target="SpectrumRectangle.Visibility"
+            Value="Collapsed" />
+          <Setter
+            Target="SpectrumOverlayRectangle.Visibility"
+            Value="Collapsed" />
+          <Setter
+            Target="RectangleBorder.Visibility"
+            Value="Collapsed" />
+          <Setter
+            Target="SpectrumEllipse.Visibility"
+            Value="Visible" />
+          <Setter
+            Target="SpectrumOverlayEllipse.Visibility"
+            Value="Visible" />
+          <Setter
+            Target="EllipseBorder.Visibility"
+            Value="Visible" />
+        </VisualState.Setters>
+      </VisualState>
+    </VisualStateGroup>
+    <VisualStateGroup
+      x:Name="FocusStates">
+      <VisualState
+        x:Name="Unfocused" />
+      <VisualState
+        x:Name="Focused">
+        <VisualState.Setters>
+          <Setter
+            Target="FocusEllipse.Visibility"
+            Value="Visible" />
+        </VisualState.Setters>
+      </VisualState>
+      <VisualState
+        x:Name="PointerFocused" />
+    </VisualStateGroup>
+  </VisualStateManager.VisualStateGroups>-->
+  
+</Styles>

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

@@ -9,6 +9,7 @@
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/CaptionButtons.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Carousel.xaml"/>  
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/CheckBox.xaml"/>
+  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ColorSpectrum.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ComboBox.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ComboBoxItem.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ContentControl.xaml"/>
@@ -59,8 +60,8 @@
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ToggleSwitch.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitButton.xaml" />
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitView.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/DatePicker.xaml"/>  
+  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/DatePicker.xaml"/>
-  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TimePicker.xaml"/>  
+  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TimePicker.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/FlyoutPresenter.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuFlyoutPresenter.xaml"/>
   <!-- ManagedFileChooser comes last because it uses (and overrides) styles for a multitude of other controls...the dialogs were originally UserControls, after all-->