UWP - 私は（フリップビューcontrollを使用して）画像を表示し、ユーザーが（ピンチズームで、ダブルタップで）それらをズームしてズーム画像をドラッグできるようにする必要がフリップビュー

Question

、（ピンチズーム、ダブルタップでの）画像をズーム。

私はそれがフリップビュー（私はそれがジェスチャーをdraging ovverideべきではありません意味）と互換性があるようにしたいと思います。

それを達成するための最良の方法は何ですか？

Answer 1

画像を表示するには（フリップビューコントロールを使用）、ユーザーが（ピンチズームとダブルタップで）ズームしてズームした画像をドラッグする必要があります。

我々は、ユーザーが（ピンチズームで、ダブルタップで）画像をズームすると、ズーム画像をドラッグできるようにするためにScrollViewer制御とUIElement.DoubleTappedイベントを使用することができます。ピンチズームで画像を拡大し、ズーム画像をドラッグするために

。我々はScrollViewerにImageを入れることができます。

私たちは、ダブルタップで画像をズームするScrollViewerでUIElement.DoubleTappedイベントを追加することができます。例えば

：XAMLで

：

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クラスコード：：背後にあるコードで

<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 class MyImage 
{ 
    public MyImage() 
    { 
    } 

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

    public string Path { get; set; } 
}