c# - UWP - 缩放图像(捏缩放和双击)，翻转 View

Question

我需要显示图像(使用 Flip View 控件)并允许用户缩放它们(使用双指缩放和双击)并拖动缩放后的图像。

我希望它与 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控制和 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 类代码:

public class MyImage
{
    public MyImage()
    {
    }

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

    public string Path { get; set; }
}