Image/Photo gallery like built-in WP7

问题:

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

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

回答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.