WP7 dynamic pivot

Question

I'm having trouble implementing a dynamic pivot control. What I would like to do, is create an image gallery using the pivot, where you could change the image by swiping. This works natively with the pivot control by binding it's itemsource on my observable collection to display one image on each pivotitem. The thing is that this solution takes a lot of memory when my gallery contains more than 10 pictures, as it creates an equal number of pivotitems.

What I tried is initializing my collection with 3 items, the currently displayed one, the previous and the next one, and when the user swipes, I updated my list. I tried this using the "SelectionChanged" event and also with the gesture listener.. without success so far. Has anyone ever tried to do this? And if yes, how can I implement it?

Answer 1

I do something similar, but don't use a Pivot control. Download the Silverlight toolkit (http://silverlight.codeplex.com/) and use a GestureListener to catch the swipe action:

<toolkit:GestureService.GestureListener>
        <toolkit:GestureListener DragCompleted="OnDrag"/>
</toolkit:GestureService.GestureListener>

Then in code, you have an event handler that catches the swipe event, and updates the image accordingly. Here is the event handler that I use to change my page:

private void OnDrag(object sender, DragCompletedGestureEventArgs e)
{
    if (e.Direction == System.Windows.Controls.Orientation.Horizontal)
    {
        if (e.HorizontalChange < 0)
        {
            TurnPagesForward(1);
        }
        else
        {
            TurnPagesBackward(1);
        }
    }
}

Answer 2

If you update the items in your list your binding will be lost, so this will probably not work very well.

• What might work is the following (but I have not tested it):
• Start with an initial collection with five items.
• Make sure you display the third item in the list so that the visible item is in the middle of the list.
• When changing the visible page the SelectionChanged event is raised.
• If you move to the right the selected index is changed to the fourth element. In this case you remove the first element in the list and add a new fifth element.
• If you move to the left you do the opposite and remove the last element in the list.

This should ensure that you always can move back and forth while not removing or adding any visible items.

I am not sure if this will work, but it is worth a try. :-)

Answer 3

Don't do this. Lots of people have tried and it doesn't scale to large numbers of images.

Although it would be really nice if it was possible to use the pivot control to create a simple image navigation control it just isn't practical. You'll need to go the more complicated route of doing this yourself with a different method. (Lots of people have tried different ways. Go with what's best for your needs/experience/preferences.)