Move & resize (dynamically created) rectangle with mouse events in UWP

Question

I'm trying to move/resize a rectangle which is created in the runtime.

I tried according to this solution but did not work on the dynamic rectangle. I have found an implementation which allows to move a rectangle which is already defined in the XAML file.

Basically what I want is to move & resize a dynamically create rectangle in the runtime.

If anyone can help me on this, any help is very much appreciated.

Answer 1

Thank you @Anonymous for the update but it did not move the rectangle.

I found the solution after analyzing the code and playing around a little. Initially I was using the manipulation events to implement the drag and drop behavior for the dynamic rectangle. The issue was, I had to override the OnPointerPressed, OnPointerReleased & OnPointerMoved events in the code to obtain some other functionalities of the application. I have not handled the rectangle manipulation events from the base pointer events so it was always ended up executing the base pointer events.

Here is the xaml code

<Grid x:Name="viewport">  
                <Border x:Name="viewportBorder" Background="White" BorderThickness="15, 15, 15, 15" BorderBrush="#FF353334" />  
</Grid>  

Here is the code behind,

private bool TransformInProgress = false;  
private bool TransformStarted = false;  
  
protected override void OnPointerMoved(PointerRoutedEventArgs e)  
        {  
            ...  
  
            if (TransformInProgress)  
            {  
                Window.Current.CoreWindow.PointerCursor = new CoreCursor(CoreCursorType.SizeAll, 0);  
                return;  
            }  
            ...  

            base.OnPointerMoved(e);  
        }  

protected override void OnPointerPressed(PointerRoutedEventArgs e)  
{  
            ...  
  
            if (TransformInProgress && TransformHandlerAvailableAtCurrentApoint(currentPointerLocation))  
                return;  
            else  
            {  
                TransformInProgress = false;  
                TransformStarted = false;  
            }  
  
            if (TransformInProgress && commentIndexAtCurrentPoint == -1)  
            {  
                ClearTransformHandles();  
                return;  
            }  
  
            ...  
  
            base.OnPointerPressed(e);  
}  

protected override void OnPointerReleased(PointerRoutedEventArgs e)  
        {  
            if (TransformInProgress && TransformStarted)  
                return;  
  
            ...  
  
            base.OnPointerReleased(e);  
        }  

private void AttachRectangleMoveHandler(Point point)  
        {  
            var handler = new Rectangle  
            {  
                Width = 14,  
                Height = 14,  
                Fill = new SolidColorBrush(Colors.Gray),  
                CompositeMode = ElementCompositeMode.SourceOver,  
                Name = "RectangleTransformHandler",  
                ManipulationMode = ManipulationModes.All,  
                RenderTransformOrigin = new Point(point.X - 7d, point.Y - 7d),  
                RenderTransform = new TranslateTransform { X = point.X - 7d, Y = point.Y - 7d }  
            };  
  
            handler.ManipulationStarting += delegate (object sender, ManipulationStartingRoutedEventArgs e) { TransformStarted = true; };  
            handler.ManipulationDelta += Handler_ManipulationDelta;  
            handler.ManipulationCompleted += delegate (object sender, ManipulationCompletedRoutedEventArgs e) { TransformStarted = false; };  
  
            handler.PointerEntered += delegate (object sender, PointerRoutedEventArgs e) { TransformInProgress = true; };  
            handler.PointerExited += delegate (object sender, PointerRoutedEventArgs e) { Window.Current.CoreWindow.PointerCursor = new CoreCursor(CoreCursorType.Arrow, 0); };  
  
            SelectCanvas.Children.Add(handler);  
        }  

Answer 2

Hello,

Welcome to Microsoft Q&A!

You could use Pointer events like PointerMove to get the position of the pointer. Then you could calculate the value that the rectangle needs to be changed.
I've made a sample below that move and resize a rectangle created in the code behind.

**Please note that you have to make a flag or switch function on your own to make sure that move & resize won't happen at the same time.

