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，请创建一个帮助程序类并在页面构造函数中应用转换。

<强> 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);
    }
}

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，鲁珀特。

WP7如何使用工具包TransitionFrame？

4 个答案: