Windows phone 8 drag and drop grid in grid by user

Question

I have a app which has a large grid with a stack-panel and stack-viewer. Inside there are multiply grids which go down the page. Is it possible for the user to be able to drag and drop these grids so they are in a different location. They should be able to move the grid up or down a grid or multiply grids. Should there be a button in the top right corner of every grid which when the user holds down they can move that grid up or down in the stackpanel, stackviewer.

Thank you for any help :)

Answer 1

Trying using the hold event on the grid to define that an object is to be moved. (You could manipulate the background colour to show the grid can now be moved).

Then use the manipulation events for the grid to move the control around (Manipulation Delta and ManipulationCompleted). Manipulation delta will give you translation in both the X and Y domain. Use the Y translation to move the object up or down by the specified translation. ManipulationCompleted can then be used to define that the grid has finished being moved.

I.e

    private void holdEvent(object sender, System.Windows.Input.GestureEventArgs e)
    {

        // Change the background of the exercise label
        Grid grid = (Grid)sender;
        grid.setBackground(Colors.Gray);         

        // Apply manipulation events
        grid.ManipulationDelta += new EventHandler<System.Windows.Input.ManipulationDeltaEventArgs>(GridMoving);
        grid.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(GridMoved);

    }

    private void GridMoving(object sender, ManipulationDeltaEventArgs e)
    {
       // Manipulate the position of the grid here

    }

    private void ExerciseMoved(object sender, ManipulationCompletedEventArgs e)
    {
        //Change background colour back
        Grid grid = (Grid)sender;
        grid.setBackground(Colors.White); // Use the original colour here   


        // Remove the manipulation events from that specified grid, so it wont move,
        // when the user trys to move a different grid.
        grid.ManipulationDelta -= ExerciseMoving;
        grid.ManipulationCompleted -= ExerciseMoved;
    }

Answer 2

Any ManipulationDelta Event try This code

private void Images_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
        {
            if (e.PinchManipulation != null)
            {
                ImagesRoatate.ScaleX = e.PinchManipulation.CumulativeScale;
                ImagesRoatate.ScaleY = e.PinchManipulation.CumulativeScale;
                Point OriginalCenter = e.PinchManipulation.Original.Center;
                Point NewCenter = e.PinchManipulation.Current.Center;
                ImagesRoatate.TranslateX = NewCenter.X - OriginalCenter.X;
                ImagesRoatate.TranslateY = NewCenter.Y - OriginalCenter.Y;
                ImagesRoatate.Rotation = angleBetween2Lines(e.PinchManipulation.Current, e.PinchManipulation.Original);
                e.Handled = true;
            }
            else
            {
                ImagesRoatate.TranslateX +=  e.DeltaManipulation.Translation.X;
                ImagesRoatate.TranslateY += e.DeltaManipulation.Translation.Y;
            }
            System.Diagnostics.Debug.WriteLine("Images  Actual Width :- {0},Images  Actual Height :- {1}", Images.ActualWidth, Images.ActualHeight);
        }

Answer 3

You could use the DragStarted and DragCompleted events from Microsoft.Phone.Controls.GestureListener which is available in the Phone Toolkit.

Hope this link could help you: http://www.scottlogic.com/blog/2012/06/27/a-gesture-driven-windows-phone-todo-application-part-two-drag-re-ordering.html

Have a look at these too:

http://www.c-sharpcorner.com/uploadfile/9f8124/drag-guesture-in-windows-phone-7/

drag and drop in windows phone

Hope it helps!