ContentColorPicker WIP

Toolkit.UI.Controls.Avalonia/ContentColorPicker/ContentColorPicker.axaml

@@ -0,0 +1,33 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Toolkit.UI.Controls.Avalonia">
+    <ControlTheme x:Key="{x:Type ContentColorPicker}" TargetType="ContentColorPicker">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid>
+                        <ContentPresenter
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                        <Canvas x:Name="Canvas" Background="Transparent">
+                            <Border
+                                x:Name="Preview"
+                                Width="100"
+                                Height="100"
+                                Background="Pink" />
+                        </Canvas>
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

Toolkit.UI.Controls.Avalonia/ContentColorPicker/ContentColorPicker.cs

@@ -0,0 +1,73 @@
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+
+namespace Toolkit.UI.Controls.Avalonia;
+
+public class ContentColorPicker : ContentControl
+{
+    private Canvas? canvas;
+    private Border? preview;
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs args)
+    {
+        base.OnApplyTemplate(args);
+
+        canvas = args.NameScope.Find<Canvas>("Canvas");
+
+        if (canvas is not null)
+        {
+            canvas.PointerMoved += OnPointerMoved;
+            canvas.PointerExited += OnPointerExited;
+            canvas.PointerEntered += OnPointerEntered;
+        }
+
+        preview = args.NameScope.Find<Border>("Preview");
+    }
+
+    private void OnPointerMoved(object? sender, 
+        PointerEventArgs args)
+    {
+        if (canvas is null || preview is null)
+        {
+            return;
+        }
+
+        double relativeX = args.GetPosition(canvas).X;
+        double relativeY = args.GetPosition(canvas).Y;
+
+        double newX = relativeX < 0 ? 0 : (relativeX > canvas.Bounds.Width ? canvas.Bounds.Width : relativeX);
+        double newY = relativeY < 0 ? 0 : (relativeY > canvas.Bounds.Height ? canvas.Bounds.Height : relativeY);
+
+        if (newX < 0 || newX > canvas.Bounds.Width || newY < 0 || newY > canvas.Bounds.Height)
+        {
+            preview.IsVisible = false;
+            return;
+        }
+
+        Canvas.SetLeft(preview, newX);
+        Canvas.SetTop(preview, newY);
+    }
+
+    private void OnPointerEntered(object? sender, 
+        PointerEventArgs args)
+    {
+        if (preview is null)
+        {
+            return;
+        }
+
+        preview.IsVisible = true;
+    }
+
+    private void OnPointerExited(object? sender, 
+        PointerEventArgs args)
+    {
+        if (preview is null)
+        {
+            return;
+        }
+
+        preview.IsVisible = false;
+    }
+}

Toolkit.UI.Controls.Avalonia/Themes/ControlResources.axaml

@@ -35,7 +35,6 @@
                         </Border>
                     </ControlTemplate>
                 </Setter>
-
                 <Style Selector="^:pointerover">
                     <Style Selector="^ /template/ Border#ButtonLayoutGrid">
                         <Setter Property="Background" Value="{DynamicResource TextControlButtonBackgroundPointerOver}" />
@@ -46,7 +45,6 @@
                         <Setter Property="Foreground" Value="{DynamicResource TextControlButtonForegroundPointerOver}" />
                     </Style>
                 </Style>
-
                 <Style Selector="^:pressed">
                     <Style Selector="^ /template/ Border#ButtonLayoutGrid">
                         <Setter Property="Background" Value="{DynamicResource TextControlButtonBackgroundPressed}" />
@@ -57,7 +55,6 @@
                         <Setter Property="Foreground" Value="{DynamicResource TextControlButtonForegroundPressed}" />
                     </Style>
                 </Style>
-
                 <Style Selector="^:disabled /template/ Border#ButtonLayoutGrid">
                     <Setter Property="Opacity" Value="0" />
                 </Style>
@@ -72,7 +69,7 @@
                 <MergeResourceInclude Source="../ImageCropper/ImageCropper.axaml" />
                 <MergeResourceInclude Source="../ContentCard/ContentCard.axaml" />
                 <MergeResourceInclude Source="../TaskDialog/TaskDialog.axaml" />
-
+                <MergeResourceInclude Source="../ContentColorPicker/ContentColorPicker.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>