swipe images in wp7

Question

I create swiping horizontally would move between the next and previous items.I have three image but the problem is when i flick one time it directly go to third image so second images is remaining.

Reffer my C# code as bellow:

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


 private void OnFlick(object sender, FlickGestureEventArgs e)
        {
            try
            {

                    double ScreenWidth = ScrollGrid.Width;
                    // User flicked towards left
                    if (e.HorizontalVelocity < 0)
                    {

                        //Load Next Page                
                        double nextPage = (ScrollActivePage + 1) * ScreenWidth;
                        if (nextPage - ScrollGrid.ScrollableWidth <= ScreenWidth)
                        {
                            ScrollGrid.ScrollToHorizontalOffset(nextPage);
                            ScrollActivePage++;
                        }
                        else
                        {
                        ScrollGrid.ScrollToHorizontalOffset(ScrollGrid.ScrollableWidth);

                         }     
                    }


                    // User flicked towards right
                    if (e.HorizontalVelocity > 0)
                    {
                        //Load Previous Page;                
                        ScrollActivePage = (ScrollActivePage > 0) ? ScrollActivePage - 1 : 0;
                        ScrollGrid.ScrollToHorizontalOffset(ScrollActivePage * ScrollGrid.Width);


                    }


                }

Answer 1

I am assuming that the images you show are all of equal width and I would suggest you a rather simple but different approach for your problem.

First define your Grid like this

<Grid x:Name="ScrollGrid" Width="1500">
    <Grid.RenderTransform>
        <TranslateTransform x:Name="gridTransform"/>
    </Grid.RenderTransform>
    <!-- grid components or images -->
</Grid>

And then use the following two methods in the OnFlick() method in C# code:

private void OnFlick(object sender, FlickGestureEventArgs e)
{
        try
        {
            // User flicked towards left
            if (e.HorizontalVelocity < 0)
            {
                //Load Next Page
                swipeLeft();
            }

            // User flicked towards right
            if (e.HorizontalVelocity > 0)
            {
                //Load Previous Page;                
                swipeRight();
            }
}

private void swipeLeft()
    {
        //Animate the Grid to the left side
        DoubleAnimation da = new DoubleAnimation();
        da.From = gridTransform.X;
        da.To = gridTransform.X - 360; //You can customize this 360 to your image width by passing it as an argument to swipeLeft method
        da.Duration = new Duration(TimeSpan.FromSeconds(0.5));
        Storyboard.SetTarget(da, gridTransform);
        Storyboard.SetTargetProperty(da, new PropertyPath(TranslateTransform.XProperty));

        Storyboard sb1 = new Storyboard();
        sb1.Children.Add(da);
        sb1.Begin();
    }

    private void swipeRight()
    {
        //Animate the Grid to the right side
        DoubleAnimation da = new DoubleAnimation();
        da.From = gridTransform.X;
        da.To = gridTransform.X + 360;
        da.Duration = new Duration(TimeSpan.FromSeconds(0.5));
        Storyboard.SetTarget(da, gridTransform);
        Storyboard.SetTargetProperty(da, new PropertyPath(TranslateTransform.XProperty));

        Storyboard sb1 = new Storyboard();
        sb1.Children.Add(da);
        sb1.Begin();
    }

I wrote these methods for my project, may need some customization for your requirement. But worth a try and easily modifiable code.

//Also make sure any parent of the ScrollGrid is not overriding or limiting the width of the ScrollGrid