UWP - zoom immagine (con zoom a pizzico e doppio tocco), con Flip View

Question

Ho bisogno di mostrare le immagini (usando il controllo Flip View) e consentire agli utenti di ingrandirle (con zoom pizzico e con doppio tocco) e trascinare l'immagine ingrandita.

Mi piacerebbe che fosse compatibile con Flip View (intendo dire che non dovrebbe fare il gesto di dropping ovveride).

Qual è il modo migliore per farlo?

Answer 1

Ho bisogno di mostrare le immagini (usando il controllo Flip View) e consentire agli utenti di ingrandirle (con zoom e pizzicare con doppio tocco) e trascinare l'immagine ingrandita.

Possiamo usare il controllo ScrollViewer e UIElement.DoubleTapped evento per consentire agli utenti di ingrandire le immagini (con pinch zoom e con doppio tap) e l'immagine ingrandita di trascinamento.

Per ingrandire l'immagine con lo zoom pizzico e trascinare l'immagine ingrandita. Possiamo inserire lo Image nello ScrollViewer.

È possibile aggiungere l'evento UIElement.DoubleTapped nello ScrollViewer per ingrandire l'immagine con un doppio tocco.

Ad esempio:

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> 

Nel codice dietro:

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

E il codice MyImage Classe:

public class MyImage 
{ 
    public MyImage() 
    { 
    } 

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

    public string Path { get; set; } 
}