Here is the xaml code:

    <Canvas x:Name="RootCanvas">  
        <Button Content="CLick" Click="Button_Click" Width="100" Height="100" Canvas.Top="0" Canvas.Left="0"/>  
    </Canvas>  

Here is the code behind:

    public sealed partial class MainPage : Page  
    {  
        public bool isDraging { get; set; }  
        // pointer orignial position  
        public double origitnalX { get; set; }  
        public double origitnalY { get; set; }  
        //rectangle size  
        public double rectangleWidth { get; set; }  
        public double rectangleHeight { get; set; }  
  
        public Rectangle TargetRectngle { get; set; }  
  
        public MainPage()  
        {  
            this.InitializeComponent();  
        }  
  
        private void Button_Click(object sender, RoutedEventArgs e)  
        {  
            Rectangle rectangle = new Rectangle();  
            rectangle.Name = "MyRectangle";  
            rectangle.Fill = new SolidColorBrush(Colors.CadetBlue);  
            rectangle.Width = 300;  
            rectangle.Height = 300;  
            rectangle.PointerPressed += Rectangle_PointerPressed;  
            rectangle.PointerMoved += Rectangle_PointerMoved;  
            rectangle.PointerReleased += Rectangle_PointerReleased;  
            rectangle.SetValue(Canvas.LeftProperty, 300);  
            rectangle.SetValue(Canvas.TopProperty, 300);  
            RootCanvas.Children.Add(rectangle);  
  
            //assign to a public property  
            TargetRectngle = rectangle;  
        }  
  
        private void Rectangle_PointerPressed(object sender, PointerRoutedEventArgs e)  
        {  
            //enable dragging  
            isDraging = true;  
            //the original size of the pointer  
            var pointerPosition = Windows.UI.Core.CoreWindow.GetForCurrentThread().PointerPosition;  
            origitnalX= pointerPosition.X - Window.Current.Bounds.X;  
            origitnalY= pointerPosition.Y - Window.Current.Bounds.Y;  
            //get the rectangle size   
            rectangleWidth = TargetRectngle.Width;  
            rectangleHeight = TargetRectngle.Height;  
  
  
            e.Handled = true;  
        }  
  
        private void Rectangle_PointerMoved(object sender, PointerRoutedEventArgs e)  
        {  
            //this the the movement part  
            //if (isDraging)  
            //{  
            //    //get pointer position  
            //    var pointerPosition = Windows.UI.Core.CoreWindow.GetForCurrentThread().PointerPosition;  
            //    var x = pointerPosition.X - Window.Current.Bounds.X;  
            //    var y = pointerPosition.Y - Window.Current.Bounds.Y;  
            //    //change position  
            //    TargetRectngle.SetValue(Canvas.LeftProperty, x - 150);  
            //    TargetRectngle.SetValue(Canvas.TopProperty, y - 150);  
            //}  
  
            //this is the resize part  
            //if (isDraging)   
            //{  
  
            //    //get pointer position  
            //    var pointerPosition = Windows.UI.Core.CoreWindow.GetForCurrentThread().PointerPosition;  
            //    var x = pointerPosition.X - Window.Current.Bounds.X;  
            //    var y = pointerPosition.Y - Window.Current.Bounds.Y;  
            //    //get the move offset  
            //    double scaleX = (rectangleWidth + x - origitnalX) / rectangleWidth;  
            //    double scaleY = (rectangleHeight + y - origitnalY) / rectangleHeight;  
  
            //    //resize the rectagnle using ScaleTransform  
            //    ScaleTransform scaleTransform = new ScaleTransform();  
            //    scaleTransform.ScaleX = scaleX;  
            //    scaleTransform.ScaleY = scaleY;  
            //    TargetRectngle.RenderTransform = scaleTransform;  
                
            //}  
  
            e.Handled = true;  
        }  
  
        private void Rectangle_PointerReleased(object sender, PointerRoutedEventArgs e)  
        {  
            //disable dragging  
            isDraging = false;  
            e.Handled = true;  
        }  
  
    }  

You could try the code in a blank UWP project to see how it works.

Thank you.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.