Making a control to slide images one at a time along a collection, Windows Phone 7

This might seem like an easy answer, but I am in need of a bit of help getting my head around this.

I have a listbox displaying RSS items from my website, bound to a list. When a user clicks on a specific item, it will take them to a new page where only that picture is shown.

I want to be able to allow the user to swipe to the left or the right, and have it load the next or previous image.

I have the toolkit with the gesture listener attached, and I have reviewed the code from this previously asked question (code below)

<Canvas>
<Image x:Name="imgImage" Source="{Binding ...}" Width="..." Height="...">
    <Image.RenderTransform>
        <CompositeTransform x:Name="imgImageTranslate" />
    </Image.RenderTransform>
</Image>

private void GestureListener_DragCompleted(object sender, DragCompletedGestureEventArgs e)
{
    if (e.Direction == System.Windows.Controls.Orientation.Horizontal)
    {
        var abs = Math.Abs(PANEL_DRAG_HORIZONTAL);
        if (abs > 75)
        {
            if (PANEL_DRAG_HORIZONTAL > 0) // MovePrevious;
            else //MoveNext();

            e.Handled = true;
        }
    }
}


double PANEL_DRAG_HORIZONTAL = 0;
private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
{
        if (e.Direction == System.Windows.Controls.Orientation.Horizontal)
        {
            PANEL_DRAG_HORIZONTAL += e.HorizontalChange;

            var baseLeft = -imgImage.Width / 2;
            if (PANEL_DRAG_HORIZONTAL > 75) imgImageTranslate.OffsetX = baseLeft + PANEL_DRAG_HORIZONTAL;
            else if (PANEL_DRAG_HORIZONTAL < -75) imgImageTranslate.OffsetX = baseLeft + PANEL_DRAG_HORIZONTAL;
            else imgImageTranslate.OffsetX = baseLeft;
        }
    }
}

private void GestureListener_DragStarted(object sender, DragStartedGestureEventArgs e)
{
    PANEL_DRAG_HORIZONTAL = 0;
}

The problem I am having is how would I be able to create the MoveNext() and MovePrevious() function calls with the databound list.

The code I have now takes the root visual from the SelectedItem RSS listbox, which is the URL for the image on the web, and passes that as the on the next page.

But how would I be able to reference the next picture to the left or right (along the list arr开发者_如何学Pythonay)?

you could "cheat" and do this with a pivot based page, like others have done to create an "infinitely scrolling" pivot page.

create a pivot with no header, and no margins to show your image. let the pivot handle all the swiping. add a listener to watch for pivot item changes

but only create like 5 pivot items, and the selected item changes, cycle from your list/array instead.

There's a lot more detail here: Endless Pivot Control