UWP-使用“翻转视图"(Flip View)缩放图像(带捏和双击)

问题描述

我需要显示图像(使用翻转视图"控件)，并允许用户缩放图像(使用捏合缩放和双击)并拖动缩放的图像.

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.

我希望它与翻转视图"兼容(我的意思是它不应该越过拖动手势).

I would like it to be compatible with Flip View (I mean it shouldn't ovveride draging gesture).

实现此目标的最佳方法是什么?

What is the best way to achieve that?

推荐答案

我们可以使用 ScrollViewer 控件和 UIElement.DoubleTapped 事件，以允许用户缩放图像(捏合缩放和双击)并拖动缩放的图像.

We can use the ScrollViewer control and UIElement.DoubleTapped event to allow users to zoom the images (with pinch zoom and with double tap) and drag zoomed image.

为了通过捏缩放来缩放图像并拖动缩放的图像.我们可以将 c2> 放入ScrollViewer.

In order to zoom the image with pinch zoom and drag zoomed image. We can put the Image into the ScrollViewer.

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

We can add UIElement.DoubleTapped event in the ScrollViewer to zoom the image with double tap.

例如:

在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类代码:

And the MyImage Class code:

public class MyImage
{
    public MyImage()
    {
    }

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

    public string Path { get; set; }
}

这篇关于UWP-使用“翻转视图"(Flip View)缩放图像(带捏和双击)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！