像内置 WP7 一样的图像/照片库 [英] Image/Photo gallery like built-in WP7

问题描述

我正在寻找适用于 Windows Phone 7 的照片库.外观和工作方式与内置照片查看器相同的东西(滑动照片使用轻弹动作，使用捏合、拖动调整大小).当您轻弹图像时，您可以看到它滑动到下一张图像...并将列表与该图像对齐.

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?

我尝试过的事情:

• 枢轴查看器(不起作用，因为它干扰了图像的拖动功能，无法禁用枢轴查看器触摸)

• 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)

提前致谢

推荐答案

实际上，我已经在我的一个应用程序中完全实现了您所说的，

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

您需要使用 Silverlight Control Toolkit 的手势侦听器来捕获触摸拖动和捏合.

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

为您的图像定义一个 CompositeTransformation 并设置它的比例(捏合时)和偏移量(拖动时).

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)

希望能帮到你/

滑块效果的拖动处理程序伪代码:

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

这篇关于像内置 WP7 一样的图像/照片库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！