यूडब्लूपी - फ्लिप व्यू

Question

के साथ ज़ूमिंग छवि (चुटकी ज़ूम और डबल टैप के साथ), मुझे छवियों को दिखाने की आवश्यकता है (फ्लिप व्यू कंट्रोल का उपयोग करके) और उपयोगकर्ताओं को उन्हें ज़ूम करने की अनुमति देता है (चुटकी ज़ूम और डबल टैप के साथ) और ज़ूम की गई छवि खींचें।

मैं इसे फ्लिप व्यू के साथ संगत होना चाहता हूं (मेरा मतलब है कि इसे ड्रैगिंग इशारा नहीं करना चाहिए)।

इसे प्राप्त करने का सबसे अच्छा तरीका क्या है?

Answer 1

मुझे छवियों को दिखाने की आवश्यकता है (फ्लिप व्यू कंट्रोल का उपयोग करके) और उपयोगकर्ताओं को उन्हें ज़ूम करने की अनुमति दें (चुटकी ज़ूम और डबल टैप के साथ) और ज़ूम की गई छवि खींचें।

हम उन छवियों (चुटकी ज़ूम के साथ और डबल नल के साथ) और खींचें जूम छवि ज़ूम करने के लिए अनुमति देने के लिए ScrollViewer नियंत्रण और UIElement.DoubleTapped घटना का उपयोग कर सकते हैं।

चुटकी ज़ूम के साथ छवि ज़ूम करने और ज़ूम की गई छवि खींचने के लिए। हम Image को ScrollViewer पर डाल सकते हैं।

हम UIElement.DoubleTapped ईवेंट को ScrollViewer में डबल टैप वाले छवि को ज़ूम करने के लिए जोड़ सकते हैं।

उदाहरण के लिए:

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> 

पीछे कोड में:

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 कक्षा कोड:

public class MyImage 
{ 
    public MyImage() 
    { 
    } 

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

    public string Path { get; set; } 
}