UWP - 带有捏合缩放和双击缩放的缩放图像，以及Flip View

Question

UWP - 带有捏合缩放和双击缩放的缩放图像，以及Flip View

c#imagexamluwpflipview

8

我需要展示图片（使用Flip View控件），并允许用户通过捏放缩放和双击缩放以及拖动缩放后的图像。

同时，我希望它与Flip View兼容（也就是说不应该覆盖拖动手势）。

那么，怎样才是实现这个功能最好的方法？

- michalsol

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jayden · Accepted Answer

我需要展示图片（使用Flip View控件），允许用户使用捏合缩放和双击缩放来放大图片并拖动缩放后的图片。

我们可以使用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; }
}