From 11c81cc24740df4875f11929ace0c6c0413d10ad Mon Sep 17 00:00:00 2001
From: TheXamlGuy <dan_clark@outlook.com>
Date: Fri, 11 Oct 2024 09:35:28 +0100
Subject: [PATCH] Update cropping UI

---
 .../ContentCropper/ContentCropper.axaml       | 95 ++++++++-----------
 .../ContentCropper/ContentCropper.cs          | 36 ++++---
 2 files changed, 65 insertions(+), 66 deletions(-)

diff --git a/Toolkit.UI.Controls.Avalonia/ContentCropper/ContentCropper.axaml b/Toolkit.UI.Controls.Avalonia/ContentCropper/ContentCropper.axaml
index 33a46bb..6e3c494 100644
--- a/Toolkit.UI.Controls.Avalonia/ContentCropper/ContentCropper.axaml
+++ b/Toolkit.UI.Controls.Avalonia/ContentCropper/ContentCropper.axaml
@@ -4,64 +4,43 @@
     xmlns:controls="using:Toolkit.UI.Controls.Avalonia">
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Light">
-            <StaticResource x:Key="ContentCropperThumbBackground" ResourceKey="AccentFillColorDefaultBrush" />
-            <StaticResource x:Key="ContentCropperThumbBrush" ResourceKey="ControlElevationBorderBrush" />
-            <StaticResource x:Key="ContentCropperOuterThumbBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
+
+
+            <StaticResource x:Key="ContentCropperOverlayBrush" ResourceKey="SmokeFillColorDefaultBrush" />
+            <StaticResource x:Key="ContentCropperInnerBorderBrush" ResourceKey="FocusStrokeColorOuter" />
+
         </ResourceDictionary>
         <ResourceDictionary x:Key="Dark">
-            <StaticResource x:Key="ContentCropperThumbBackground" ResourceKey="AccentFillColorDefaultBrush" />
-            <StaticResource x:Key="ContentCropperThumbBrush" ResourceKey="ControlElevationBorderBrush" />
+
             <StaticResource x:Key="ContentCropperOuterThumbBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
+            <StaticResource x:Key="ContentCropperOverlayBrush" ResourceKey="SmokeFillColorDefaultBrush" />
+            <StaticResource x:Key="ContentCropperInnerBorderBrush" ResourceKey="FocusStrokeColorOuter" />
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
-    <CornerRadius x:Key="ContentCropperThumbCornerRadius">10</CornerRadius>
-    <x:Double x:Key="ContentCropperInnerThumbWidth">12</x:Double>
-    <x:Double x:Key="ContentCropperInnerThumbHeight">12</x:Double>
+
     <x:Double x:Key="ContentCropperThumbWidth">18</x:Double>
     <x:Double x:Key="ContentCropperThumbHeight">18</x:Double>
+
+    <Thickness x:Key="ContentCropperTopLeftThumbBorderThickness">3,3,0,0</Thickness>
+    <Thickness x:Key="ContentCropperTopRightThumbBorderThickness">0,3,3,0</Thickness>
+    <Thickness x:Key="ContentCropperBottomRightThumbBorderThickness">0,0,3,3</Thickness>
+    <Thickness x:Key="ContentCropperBottomLeftThumbBorderThickness">3,0,0,3</Thickness>
+
     <ControlTheme x:Key="ContentCropperThumbStyle" TargetType="Thumb">
-        <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="Background" Value="{DynamicResource ContentCropperThumbBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ContentCropperThumbBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ContentCropperInnerBorderBrush}" />
         <Setter Property="ClipToBounds" Value="False" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate>
                     <Border
-                        Margin="-2"
-                        Background="{DynamicResource ContentCropperOuterThumbBackground}"
+                        Background="Transparent"
                         BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{DynamicResource ContentCropperOuterThumbCornerRadius}">
