UWP - 使用翻转视图缩放图像(使用捏缩放和双击)

Question

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

我希望它与Flip View兼容(我的意思是它不应该使用拖动手势).

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

Answer 1

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

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

使用捏拉缩放和拖动缩放图像缩放图像.我们可以投入Image到ScrollViewer.

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

例如:

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