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.
Asked
Active
Viewed 1,383 times
15

Cœur
- 37,241
- 25
- 195
- 267

Stephan Ronald
- 1,395
- 2
- 14
- 39
-
Did you set `IsManipulationEnabled = true` on your grid? – Roger Rowland May 21 '13 at 10:01
-
I didn't find any such property to grid. I set the property ManipulationMode="All" – Stephan Ronald May 21 '13 at 10:12
-
Sorry - I got confused with the WPF grid - the `Windows.UI.Xaml.Controls.Grid` has manipulation enabled by `ManipulationMode` as you said. – Roger Rowland May 21 '13 at 11:26
-
ManipulationDelta should fire multiple times. Can you post relevant code from your project? – Murkaeus May 21 '13 at 20:03
1 Answers
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:
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