Image/Photo gallery like built-in WP7

Question

I\'m looking for a photo gallery for Windows Phone 7. Something that looks and works the same as the built-in photo viewer (slide photo\'s using a flick action, resize using

Answer 1

Actually I've implemented exactly what you are saying in one of my apps,

You need to use Silverlight Control TOolkit's gesture listener to capture Drag and Pinch from touch.

define a CompositeTransformation for your image and set it's scale (on pinch) and Offset (in drag).

Obviously when the image is not zoom, drag can trigger going to next image.

To make it feel smoother, you may want to define a storyboard on your page resources to use (instead of just settings Offset)

I hope it can help/

---

Drag handlers pseudo code for slider effect:

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

    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;
    }

Answer 2

What about using a ScrollViewer with horizontal orientation? Of course, you will have to manually detect user actions and implement the proper response (with a couple of properly set Storyboards).

Even a better approach would be writing your own custom control that will view images. A good place to start is this - a CoverFlow control in Silverlight. Once you get the idea how you can bind your image collection to a custom control, all you need is handle user gestures on the currently selected item.