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 pinch, drag). When you flick the image you can see it sliding to the next image...and snaps the list to that image.

I already built the resize and drag functionality for the images. I just can't figure out how to create the actual photo slider.

Can anyone point me into the right direction?

Things i've tried:

Pivot Viewer (doesn't work because it interferes with the drag functions of the image, haven't been able to disable the pivot viewer touch)
Plain listbox (can't find how to snap to the current image)

Thanks in advance

Mo Valipour · Answer 1 · 2011-06-24T23:19:08.447

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

in your solution do I use a scrollviewer with an itemscontrol in it? and a storyboard for sliding the images inside this scrollviewer? or do i need another container control for this? Im pretty new to this side of silverlight (been doing code-behind stuf, manipulating data mostly :)) — Floris Robbemont, Jun 24 '11 at 22:50
Actually I'm using a simple container ( as far as I remember :D). But beware i'm showing only one image at a time on UI (which makes it faster), so sliding is not really sliding. it is (animate image to far left, show next image, animate from far right to center) — Mo Valipour, Jun 24 '11 at 22:54
i've tried some things... but can't get it to work. Is it possible for you to post some sample code? just to get me started :) — Floris Robbemont, Jun 24 '11 at 23:09
Please see my code above. note that 75 is the margin I maintain to avoid very sensitive slider. P.S. your animation will go into MoveNext() and MovePrevious(). — Mo Valipour, Jun 24 '11 at 23:23

Den · Answer 2 · 2011-06-24T22:50:59.610

0

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.

edited Jun 24 '11 at 22:50

answered Jun 24 '11 at 22:27

Den

16,686
4
47
87

Will the scrollviewer have the ability to 'snap' to the next image when you flick it? wow...no new lines in this box :) ... can you post an example of your suggestion? – Floris Robbemont Jun 24 '11 at 22:43
View my edited answer for another idea. There is no snap in the ScrollViewer. – Den Jun 24 '11 at 22:51

Image/Photo gallery like built-in WP7

2 Answers2

Linked