WP7'de kamera uygulaması stili fotoğraf şeridi nasıl uygulanır?

Question

Kamera uygulamasında fotoğraf şeridine çok benzer bir efekt yaratan bir dizi sorunla karşılaşıyorum. Tüm yapmak istediğim, her biri ekranla aynı boyutlara sahip olan (dikey veya yatay) bir dizi ızgara görüntülemektir. Zaten, en boy oranını korumak için hacky ve create dependency properties that the grids width and height properties bind to bir şey yapmak zorunda kaldı.

Ve bu iyi çalışıyor. Ama benim stripim için bir StackPanel oluşturduğumda ve navigasyonumu uygularken (veya z-index dönüşümü ile geriye zum yaptıktan sonra), StackPanel'in ekran boyutlarından daha büyük görüntülenemeyeceğini görüyorum (sadece bir kılavuzun boyutuna kırpılmış) . Bu sorunu açıklayan bir yazı buldum sanıyordum ama şimdi bulamıyorum - lütfen düşündüğüm hangi gönderiyi biliyorsanız veya bu sınırlama hakkında daha fazla bilgi sahibiseniz lütfen yayınlayın.

Bulduğum tek çözüm ScrollViewer kullanmaktır, ki bu kesinlikle istediğim davranış değildir, ancak StackPanel'in ekrandan daha geniş olmasını sağlar.

Benim asıl sorun ScrollViewer davranışı ile ilgilidir - çünkü serbestçe kaydırmak yerine ızgaradan ızgaraya (fotoğraf şeridinin yaptığı gibi) atlama yapmam gerekiyor ve HorizontalOffset'in animatable özelliği olmadığını söyleyebilirim. ScrollToHorizontalOffset'i her 15 milisaniyede çağırarak, temel olarak kendi hareketlendirme efektimi manuel olarak uygulayarak onu canlandırabilirim. Bu büyük bir kesmek gibi görünüyor ve davranış çok glitchy (ya da her kaydırma eyleminin sonunda her zaman beklemeden ManipulationCompleted olayı almıyorum - veya ScrollViewer inertia fiziği yerleşik benim etkisi ile müdahale ediyor).

Çalıştığım sorunlar için daha iyi çözümler veya Silverlight'taki Fotoğraf Makinesi şeridinin deneyimini elde etmek için tamamen farklı bir yol bilen var mı?