-                        <Ellipse
-                            Name="InnerThumb"
-                            Width="{DynamicResource ContentCropperInnerThumbWidth}"
-                            Height="{DynamicResource ContentCropperInnerThumbHeight}"
-                            Fill="{TemplateBinding Background}"
-                            RenderTransform="scaleX(0.86) scaleY(0.86)">
-                            <Ellipse.Transitions>
-                                <Transitions>
-                                    <TransformOperationsTransition
-                                        Easing="0,0 0,1"
-                                        Property="RenderTransform"
-                                        Duration="00:00:00.167" />
-                                </Transitions>
-                            </Ellipse.Transitions>
-                        </Ellipse>
-                    </Border>
+                        BorderThickness="{TemplateBinding BorderThickness}" />
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
-        <Style Selector="^:pointerover /template/ Ellipse#InnerThumb">
-            <Setter Property="RenderTransform" Value="scaleX(1.167) scaleY(1.167)" />
-        </Style>
-        <Style Selector="^:pressed /template/ Ellipse#InnerThumb">
-            <Setter Property="RenderTransform" Value="scaleX(0.71) scaleY(0.71)" />
-        </Style>
-        <Style Selector="^:disabled /template/ Ellipse#InnerThumb">
-            <Setter Property="RenderTransform" Value="scaleX(1.167) scaleY(1.167)" />
-        </Style>
     </ControlTheme>
+
     <ControlTheme x:Key="{x:Type ContentCropper}" TargetType="ContentCropper">
         <Setter Property="Template">
             <ControlTemplate>
@@ -79,45 +58,53 @@
                     <Canvas x:Name="Canvas">
                         <Rectangle
                             x:Name="RectangleLeft"
-                            Fill="{DynamicResource SmokeFillColorDefaultBrush}"
+                            Fill="{DynamicResource ContentCropperOverlayBrush}"
                             UseLayoutRounding="True" />
                         <Rectangle
                             x:Name="RectangleTop"
-                            Fill="{DynamicResource SmokeFillColorDefaultBrush}"
+                            Fill="{DynamicResource ContentCropperOverlayBrush}"
                             UseLayoutRounding="True" />
                         <Rectangle
                             x:Name="RectangleRight"
-                            Fill="{DynamicResource SmokeFillColorDefaultBrush}"
+                            Fill="{DynamicResource ContentCropperOverlayBrush}"
                             UseLayoutRounding="True" />
                         <Rectangle
                             x:Name="RectangleBottom"
-                            Fill="{DynamicResource SmokeFillColorDefaultBrush}"
+                            Fill="{DynamicResource ContentCropperOverlayBrush}"
                             UseLayoutRounding="True" />
                         <Border
                             x:Name="Border"
                             Background="Transparent"
-                            BorderBrush="Transparent"
-                            BorderThickness="2"
+                            BorderBrush="{DynamicResource ContentCropperInnerBorderBrush}"
+                            BorderThickness="1"
                             Cursor="SizeAll" />
                         <Thumb
                             x:Name="TopLeftButton"
-                            Width="{DynamicResource ContentCropperThumbWidth}"
-                            Height="{DynamicResource ContentCropperThumbHeight}"
+                            Width="{StaticResource ContentCropperThumbWidth}"
+                            Height="{StaticResource ContentCropperThumbHeight}"
+                            BorderThickness="{StaticResource ContentCropperTopLeftThumbBorderThickness}"
+                            Cursor="TopLeftCorner"
                             Theme="{StaticResource ContentCropperThumbStyle}" />
                         <Thumb
                             x:Name="TopRightButton"
-                            Width="{DynamicResource ContentCropperThumbWidth}"
-                            Height="{DynamicResource ContentCropperThumbHeight}"
+                            Width="{StaticResource ContentCropperThumbWidth}"
+                            Height="{StaticResource ContentCropperThumbHeight}"
+                            BorderThickness="{StaticResource ContentCropperTopRightThumbBorderThickness}"
+                            Cursor="TopRightCorner"
                             Theme="{StaticResource ContentCropperThumbStyle}" />
                         <Thumb
                             x:Name="BottomLeftButton"
-                            Width="{DynamicResource ContentCropperThumbWidth}"
-                            Height="{DynamicResource ContentCropperThumbHeight}"
+                            Width="{StaticResource ContentCropperThumbWidth}"
+                            Height="{StaticResource ContentCropperThumbHeight}"
+                            BorderThickness="{StaticResource ContentCropperBottomLeftThumbBorderThickness}"
+                            Cursor="BottomLeftCorner"
                             Theme="{StaticResource ContentCropperThumbStyle}" />
                         <Thumb
                             x:Name="BottomRightButton"
