2016-05-22 27 views
7

I (Ayaklı Görünüm controll kullanarak) resmi gösterme ve kullanıcılar ve sürükle uzaklaştırdınız görüntüde (tutam zoom ve çift musluklu birlikte) bunları yakınlaştırmak için izin vermeniz gerekir Ayaklı Manzaralı, (tutam zoom ve çift musluklu).UWP - yakınlaştırma görüntü

Ben Ayaklı Görünüm (Ben jest draging ovveride gerektiği anlamına) ile uyumlu olmak istiyorum.

Bunu başarmak için en iyi yolu nedir?

cevap

7

Görüntülerin (Flip View kontrolünü kullanarak) gösterilmesi ve kullanıcıların bunları (yakınlaştırma ve çift dokunma ile) yakınlaştırmalarına ve yakınlaştırılmış görüntüyü sürüklemelerine izin vermem gerekiyor.

Kullanıcıların (tutam yakınlaştırma ve çift musluk ile) ve sürükleme uzaklaştırdınız görüntü görüntüleri yakınlaştırmak için izin ScrollViewer kontrol ve UIElement.DoubleTapped olayını kullanabilirsiniz. tutam zum ve sürükle görüntü yakınlaştırma amacıyla

görüntü uzaklaştırdınız. Image'u ScrollViewer'a koyabiliriz.

Biz çift musluklu görüntüyü yakınlaştırmak için ScrollViewer yılında UIElement.DoubleTapped bir etkinlik ekleyebilirsiniz. Örneğin

: XAML içinde

:

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

Ve MyImage Sınıf kodu: ardındaki kodunda

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

Maalesef

public class MyImage 
{ 
    public MyImage() 
    { 
    } 

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

    public string Path { get; set; } 
} 
+0

, bu sorunu neden . Galeriye gittiğimde, resimlerim zaten zumludur (Stretch = "Uniform" gibi çalışmadı). Bunu nasıl düzeltebilirim? – michalsol

+0

Lütfen "ScrollViewer" ın "VerticalScrollBarVisibility =" Otomatik "HorizontalScrollBarVisibility =" Otomatik "yi kaldırın. Cevabımı güncelledim. –

+0

Tamam, teşekkürler! Görüntüyü ortalamak için kontrolünün içine koymam gerekiyordu, ama şimdi çalışıyor! :) – michalsol