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

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

1 个答案: