WP7如何使用工具包TransitionFrame？

我已經下載了最新的Windows.Phone.Controls.Toolkit並在app.xaml.cs改變WP7如何使用工具包TransitionFrame？

RootFrame = new PhoneApplicationFrame();

到

RootFrame = new TransitionFrame();

我預計在頁面之間的過渡部分的變化，但沒有發生任何事情。

我是否需要做更多的事情來實現更有趣的轉換？

來源

2012-06-12 Sam

您通過添加補充參考xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

，並嘗試旋轉門效應：

<toolkit:TransitionService.NavigationInTransition> 
    <toolkit:NavigationInTransition> 
     <toolkit:NavigationInTransition.Backward> 
      <toolkit:TurnstileTransition Mode="BackwardIn"/>     
     </toolkit:NavigationInTransition.Backward> 
     <toolkit:NavigationInTransition.Forward> 
      <toolkit:TurnstileTransition Mode="ForwardIn"/> 
     </toolkit:NavigationInTransition.Forward> 
    </toolkit:NavigationInTransition> 
</toolkit:TransitionService.NavigationInTransition> 
<toolkit:TransitionService.NavigationOutTransition> 
    <toolkit:NavigationOutTransition> 
     <toolkit:NavigationOutTransition.Backward> 
      <toolkit:TurnstileTransition Mode="BackwardOut"/> 
     </toolkit:NavigationOutTransition.Backward> 
     <toolkit:NavigationOutTransition.Forward> 
      <toolkit:TurnstileTransition Mode="ForwardOut"/> 
     </toolkit:NavigationOutTransition.Forward> 
    </toolkit:NavigationOutTransition> 
</toolkit:TransitionService.NavigationOutTransition>

你想有過渡效果的每個頁面。

或者您可以嘗試其他效果，例如：幻燈片，旋轉，旋轉和滾動。

來源

2012-06-12 13:13:52 Mia

哦，我絕對錯過了我需要的東西添加到每個頁面。謝謝！！ – Sam

一旦您指定要使用TransitionFrame那麼你需要告訴什麼樣的轉變，你想進入和外出頁面的應用程序，這裏是我使用的一些典型的XAML：

首先註冊了命名空間的頁面的標題：

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

然後設置過渡

<toolkit:TransitionService.NavigationInTransition> 
     <toolkit:NavigationInTransition> 
      <toolkit:NavigationInTransition.Backward> 
       <toolkit:TurnstileTransition Mode="BackwardIn"/> 
      </toolkit:NavigationInTransition.Backward> 
      <toolkit:NavigationInTransition.Forward> 
       <toolkit:SlideTransition Mode="SlideRightFadeIn" /> 
      </toolkit:NavigationInTransition.Forward> 
     </toolkit:NavigationInTransition> 
    </toolkit:TransitionService.NavigationInTransition>

你可以嘗試不同的過渡類型鰭d最適合您的應用程序的。

HTH， Rupert。

來源

2012-06-12 13:16:16 Rupert

爲後人：

如果你不希望有寫所有的XAML的每一頁，創建一個輔助類，並在頁面的構造函數應用的過渡。

Transitions.cs

public class Transitions { 

    /// <summary> 
    /// Set the Turnstile transition for this UIElement 
    /// </summary> 
    /// <param name="element"></param> 
    public static void UseTurnstileTransition(UIElement element) 
    { 
     TransitionService.SetNavigationInTransition(element, 
      new NavigationInTransition() { 
       Backward = new TurnstileTransition() { 
        Mode = TurnstileTransitionMode.BackwardIn 
       }, 
       Forward = new TurnstileTransition() { 
        Mode = TurnstileTransitionMode.ForwardIn 
       } 
      } 
     ); 

     TransitionService.SetNavigationOutTransition(element, 
      new NavigationOutTransition() { 
       Backward = new TurnstileTransition() { 
        Mode = TurnstileTransitionMode.BackwardOut 
       }, 
       Forward = new TurnstileTransition() { 
        Mode = TurnstileTransitionMode.ForwardOut 
       } 
      } 
     ); 
    } 
}

ExamplePage.xaml.cs

public partial class ExamplePage : PhoneApplicationPage { 
    public ExamplePage() { 
     InitializeComponent(); 

     Transitions.UseTurnstileTransition(this); 
    } 
}

來源

2013-01-27 05:33:54 kamranicus

太棒了！非常有幫助 - 謝謝。 – James

整齊，+1 - 雖然通常我更喜歡用一種風格來做，因此即使在查看XAML時也是如此。我已經添加了該效果的答案。 –

只是注意擴大對@ subkamran的答案。取而代之的是輔助類的，你也可以使用樣式：

<Style x:Key="TransitionPageStyle" TargetType="phone:PhoneApplicationPage"> 
    <Setter Property="toolkit:TransitionService.NavigationInTransition"> 
     <Setter.Value> 
      <toolkit:NavigationInTransition> 
       <toolkit:NavigationInTransition.Backward> 
        <toolkit:TurnstileTransition Mode="BackwardIn"/> 
       </toolkit:NavigationInTransition.Backward> 
       <toolkit:NavigationInTransition.Forward> 
        <toolkit:TurnstileTransition Mode="ForwardIn"/> 
       </toolkit:NavigationInTransition.Forward> 
      </toolkit:NavigationInTransition> 
     </Setter.Value> 
    </Setter> 

    <Setter Property="toolkit:TransitionService.NavigationOutTransition"> 
     <Setter.Value> 
      <toolkit:NavigationOutTransition> 
       <toolkit:NavigationOutTransition.Backward> 
        <toolkit:SlideTransition Mode="BackwardOut"/> 
       </toolkit:NavigationOutTransition.Backward> 
       <toolkit:NavigationOutTransition.Forward> 
        <toolkit:TurnstileTransition Mode="ForwardOut"/> 
       </toolkit:NavigationOutTransition.Forward> 
      </toolkit:NavigationOutTransition> 
     </Setter.Value> 
    </Setter> 
</Style>

來源

2014-01-06 23:56:05

WP7如何使用工具包TransitionFrame？

回答

相關問題