UWP - Zoomen Bild (mit Pinch Zoom und Doppeltipp), mit Flip View

Question

Ich muss Bilder zeigen (mit Flip View-Steuerung) und erlauben Benutzern, sie zu Zoomen (mit Pinch-Zoom und mit Doppeltippen) und gezoomten Bild ziehen.

Ich möchte, dass es mit Flip View kompatibel ist (ich meine es sollte nicht Dragging Geste Ovved).

Was ist der beste Weg, um das zu erreichen?

Answer 1

Ich muss Bilder anzeigen (mit Flip View-Steuerelement) und erlauben Benutzern, sie zu Zoomen (mit Pinch-Zoom und mit Doppeltippen) und gezoomten Bild ziehen.

Wir verwenden die ScrollViewer Kontrolle und UIElement.DoubleTapped Ereignis Benutzer zu ermöglichen, die Bilder (mit Pinch-Zoom und mit Doppel-Tippen) und ziehen gezoomten Bild zu zoomen.

Um das Bild mit Pinch Zoom zu zoomen und gezoomtes Bild zu ziehen. Wir können die in die ScrollViewer setzen.

Wir können UIElement.DoubleTapped Ereignis in der ScrollViewer hinzufügen, um das Bild mit Doppeltipp zu zoomen.

Zum Beispiel:

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

In Code hinter:

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

Und der MyImage Klasse Code:

public class MyImage 
{ 
    public MyImage() 
    { 
    } 

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

    public string Path { get; set; } 
}