Search code examples
c#windows-10draguwpwindows-10-mobile

How do I set up dragging by touch in Windows Universal Apps on Windows 10 Phone?

I have successfully set my Grid up for dragging with a mouse with 

<Grid x:Name="SourceGrid13"
              CanDrag="True"
              DragStarting="SourceGrid_DragStarting"
              Margin="0,20,0,0">

However, this is not draggable on a Windows Phone (Windows 10) by touching. How do I set that up?

Also I assume once I get the Grid dragging, the drop sequence will be the same as with a mouse? This is my drop code:

 <ListView HorizontalAlignment="Center" AllowDrop="True"
                 Drop="Image_Drop"
                 DragEnter="TargetImage_DragEnter"
                 DragLeave="TargetImage_DragLeave"
                 CanDragItems="True"
                 IsSwipeEnabled="True"
                 MinHeight="124"
                 Grid.Row="4"
                 Grid.Column="1">
                <Image Height="224"/>
 </ListView>

Also on tablet, it is hard to, but it will drag by touch. Do I need to enable it on the phone somewhere?

I'm now thinking touch drag may be disabled until a future update or the actual release on Windows 10 on Windows Phone.

UPDATE Based on Answers:

I set my listView's CanDragItems and IsSwipeEnabled to True, but this did not change anything. I applied the manipulation rectangle with some strange results. On Phone, I am able to drag the rectangle, but when I bring it into my ListViews, it disappears. Shown by these pictures:

Full Rect:

enter image description here

Dragged it Down out of Framework element- It is dragged behind the listView.

enter image description here

On Desktop, The rectangle is dragged in front of the listView, but after being dragged out of the original Framework Element, it is undraggable.

enter image description here

Solution

  • All needed things for any touch screen manipulations are here from the box. There is simple example - Rectangle on the Canvas:

    <Canvas Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Width="50" Height="50" Fill="Blue" RenderTransformOrigin="0.5,0.5"
        ManipulationDelta="Rectangle_ManipulationDelta" ManipulationMode="All">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="dragTranslation" />
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>

    A minimal handling code is:

    private void Rectangle_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) {
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

    It enough to drag any UIElement on Canvas on touch screens AND on desktop with mouse. Dragging of Grid also works.