windows-phone-7 - WP7如何使用工具包TransitionFrame？

Question

我已经下载了最新的 Windows.Phone.Controls.Toolkit 并在 app.xaml.cs 中更改了

RootFrame = new PhoneApplicationFrame();

到

RootFrame = new TransitionFrame();

我预计页面之间的过渡会发生一些变化，但什么也没发生。

我需要做更多的事情来实现更有趣的过渡吗？

Answer 1

您必须添加参考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>

到您想要具有过渡效果的每个页面。

或者您可以尝试其他效果，例如：滑动、旋转、旋转和滚动。

Answer 2

为后代：

如果您不想为每个页面编写所有 XAML，请创建一个帮助程序类并在页面的构造函数中应用转换。

过渡.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);
    }
}

Answer 3

只是一个注释以扩展@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>

Answer 4

指定要使用 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>

您可以尝试不同的转换类型，以找到最适合您的应用程序的一种。

HTH，鲁珀特。