How to make a grid resizable by pressing and dragging? RRS feed

  • Question

  • I've a grid that is movable/draggable via manipulationdelta. I use it like a draggable window for the user to move it whereever on the screen.

    I want to make it resizable so the user can make it bigger or smaller.  Not zoom.  Actually increasing or decreasing the width and height by letting the user press on the corner and drag. 

    How would I do this?  Many thanks.

    Thursday, August 21, 2014 2:57 PM


  • Here's a really, really rough way to make this happen - you can refine this code for your own purposes.

    In a nutshell:

    1) You have a region that allows the mouse to resize the object - I used a Border

    2) When this region is clicked and held, the object is resized according to the difference in mouse location - I listened for a number of pointer events.

    3) When the mouse is moved, the parent object tracks the mouse to understand how much to resize - I use a canvas for this.

    4) When the mouse is released, the object no longer resizes.

     <Canvas Background="Black" PointerMoved="Canvas_PointerMoved" x:Name="MainCanvas">
                <Border x:Name="MyBorder" BorderBrush="Green" BorderThickness="5" Width="200" Height="200" PointerPressed="Border_PointerPressed" PointerEntered="Border_PointerEntered" PointerExited="Border_PointerExited" PointerReleased="Border_PointerReleased" >
                    <Grid Background="Blue"></Grid>
      public sealed partial class MainPage : Page
            public MainPage()
            bool ResizeObject = false;
            Point PointerCurrentLocation = new Point();
            Point ResizeStartPoint = new Point();
            private void Border_PointerPressed(object sender, PointerRoutedEventArgs e)
                ResizeObject = true;
                ResizeStartPoint = PointerCurrentLocation;
            private void Border_PointerEntered(object sender, PointerRoutedEventArgs e)
                Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.SizeAll, 1);
            private void Border_PointerExited(object sender, PointerRoutedEventArgs e)
                Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.SizeAll, 1);
            private void Border_PointerReleased(object sender, PointerRoutedEventArgs e)
                ResizeObject = false;
            private void Canvas_PointerMoved(object sender, PointerRoutedEventArgs e)
                PointerCurrentLocation = e.GetCurrentPoint(MainCanvas).Position;
                if (ResizeObject)
                    MyBorder.Width = MyBorder.Width + (PointerCurrentLocation.X - ResizeStartPoint.X);
                    MyBorder.Height = MyBorder.Height + (PointerCurrentLocation.Y - ResizeStartPoint.Y);
                    Debug.WriteLine("PointerCurrentLocation.X: " + PointerCurrentLocation.X.ToString());
                    Debug.WriteLine("PointerCurrentLocation.Y: " + PointerCurrentLocation.Y.ToString());
                    Debug.WriteLine("ResizeStartPoint.X: " + ResizeStartPoint.X.ToString());
                    Debug.WriteLine("ResizeStartPoint.Y: " + ResizeStartPoint.Y.ToString());
                    Debug.WriteLine("Difference X: " + (PointerCurrentLocation.X - ResizeStartPoint.X).ToString());
                    Debug.WriteLine("Difference Y: " + (PointerCurrentLocation.Y - ResizeStartPoint.Y).ToString());

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, August 21, 2014 8:23 PM