Windows Phone 8.1 Bing-like animacja strony slajdu

Question

Chciałbym dodać przejście strony w mojej aplikacji Windows Phone 8.1 w taki sposób, aby następna strona wsuwała się z dołu ekranu. Podobny efekt jest używany po uruchomieniu Bing przez naciśnięcie przycisku Wyszukaj.

Niestety, MSDN nie jest zbyt opisowy na ten temat. Czy ktoś wie, jak wdrożyć taką animację?

Answer 1

W The Windows Phone Toolkit można znaleźć animacje i próbek

Oto article

Answer 2

Najpierw trzeba wyłączyć bieżące Przejścia dla Frame - najlepsze miejsce byłoby w App.xaml.cs gdzie rootframe jest tworzony, ale zależy od sposobu zainicjowania Twojej aplikacji. Tutaj na przykład jest w konstruktorze tytułowa:

public MainPage() 
{ 
    this.InitializeComponent(); 
    Frame mainFrame = Window.Current.Content as Frame; 
    mainFrame.ContentTransitions = null; 
} 

Po wyłączeniu domyślnych przejścia, w każdym Page można zdefiniować własne przejścia:

W Page.xaml:

<Page.Transitions> 
    <TransitionCollection> 
     <PaneThemeTransition Edge="Bottom"/>   
    </TransitionCollection> 
</Page.Transitions> 

nie jestem na pewno, jeśli jest to dokładna animacja, której szukasz. Więcej o animacjach znajdziesz here at MSDN.

Oczywiście można również definiować Frame nowego ContentTransitions, tak że będą one jako domyślny dla wszystkich Pages - na przykład:

// instead of null put in MainPage constructor: 
mainFrame.ContentTransitions = new TransitionCollection { new PaneThemeTransition { Edge = EdgeTransitionLocation.Bottom } }; 

Answer 3

Domyślne przejścia mogą być zastąpione na jednej nawigacji podstawie z kodu.

NavigationTransitionInfo transitionInfo = new SlideNavigationTransitionInfo(); 
Frame.Navigate(typeof(SecondPage), false, transitionInfo); 

Powyższy kod zmusi SecondPage przesuwać się od dołu exatly tak, jak chcesz. Dotyczy to jednak tylko tego konkretnego scenariusza nawigacji. Jeśli chcesz, aby SecondPage przesuwać się po nawigacji z dowolnego miejsca, ustaw NavigationTransitionInfo w XAML.

<Page.Transitions> 
    <TransitionCollection> 
     <NavigationThemeTransition> 
      <NavigationThemeTransition.DefaultNavigationTransitionInfo> 
       <SlideNavigationTransitionInfo/> 
      </NavigationThemeTransition.DefaultNavigationTransitionInfo> 
     </NavigationThemeTransition> 
    </TransitionCollection> 
</Page.Transitions> 

Spowoduje to, że strona będzie się przesuwać za każdym razem, gdy będzie nawigowana. Ta wartość domyślna może nadal być przesłonięta przez kod dla poszczególnych scenariuszy nawigacji.