Question

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

Windows程序的一部分是一系列向导风格的步骤，包括“下一个”和“上一个”按钮以及“保存”和“取消”。屏幕由存储在数据库中的元数据生成。有些屏幕是可选的，只有在满足某些条件后才能创建。

我的问题是 - 如何在WP7中实现最佳效果？

我最初的想法是使用一个数据透视，但后来我读了Tim Heuer's guide to Panaroma vs Pivot，他特别指出“不要使用pivot / pano来实现基于向导的UI”。

我有很多想法 - 我可以将每个屏幕都设为一个页面（由于后台堆栈问题而对此不太热衷）或者我可以使用带有选项卡控件的一个页面 - 但是时间明智并且可以反对它能够浪费时间走错路。

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

Answer 1

我可以将每个屏幕都设为一个页面（由于后台堆栈问题而对此不太敏感）

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

我可以使用一个带有标签控件的页面

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

您需要先设计它并考虑几个场景。当用户点击后退按钮，启动按钮或有人呼叫用户时会发生什么？（当应用程序被逻辑删除时，用户按下后退按钮操作系统将返回最后一页）。导航是否非常复杂（决策树）？

只制作一个带有网格的页面，里面有3个网格/堆栈面板。将它们水平放置，边距为0; 480; 960.当时只能显示一个内部网格。你可以看到一个例子here（我为朋友开了个玩笑：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>

当用户按下按钮时，会添加已完成事件。

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

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

Answer 2

我最初的想法是不要这样做并重新设计过程。如果没有更好地了解你的情况和应用程序，很难给出适当的建议。

如果你赶时间并且真的必须这样做，我建议使用单页并更新视图模型以创建多个页面的外观。

或者，您可以使用一系列页面和Non-Linear Navigation Service 这可能与它如何与应用程序的其余部分集成有问题。

Answer 3

您是否尝试使用网格并使用应用栏上的后退和下一个按钮切换其可见性？然后，后退按钮将作为取消按钮。

在WP7中实现向导样式UI的最佳方法

3 个答案: