Allow the User of App to change the position of a Grid


  • Hi

    I was wondering if it was possible to do this in a Windows 8 RT app (C#). I want to have several small 'applets' inside the Windows 8 App. But I want to allow the user the freedom to move these applets around using their mouse or finger.

    Is it possible to have this in a Windows 8 RT app? And how would I go about accomplishing this?

    Friday, June 13, 2014 11:05 AM


All replies

  • Yes, you can handle user's gesture actions and translate the position of the applets using "TranslateTransform". Take a look at XAML two-dimensional transforms sample.

    - Ram
    If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".

    Friday, June 13, 2014 1:47 PM
  • See http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465387.aspx#using_manipulation_events for documentation & code snippets on handling gestures and manipulations. The sample is to manipulate a Rectangle, but you can point that at a grid. For a full sample see http://go.microsoft.com/fwlink/p/?linkid=226855
    • Proposed as answer by Dave SmitsMVP Friday, June 13, 2014 2:22 PM
    • Marked as answer by DreyerSmit Friday, June 13, 2014 3:04 PM
    Friday, June 13, 2014 2:12 PM
  • Hi

    Thanks VERY much. It works flawlessly. I will attach the code for general information.

    XAML to add one or more rectangles:

    <Rectangle Name="TestRectangle"
                    Width="200" Height="200" Fill="Blue" 
    <Rectangle x:Name="TestRectangle_Copy"
            	Width="200" Height="200" Fill="Blue" 

    C# Code to make the rectangles move whenever the user clicks and drag:

    // Constructor
            public MainPage()
                // Add handler for the ManipulationDelta event
                TestRectangle.ManipulationDelta += Drag_ManipulationDelta1;
                dragTranslation1 = new TranslateTransform();
                TestRectangle.RenderTransform = this.dragTranslation1;
                TestRectangle_Copy.ManipulationDelta += Drag_ManipulationDelta2;
                dragTranslation2 = new TranslateTransform();
                TestRectangle_Copy.RenderTransform = this.dragTranslation2;
            void Drag_ManipulationDelta2(object sender, ManipulationDeltaRoutedEventArgs e)
                dragTranslation2.X += e.Delta.Translation.X;
                dragTranslation2.Y += e.Delta.Translation.Y;
            void Drag_ManipulationDelta1(object sender, ManipulationDeltaRoutedEventArgs e)
                // Move the rectangle.
                dragTranslation1.X += e.Delta.Translation.X;
                dragTranslation1.Y += e.Delta.Translation.Y;

    Friday, June 13, 2014 3:03 PM
  • Hi

    Another question:

    How do you enable the borders of the said app to become 'fences' where the rectangle cannot pass through?

    Friday, June 13, 2014 3:10 PM
  • Friday, June 13, 2014 3:24 PM