Search code examples
windows-8windows-store-appswinrt-xaml

Implementing DragStarted DragDelta events in windows 8 / WinRT


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.


Solution

  • 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!