UWP

Question

我需要显示图像（使用“翻转视图”控件）并允许用户缩放它们（使用双指缩放和双击）并拖动缩放后的图像。

我希望它与 Flip View 兼容（我的意思是它不应该超越拖动手势）。

实现该目标的最佳方法是什么？

Answer 1

I need to show images (using Flip View controll) and allow users to zoom them (with pinch zoom and with double tap) and drag zoomed image.

我们可以使用 ScrollViewer control and UIElement.DoubleTapped 事件来允许用户缩放图像（使用双指缩放和双击）并拖动缩放后的图像。

为了使用捏拉缩放和拖动缩放图像来缩放图像。我们可以把 Image 放到 ScrollViewer 中。

我们可以在 ScrollViewer 中添加 UIElement.DoubleTapped 事件来双击缩放图像。

例如：

在XAML中：

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <FlipView Name="MyFlipView">
            <FlipView.ItemTemplate>
                <DataTemplate x:DataType="local:MyImage">
                    <ScrollViewer  MinZoomFactor="1" DoubleTapped="scrollViewer_DoubleTapped"
                  ZoomMode="Enabled">
                        <Image Source="{Binding Path}" />
                    </ScrollViewer>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>

在后面的代码中：

public ObservableCollection<MyImage> MyImages;

public MainPage()
{
    this.InitializeComponent();
    MyImages = new ObservableCollection<MyImage>();
    MyImages.Add(new MyImage("ms-appx:///Assets/cliff.jpg"));
    MyImages.Add(new MyImage("ms-appx:///Assets/grapes.jpg"));
    MyImages.Add(new MyImage("ms-appx:///Assets/rainer.jpg"));
    MyImages.Add(new MyImage("ms-appx:///Assets/sunset.jpg"));
    MyImages.Add(new MyImage("ms-appx:///Assets/valley.jpg"));
    MyFlipView.ItemsSource = MyImages;
}

private async void scrollViewer_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
    var scrollViewer = sender as ScrollViewer;
    var doubleTapPoint = e.GetPosition(scrollViewer);

    if (scrollViewer.ZoomFactor != 1)
    {
        scrollViewer.ZoomToFactor(1);
    }
    else if (scrollViewer.ZoomFactor == 1)
    {
        scrollViewer.ZoomToFactor(2);

        var dispatcher = Window.Current.CoreWindow.Dispatcher;
        await dispatcher.RunAsync(CoreDispatcherPriority.High, () =>
      {
          scrollViewer.ScrollToHorizontalOffset(doubleTapPoint.X);
          scrollViewer.ScrollToVerticalOffset(doubleTapPoint.Y);
      });
    }
}

和 MyImage Class 代码：

public class MyImage
{
    public MyImage()
    {
    }

    public MyImage(string uri)
    {
        this.Path = uri;
    }

    public string Path { get; set; }
}

UWP - 缩放图像（捏缩放和双击），翻转视图

UWP - zooming image (with pinch zoom and double tap), with Flip View

c#

xaml

image

flipview