UWP - powiększanie obrazu (z powiększaniem palcami i dwukrotnym dotknięciem), z widokiem Flip

Question

Potrzebuję pokazywać obrazy (używając kontrolki Flip View) i zezwalać użytkownikom na ich powiększanie (powiększeniem palcem i dwukrotnym dotknięciem) i przeciąganie powiększonego obrazu.

Chciałbym, aby był zgodny z widokiem Flip (mam na myśli to, że nie powinien on ominąć gestu draging).

Jaki jest najlepszy sposób, aby to osiągnąć?

Answer 1

Muszę wyświetlać obrazy (używając kontrolki Flip View) i zezwalać użytkownikom na ich powiększanie (powiększeniem palcem i dwukrotnym dotknięciem) i przeciągać powiększony obraz.

Możemy użyć kontrolę ScrollViewer i UIElement.DoubleTapped zdarzenie, aby umożliwić użytkownikom, aby powiększyć obrazy (z pinch zoom i dwukrotnie) i przeciągnij powiększony obraz.

Aby powiększyć obraz za pomocą powiększenia palcami i przeciągnij powiększony obraz. Możemy umieścić Image w ScrollViewer.

Możemy dodać UIElement.DoubleTapped zdarzenie w ScrollViewer, aby powiększyć obraz dwukrotnie dotknięciem.

Na przykład:

w 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> 

W kodzie za:

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

a kod MyImage Class:

public class MyImage 
{ 
    public MyImage() 
    { 
    } 

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

    public string Path { get; set; } 
}