-                            Width="{DynamicResource ContentCropperThumbWidth}"
-                            Height="{DynamicResource ContentCropperThumbHeight}"
+                            Width="{StaticResource ContentCropperThumbWidth}"
+                            Height="{StaticResource ContentCropperThumbHeight}"
+                            BorderThickness="{StaticResource ContentCropperBottomRightThumbBorderThickness}"
+                            Cursor="BottomRightCorner"
                             Theme="{StaticResource ContentCropperThumbStyle}" />
                     </Canvas>
                 </Grid>
diff --git a/Toolkit.UI.Controls.Avalonia/ContentCropper/ContentCropper.cs b/Toolkit.UI.Controls.Avalonia/ContentCropper/ContentCropper.cs
index ee69b53..4044e03 100644
--- a/Toolkit.UI.Controls.Avalonia/ContentCropper/ContentCropper.cs
+++ b/Toolkit.UI.Controls.Avalonia/ContentCropper/ContentCropper.cs
@@ -251,20 +251,32 @@ public class ContentCropper : ContentControl
             case "TopLeftButton":
                 newWidth = Math.Max(0, border.Width - deltaX);
                 newHeight = Math.Max(0, border.Height - deltaY);
-                if (newWidth > 0) leftPosition += deltaX;
-                if (newHeight > 0) topPosition += deltaY;
+                if (newWidth > 0)
+                {
+                    leftPosition += deltaX;
+                }
+                if (newHeight > 0)
+                {
+                    topPosition += deltaY;
+                }
                 break;
 
             case "TopRightButton":
                 newWidth = Math.Max(0, border.Width + deltaX);
                 newHeight = Math.Max(0, border.Height - deltaY);
-                if (newHeight > 0) topPosition += deltaY;
+                if (newHeight > 0)
+                {
+                    topPosition += deltaY;
+                }
                 break;
 
             case "BottomLeftButton":
                 newWidth = Math.Max(0, border.Width - deltaX);
                 newHeight = Math.Max(0, border.Height + deltaY);
-                if (newWidth > 0) leftPosition += deltaX;
+                if (newWidth > 0)
+                {
+                    leftPosition += deltaX;
+                }
                 break;
 
             case "BottomRightButton":
@@ -301,26 +313,26 @@ public class ContentCropper : ContentControl
 
         if (topLeftButton is not null)
         {
-            Canvas.SetLeft(topLeftButton, borderLeft - (topLeftButton.Width / 2));
-            Canvas.SetTop(topLeftButton, borderTop - (topLeftButton.Height / 2));
+            Canvas.SetLeft(topLeftButton, borderLeft);
+            Canvas.SetTop(topLeftButton, borderTop);
         }
 
         if (topRightButton is not null)
         {
-            Canvas.SetLeft(topRightButton, borderLeft + borderWidth - (topRightButton.Width / 2));
-            Canvas.SetTop(topRightButton, borderTop - (topRightButton.Height / 2));
+            Canvas.SetLeft(topRightButton, borderLeft + borderWidth - topRightButton.Width);
+            Canvas.SetTop(topRightButton, borderTop);
         }
 
         if (bottomLeftButton is not null)
         {
-            Canvas.SetLeft(bottomLeftButton, borderLeft - (bottomLeftButton.Width / 2));
-            Canvas.SetTop(bottomLeftButton, borderTop + borderHeight - (bottomLeftButton.Height / 2));
+            Canvas.SetLeft(bottomLeftButton, borderLeft);
+            Canvas.SetTop(bottomLeftButton, borderTop + borderHeight - bottomLeftButton.Height);
         }
 
         if (bottomRightButton is not null)
         {
-            Canvas.SetLeft(bottomRightButton, borderLeft + borderWidth - (bottomRightButton.Width / 2));
-            Canvas.SetTop(bottomRightButton, borderTop + borderHeight - (bottomRightButton.Height / 2));
+            Canvas.SetLeft(bottomRightButton, borderLeft + borderWidth - bottomRightButton.Width);
+            Canvas.SetTop(bottomRightButton, borderTop + borderHeight - bottomRightButton.Height);
         }
     }