Search code examples
c#xamluwpuwp-xamlswipe-gesture

Horizontal swipe gesture on UWP


is there any way to get swipe gesture same as windows phone 8 with wptoolkit. Because wptoolkit nuget package is not available for uwp, so i am unable to get similar swipe gesture on UWP In windows Phone 8 with the help of WPtoolkit nugetget package i placed this

<toolkit:GestureService.GestureListener>
         <toolkit:GestureListener Flick="OnSwipe"/>
</toolkit:GestureService.GestureListener>

over text block, so i can swipe left to right or right to left over textbox1. and swipe gesture help me to implement this

private static int i;
private void OnSwipe(object sender, FlickGestureEventArgs e)
    {
        if (e.HorizontalVelocity < 0)
        {
              i++;
              txtBox1.Text = i.ToString();             
        }

        if (e.HorizontalVelocity > 0)
        {
             i--;
             txtBox1.Text = i.ToString();
        }
    }

i tried Manupulation method with scrollViewer on uwp but it continuously increase the value untill it scroll viewer stopped

and this is codes

    private static int i;
    private Point initialpoint;
    private void scrollview_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
    {
        initialpoint = e.Position;
    }

    private void scrollview_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        if (e.IsInertial)
        {
            Point currentpoint = e.Position;
            if (currentpoint.X - initialpoint.X >= 2)
            {
                i++;
                txtBox1.Text = i.ToString();
            }

            if (currentpoint.Y - initialpoint.Y >= 2)
            {
                i--;
                txtBox1.Text = i.ToString();
            }
        }
    }

Any other way to implement same functionality.


Solution

  • Actually you don't need to handle ManipulationStarted in this case and you don't need the initialPoint property. Assuming you have already defined your ScrollViewer's ManipulationMode to the following

    ManipulationMode="TranslateX,TranslateInertia,System"
    

    Then you simply use e.Cumulative.Translation.X to tell how long you have swiped in total

    private void scrollview_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
    {
        if (e.IsInertial)
        {
            var swipedDistance = e.Cumulative.Translation.X;
    
            if (Math.Abs(swipedDistance) <= 2) return;
    
            if (swipedDistance > 0)
            {
                i++;
            }
            else
            {
                i--;
            }
    
            txtBox1.Text = i.ToString();
        }
    }
    

    Update

    Now that I understand your question better, I think you should handle gesture manipulation on the TextBox itself. If you want instant feedback, simply subscribe to the ManipulationDelta event and create a flag to only run the swipe logic once per touch.

    private bool _isSwiped;
    private void txtBox1_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        if (e.IsInertial && !_isSwiped)
        {
            var swipedDistance = e.Cumulative.Translation.X;
    
            if (Math.Abs(swipedDistance) <= 2) return;
    
            if (swipedDistance > 0)
            {
                i++;
            }
            else
            {
                i--;
            }
    
            txtBox1.Text = i.ToString();
    
            _isSwiped = true;
        }
    }
    
    private void txtBox1_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
    {
        _isSwiped = false;
    }
    

    Make sure you move all the handlers and set the ManipulationMode onto the TextBox.

    <TextBox x:Name="txtBox1"
             ManipulationMode="TranslateX,TranslateInertia,System" 
             ManipulationDelta="txtBox1_ManipulationDelta" 
             ManipulationCompleted="txtBox1_ManipulationCompleted" />