windows-phone-7 - 在 WP7 中实现向导风格 UI 的最佳方式

Question

我正在移植 Windows 窗体程序以在 Windows Phone 7 上运行。

Windows 程序的一部分是向导式的一系列步骤，带有 Next 和 Prev 按钮以及 Save 和 Cancel。屏幕是从存储在数据库中的元数据生成的。有些屏幕是可选的，只有在满足特定条件后才会创建。

我的问题是 - 这在 WP7 中如何最好地实现？

我最初的想法是使用枢轴，但后来我读到 Tim Heuer's guide to Panaroma vs Pivot他特别指出“不要将 pivot/pano 用于基于向导的 UI”。

我有很多想法——我可以把每个屏幕都做成一个页面(由于后堆栈问题，我不太热衷于此)或者我可以使用一个带有选项卡控件的页面——但是在时间上明智地反对它并且负担不起浪费时间走错路。

有任何想法吗？我的 WP7 应用程序是通过 Caliburn Micro 使用 MVVM 构建的。

Answer 1

I could make each screen a page (not too keen on this due to back stack issues)

The Nonlinear Navigation服务可能会帮助您使用后退按钮。

I could use one page with a tab control

我使用重新设计的 Tab 控件在 WPF 中做了一个类似向导的应用程序。有点乱，不过效果很好。

您需要先设计它并考虑一些场景。当用户单击后退按钮、启动按钮或有人调用用户时会发生什么？ (当应用程序被墓碑化并且用户按下后退按钮时，操作系统会带回最后一页)。导航是否非常复杂(决策树)？

只制作一个带有网格的页面，里面有 3 个网格/堆叠面板。将它们水平放置，边距为 0； 480; 960.当时只能显示一个内部网格。你可以看到一个例子 here (我给 friend 开了个玩笑:P)。

我使用了带有复合变换的堆栈面板。

        <StackPanel Name="questionPanel" Grid.Row="0" HorizontalAlignment="Center">
            <StackPanel.RenderTransform>
             <CompositeTransform TranslateX="480"></CompositeTransform>
            </StackPanel.RenderTransform>

有动画

<UserControl.Resources>

    <Storyboard x:Name="centerPanelIn">
        <DoubleAnimation Duration="0:0:0.3" BeginTime="0:0:0.6" To="0"
                         Storyboard.TargetName="centerPanel"
                         Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
            <DoubleAnimation.EasingFunction>
                <ExponentialEase Exponent="6.0" EasingMode="EaseOut"></ExponentialEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

当用户按下按钮时，会添加 Completed 事件。

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        centerPanelOut.Begin();
        centerPanelOut.Completed += new EventHandler(centerPanelOut_Completed);
    }

这种方法有一个优势，因为一切都在一个页面上，动画提供了很好的用户体验。对于更复杂的向导，请考虑让您拥有自己的 UserControl。