Hook event into ResizeThumb to know when element has been changed so we can update Adorner

I'm not sure why the underlying element changed is not triggering the existing Adorner layout hooks, so this'll have to do for now... It at least works as expected now.

Author: michael-hawker

components/Adorners/src/Adorner.cs

@@ -97,6 +97,9 @@ internal void OnLayoutUpdated(object? sender, object e)
 
             Canvas.SetLeft(this, coord.X);
             Canvas.SetTop(this, coord.Y);
+
+            // Also update size
+            OnSizeChanged(this, null!);
         }
     }
 
@@ -134,4 +137,12 @@ protected virtual void OnAttached() { }
     /// Override this method to unhook functionality from the <see cref="AdornedElement"/>.
     /// </remarks>
     protected virtual void OnDetaching() { }
+
+    /// <inheritdoc/>
+    public new void UpdateLayout()
+    {
+        OnLayoutUpdated(this, null!);
+
+        base.UpdateLayout();
+    }
 }

components/Adorners/src/ResizeElement/ResizeElementAdorner.cs

@@ -77,13 +77,31 @@ protected override void OnAttached()
         TopRightThumbPart?.TargetControl = AdornedElement;
         BottomLeftThumbPart?.TargetControl = AdornedElement;
         BottomRightThumbPart?.TargetControl = AdornedElement;
+
+        TopThumbPart?.TargetControlResized += OnTargetControlResized;
+        BottomThumbPart?.TargetControlResized += OnTargetControlResized;
+        LeftThumbPart?.TargetControlResized += OnTargetControlResized;
+        RightThumbPart?.TargetControlResized += OnTargetControlResized;
+        TopLeftThumbPart?.TargetControlResized += OnTargetControlResized;
+        TopRightThumbPart?.TargetControlResized += OnTargetControlResized;
+        BottomLeftThumbPart?.TargetControlResized += OnTargetControlResized;
+        BottomRightThumbPart?.TargetControlResized += OnTargetControlResized;
     }
 
     /// <inheritdoc/>
     protected override void OnDetaching()
     {
         base.OnDetaching();
 
+        TopThumbPart?.TargetControlResized -= OnTargetControlResized;
+        BottomThumbPart?.TargetControlResized -= OnTargetControlResized;
+        LeftThumbPart?.TargetControlResized -= OnTargetControlResized;
+        RightThumbPart?.TargetControlResized -= OnTargetControlResized;
+        TopLeftThumbPart?.TargetControlResized -= OnTargetControlResized;
+        TopRightThumbPart?.TargetControlResized -= OnTargetControlResized;
+        BottomLeftThumbPart?.TargetControlResized -= OnTargetControlResized;
+        BottomRightThumbPart?.TargetControlResized -= OnTargetControlResized;
+
         TopThumbPart?.TargetControl = null;
         BottomThumbPart?.TargetControl = null;
         LeftThumbPart?.TargetControl = null;
@@ -93,4 +111,12 @@ protected override void OnDetaching()
         BottomLeftThumbPart?.TargetControl = null;
         BottomRightThumbPart?.TargetControl = null;
     }
+
+    private void OnTargetControlResized(ResizeThumb sender, TargetControlResizedEventArgs args)
+    {
+        // TODO: Investigate more
+        // Note: I'm not sure why the AdornedElement's SizeChanged/LayoutUpdate isn't getting triggered by our changes...
+        // So for now, we'll just force a layout update here of the Adorner itself to realign to the new size of the AdornedElement.
+        this.UpdateLayout();
+    }
 }

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

@@ -9,6 +9,8 @@ namespace CommunityToolkit.WinUI.Controls;
 /// </summary>
 public partial class ResizeThumb : Control
 {
+    public event TypedEventHandler<ResizeThumb, TargetControlResizedEventArgs>? TargetControlResized;
+
     private Thickness? _originalMargin;
     private Point? _originalPosition;
     private Size? _originalSize;
@@ -130,6 +132,12 @@ protected override void OnManipulationDelta(ManipulationDeltaRoutedEventArgs e)
                     newMargin.Top += verticalChange;
 
                 TargetControl.Margin = newMargin;
+
+                TargetControlResized?.Invoke(this, new TargetControlResizedEventArgs(
+                    TargetControl.Margin.Left,
+                    TargetControl.Margin.Top,
+                    TargetControl.Width,
+                    TargetControl.Height));
             }
             else
             {
@@ -143,7 +151,21 @@ protected override void OnManipulationDelta(ManipulationDeltaRoutedEventArgs e)
                 if ((Direction == ResizeDirection.Top || Direction == ResizeDirection.TopLeft || Direction == ResizeDirection.TopRight)
                     && adjustHeight)
                     Canvas.SetTop(TargetControl, newY);
+
+                TargetControlResized?.Invoke(this, new TargetControlResizedEventArgs(
+                    Canvas.GetLeft(TargetControl),
+                    Canvas.GetTop(TargetControl),
+                    TargetControl.Width,
+                    TargetControl.Height));
             }
         }
     }
 }
+
+public class TargetControlResizedEventArgs(double newLeft, double newTop, double newWidth, double newHeight) : EventArgs
+{
+    public double NewLeft { get; } = newLeft;
+    public double NewTop { get; } = newTop;
+    public double NewWidth { get; } = newWidth;
+    public double NewHeight { get; } = newHeight;
+}