Get ResizeElementAdorner sizing to work, though Adorner isn't updating alongside

Author: michael-hawker

…eElement/ResizeElementAdornerSample.xaml …nt/ResizeElementAdornerCanvasSample.xamlcomponents/Adorners/samples/ResizeElement/ResizeElementAdornerSample.xaml renamed to components/Adorners/samples/ResizeElement/ResizeElementAdornerCanvasSample.xaml components/Adorners/samples/ResizeElement/ResizeElementAdornerSample.xaml renamed to components/Adorners/samples/ResizeElement/ResizeElementAdornerCanvasSample.xaml

@@ -1,5 +1,5 @@
 <!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
-<Page x:Class="AdornersExperiment.Samples.ResizeElement.ResizeElementAdornerSample"
+<Page x:Class="AdornersExperiment.Samples.ResizeElement.ResizeElementAdornerCanvasSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:adorners="using:CommunityToolkit.WinUI.Adorners"

…ement/ResizeElementAdornerSample.xaml.cs …ResizeElementAdornerCanvasSample.xaml.cscomponents/Adorners/samples/ResizeElement/ResizeElementAdornerSample.xaml.cs renamed to components/Adorners/samples/ResizeElement/ResizeElementAdornerCanvasSample.xaml.cs components/Adorners/samples/ResizeElement/ResizeElementAdornerSample.xaml.cs renamed to components/Adorners/samples/ResizeElement/ResizeElementAdornerCanvasSample.xaml.cs

@@ -5,10 +5,10 @@
 namespace AdornersExperiment.Samples.ResizeElement;
 
 [ToolkitSampleBoolOption("IsAdornerVisible", false, Title = "Is Adorner Visible")]
-[ToolkitSample(id: nameof(ResizeElementAdornerSample), "Resize Element Adorner", description: "A sample for showing how to use an Adorner for resizing an element.")]
-public sealed partial class ResizeElementAdornerSample : Page
+[ToolkitSample(id: nameof(ResizeElementAdornerCanvasSample), "Resize Element Adorner on Canvas", description: "A sample for showing how to use an Adorner for resizing an element within a Canvas.")]
+public sealed partial class ResizeElementAdornerCanvasSample : Page
 {
-    public ResizeElementAdornerSample()
+    public ResizeElementAdornerCanvasSample()
     {
         this.InitializeComponent();
     }

components/Adorners/samples/ResizeElementAdorner.md

@@ -20,4 +20,8 @@ The `ResizeElementAdorner` provides resizing functionality to any `FrameworkElem
 
 The `ResizeElementAdorner` can be attached to any element and displayed to allow a user to resize the adorned element by dragging the resize handles.
 
-> [!SAMPLE ResizeElementAdornerSample]
+> [!SAMPLE ResizeElementAdornerCanvasSample]
+
+This can be done above within a `Canvas` layout control, or with general layout using Margins as well:
+
+// TODO: Add Margin example here

components/Adorners/src/ResizeElement/ResizeElementAdorner.cs

@@ -56,7 +56,12 @@ protected override void OnApplyTemplate()
         BottomRightThumbPart = GetTemplateChild(nameof(BottomRightThumbPart)) as ResizeThumb;
 
         // OnApplyTemplate can be called after OnAttached, especially if the Adorner isn't initially visible, so we need to re-apply the TargetControl here.
-        OnAttached();
+        if (AdornedElement is not null)
+        {
+            // Guard this incase we're getting removed from the visual tree...
+            // Not sure if this is a bug in the Adorner lifecycle or not or specific to how we've set this up here.
+            OnAttached();
+        }
     }
 
     /// <inheritdoc/>

components/Adorners/src/ResizeElement/Thumb/ResizePositionMode.cs

@@ -18,4 +18,7 @@ public enum ResizePositionMode
     /// Resize using <see cref="FrameworkElement.Margin"/>'s Top and Left values.
     /// </summary>
     MarginTopLeft,
+
+    // TODO: MarginBottomRight could be added in the future. Not sure of alternate anchor points are useful? e.g. TopRight, BottomLeft
+    // Alternate anchor points would require more complex calculations during resize to determine when to change the Width/Height of the element.
 }

components/Adorners/src/ResizeElement/Thumb/ResizeThumb.cs

@@ -76,16 +76,27 @@ protected override void OnManipulationDelta(ManipulationDeltaRoutedEventArgs e)
         }
 #endif
 
+        // If we're adjusting the opposite boundary then we need to invert the change values.
+        if (Direction == ResizeDirection.Right || Direction == ResizeDirection.TopRight || Direction == ResizeDirection.BottomRight)
+        {
+            horizontalChange *= -1;
+        }
+
+        if (Direction == ResizeDirection.Bottom || Direction == ResizeDirection.BottomLeft || Direction == ResizeDirection.BottomRight)
+        {
+            verticalChange *= -1;
+        }
+
         // Apply the changes to the target control
         if (TargetControl != null)
         {
             // Keep track if we became constrained in a direction and don't adjust position if we didn't update the size.
             bool adjustWidth = false;
             bool adjustHeight = false;
 
-            // Calculate the new size
-            var newWidth = _originalSize?.Width ?? 0 + horizontalChange;
-            var newHeight = _originalSize?.Height ?? 0 + verticalChange;
+            // Calculate the new size (Note: This is the opposite direction to expand the opposing boundary of the thumb)
+            var newWidth = (_originalSize?.Width ?? 0) - horizontalChange;
+            var newHeight = (_originalSize?.Height ?? 0) - verticalChange;
 
             if (Direction != ResizeDirection.Top && Direction != ResizeDirection.Bottom)
             {