Pivot denetimini kullanmayı düşündüm, ancak tam olarak istediğim şey değil (eğer her bir öğe bir şeritte eklenecek gibi görünmek yerine, bir sonraki öğeden önce tümüyle animasyonlu hale getirilseydi Bunu başarmak için daha az kısıtlayıcı yollar olmalıdır. Daha da önemlisi, şerit dinamik olarak yapabileceğim birçok etkiden sadece biri. Alternatif olarak CoolIris benzeri bir 3d eğim veya bir FlipPad stili sayfa dönüşü yapmak isterim. Mevcut kurulumumu güzelce halledebilirsem, bu diğer efektleri (uygulanabilir geçişler) uygulamak kolay olurdu. Pivot gibi bir kontrole bağlı olmak bana bu vizyona daha fazla yaklaşmayacak. Sadece kullanıcı ve manuel konum onun doğrudan manipüle görmesini ScrollViewer önlemek eğer

<Grid x:Name="LayoutRoot" Background="Transparent" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" Width="{Binding RealWidth, ElementName=phoneApplicationPage}" HorizontalAlignment="Left" VerticalAlignment="Top"> 
     <ScrollViewer x:Name="SlideScroller" VerticalScrollBarVisibility="Disabled" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" Margin="0,0,0,-31" ScrollViewer.HorizontalScrollBarVisibility="Auto" HorizontalAlignment="Left" VerticalAlignment="Top"> 
      <StackPanel x:Name="SlidePanel" Orientation="Horizontal" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" VerticalAlignment="Top" HorizontalAlignment="Left">  
       <Grid x:Name="Slide0" Margin="0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="{Binding RealWidth, ElementName=phoneApplicationPage}" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" Background="#FFCCCCCC"> 
        <Image x:Name="Photo0" Width="{Binding RealWidth, ElementName=phoneApplicationPage}" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" VerticalAlignment="Top" HorizontalAlignment="Left" Stretch="UniformToFill"/> 
       </Grid> 
       <Grid x:Name="Slide1" Margin="0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="{Binding RealWidth, ElementName=phoneApplicationPage}" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" Background="#FFCCCCCC"> 
        <Image x:Name="Photo1" Width="{Binding RealWidth, ElementName=phoneApplicationPage}" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" VerticalAlignment="Top" HorizontalAlignment="Left" Stretch="UniformToFill"/> 
       </Grid> 
       <Grid x:Name="Slide2" Margin="0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="{Binding RealWidth, ElementName=phoneApplicationPage}" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" Background="#FFCCCCCC"> 
        <Image x:Name="Photo2" Width="{Binding RealWidth, ElementName=phoneApplicationPage}" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" VerticalAlignment="Top" HorizontalAlignment="Left" Stretch="UniformToFill"/> 
       </Grid> 
      </StackPanel>  
     </ScrollViewer> 
    </Grid> 

Answer 1

Ben oldukça iyi işler açıklanan kurulum çıkıyor:

İşte benim XAML olduğunu. Bu, bahsettiğim birçok gliseğe neden olan fizik etkilerini ortadan kaldırıyor.

XAML

<ScrollViewer x:Name="SlideScroller" VerticalScrollBarVisibility="Disabled" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" ScrollViewer.HorizontalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Top"> 
      <StackPanel x:Name="SlidePanel" Orientation="Horizontal" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" VerticalAlignment="Top" HorizontalAlignment="Left"> 
      </StackPanel> 
     </ScrollViewer> 
<Rectangle x:Name="ScrollInterceptRect" Margin="0,0,0,-31" Width="{Binding RealWidth, ElementName=phoneApplicationPage}" Height="{Binding RealHeight, ElementName=phoneApplicationPage}" HorizontalAlignment="Left" VerticalAlignment="Top"> 

Codebehind

public MainPage() 
    { 
     InitializeComponent(); 

     ScrollInterceptRect.MouseLeftButtonUp += new MouseButtonEventHandler(ScrollInterceptRect_MouseLeftButtonUp); 
     ScrollInterceptRect.MouseLeftButtonDown += new MouseButtonEventHandler(ScrollInterceptRect_MouseLeftButtonDown); 
     ScrollInterceptRect.MouseMove += new MouseEventHandler(ScrollInterceptRect_MouseMove); 
    } 
    //... 
    NavigationIndices navigationIndices = new NavigationIndices(); 
    readonly double swipeThreshold = 80.0; 
    SwipeDirection swipeDirection; 
    bool tapCancelled; 
    Point swipeDelta; 
    Point swipeStartPosition; 
    double startScrollOffsetX; 
    void SlideScroller_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
    { 
     swipeStartPosition = e.GetPosition(this); 
     startScrollOffsetX = SlideScroller.HorizontalOffset; 
    } 
    void ScrollInterceptRect_MouseMove(object sender, MouseEventArgs e) 
    { 
     Point touchPosition = e.GetPosition(this); 
     swipeDelta = new Point() { X = swipeStartPosition.X - touchPosition.X, Y = swipeStartPosition.Y - touchPosition.Y }; 
     SlideScroller.ScrollToHorizontalOffset(startScrollOffsetX + swipeDelta.X); 
     // swipe right 
     if (swipeDelta.X > swipeThreshold) 
     { 
      swipeDirection = SwipeDirection.Left; 
      tapCancelled = true; 
     } 
     // swipe left 
     else if (swipeDelta.X < -swipeThreshold) 
     { 
      swipeDirection = SwipeDirection.Right; 
      tapCancelled = true; 
     } 
    } 
    void ScrollInterceptRect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
    { 
     if (swipeDirection == SwipeDirection.Left && navigationIndices.X < photos.Count - 1 && photos[navigationIndices.X] != null) 
     { 
      navigationIndices.X++; 
     } 
     // only go back when you aren't already at the beginning 
     else if (swipeDirection == SwipeDirection.Right && navigationIndices.X > 0) 
     { 
      navigationIndices.X--; 
     } 
     if (!tapCancelled) 
     { 
      // handle tap 
     } 
     else 
     { 
      animateScrollViewerToCurrentPhoto(); 
     } 
    } 

Bu netlik için biraz basitleştirilmiş

(Ben de app şey için dikey hızlıca kaydırmayı kullanın ve ben ScrollViewer animasyon ediyorum nasıl atlanmış - muhtemelen kendi yazıya layık).

Bunu önerebileceğiniz herhangi bir iyileştirmeyi veya bunları daha iyi uygulamak için önerilerde bulunmayı çok isterim. Belki de Panel Sınıfını genişletmek veya özel bir Davranış olarak. Düşünceler?