15

How I can attach DragStarted DragDelta events to a grid in windows 8 / WinRT. I did the Same in windows phone with GestureService.GetGestureListener() method. I tried to replace the code with ManipulationStarted & ManipulationDelta events in windows 8. But the result is not same. In windows phone for a single drag it enters DragDelta events 2 or more times. But in the other hand in windows 8, in ManupulationDelta event it only fires once for the similar Drag operation.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Stephan Ronald
  • 1,395
  • 2
  • 14
  • 39

1 Answers1

10

Yeah, I think I know what you want.

Let's say you have some XAML like this:

<Grid Margin="50">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Rectangle Fill="Blue" x:Name="MyRect" />
</Grid>

You want to move that rectangle around the Grid by dragging it.

Just use this code:

public MainPage()
{
    this.InitializeComponent();
    MyRect.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY;
    MyRect.ManipulationDelta += Rectangle_ManipulationDelta;
    MyRect.ManipulationCompleted += Rectangle_ManipulationCompleted;
}

private void Rectangle_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var _Rectangle = sender as Windows.UI.Xaml.Shapes.Rectangle;
    var _Transform = (_Rectangle.RenderTransform = (_Rectangle.RenderTransform as TranslateTransform) ?? new TranslateTransform()) as TranslateTransform;
    _Transform.X += e.Delta.Translation.X;
    _Transform.Y += e.Delta.Translation.Y;
}

private void Rectangle_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
    var _Rectangle = sender as Windows.UI.Xaml.Shapes.Rectangle;
    _Rectangle.RenderTransform = null;

    var _Column = System.Convert.ToInt16(_Rectangle.GetValue(Grid.ColumnProperty));
    if (_Column <= 0 && e.Cumulative.Translation.X > _Rectangle.RenderSize.Width * .5)
        _Rectangle.SetValue(Grid.ColumnProperty, 1);
    else if (_Column == 1 && e.Cumulative.Translation.X < _Rectangle.RenderSize.Width * -.5)
        _Rectangle.SetValue(Grid.ColumnProperty, 0);

    var _Row = System.Convert.ToInt16(_Rectangle.GetValue(Grid.RowProperty));
    if (_Row <= 0 && e.Cumulative.Translation.Y > _Rectangle.RenderSize.Height * .5)
        _Rectangle.SetValue(Grid.RowProperty, 1);
    else if (_Row == 1 && e.Cumulative.Translation.Y < _Rectangle.RenderSize.Height * -.5)
        _Rectangle.SetValue(Grid.RowProperty, 0);
}

For this:

enter image description here

Hope I'm close! Best of luck!

Jerry Nixon
  • 31,313
  • 14
  • 117
  • 233
  • Thx for posting this awesome code. It helped me with my assignment a lot! However, I do not quite understand how this works and why are you oring two manipulation modes (x and y) in the main page constructor? Could you explain your code step by step? Thank you a lot! Am am really trying to understand what is going on. :) – Stefan Vasiljevic Nov 24 '13 at 21:32
  • Lovely piece of drag and drop outside of the GridView. Fun part is that it still keeps on moving when you slide and release, at least when you have set ManipulationMode = "All" :D – Totumus Maximus Feb 03 '14 at 10:34