Detection of swipe direction in pivot

Question

I work in windows phone 8 and I have two pivot item in a Pivot control. How to detect if i swiped to the right or to the left ?

Answer 1

Step1:Add Microsoft.Phone.Controls.Toolkit in your solution

Step2:Add Microsoft.Phone.Controls.Toolkit reference in xaml like this:

xmlns:tolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Step3:Create gesture listener flick event like this:

<Grid x:Name="LayoutRoot" Background="Transparent">
        <tolkit:GestureService.GestureListener>
            <tolkit:GestureListener Flick="GestureListener_Flick"></tolkit:GestureListener>
        </tolkit:GestureService.GestureListener>
        <!--Pivot Control-->
        <controls:Pivot Title="MY APPLICATION">
            <!--Pivot item one-->
            <controls:PivotItem Header="item1">
                <Grid/>
            </controls:PivotItem>

            <!--Pivot item two-->
            <controls:PivotItem Header="item2">
                <Grid/>
            </controls:PivotItem>
        </controls:Pivot>
    </Grid>

Step 4:In your cs page add this code:

 private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
        {
            if (e.Direction.ToString() == "Horizontal") //Left or right
            {
                if (e.HorizontalVelocity > 0) //Right
                {

                }
                else //Left
                {

                }
            }
        }

you could download toolkit from here

Answer 2

For simple case (if you have more that 2 pivot items) you can use SelectionChanged event of your Pivot - provide variable in which you will save last SelectedIndex and after the change check if it was right or left:

myPivot.SelectionChanged+=myPivot_SelectionChanged; // in your MainPage()

private int lastSelected = 0;

private void myPivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
   if ((lastSelected + 1 == myPivot.SelectedIndex) || 
       (myPivot.SelectedIndex == 0 && lastSelected == myPivot.Items.Count - 1))
   {
     // moved right
   }
   else 
   {  
     // moved left 
   }

   lastSelected = myPivot.SelectedIndex;
}

For simple cases it should work, for more complicated you can use TouchPanel or other solutions.

Answer 3

Instead of using the Items.Count, you could the EventArgs paramater e to determine the last Index within the Pivot Items Collection and the selected index by using the following:

        private void pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // Casting e.AddedItems and e.RemovedItems to the PivotItem type to get 
        // the Selected Pivot and the Last Selected Pivot

        var selectedPivot = (PivotItem) e.AddedItems[0];
        var lastPivot = (PivotItem) e.RemovedItems[0];

        // Getting indices using the ItemCollection of the pivot

        int selectedIndex = pivot.Items.IndexOf(selectedPivot);
        int previousIndex = pivot.Items.IndexOf(lastPivot);

        if (selectedIndex < previousIndex)
        {
            // user swiped to the right
        }
        else
        {
            // user swiped to the left
        }

    }

This should help you even if you have only two pivots.

Answer 4

Nice work by all, but what will we do when we click on a button to navigate forward and backword the PivotItems.

So just put the following code in Two Buttons i.e. Forward and Backward. You can easily achieve this via setting the Pivot.SelectedIndex

for forward

    if(pivotName.SelectedIndex < (pivotName.Items.Count - 1))
    pivotName.SelectedIndex++;
    else
    pivotName.SelectedIndex = 0;

for backward

    if(pivotName.S electedIndex > 0)
    pivotName.SelectedIndex--;
    else
    pivotName.SelectedIndex = pivotName.Items.Count - 1;