在 WP7 中实现向导风格 UI 的最佳方式 [英] Best way to implement a wizard style UI in WP7

问题描述

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

I'm porting a windows forms program to run on Windows Phone 7.

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

Part of the windows program is a wizard style series of steps with Next and Prev buttons along with Save and Cancel. The screens are generates from metadata stored in a database. Some screens are optional and are only created after certain conditions are met.

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

My question is - how is this best implemented in WP7?

我最初的想法是使用枢轴，但后来我阅读了 Tim Heuer 的 Panaroma 与 Pivot 指南，其中他特别指出不要将 pivot/pano 用于基于向导的 UI".

My initial idea was to use a pivot but then I read Tim Heuer's guide to Panaroma vs Pivot where he specifically states "don’t use pivot/pano for wizard-based UI".

我有很多想法 - 我可以将每个屏幕设为一个页面(由于后台堆栈问题，我对此不太感兴趣)，或者我可以使用带有选项卡控件的页面 - 但在时间上明智地反对它并且可以'不能在错误的方向上浪费时间.

I have a number of ideas - I could make each screen a page (not too keen on this due to back stack issues) or I could use one page with a tab control - but am up against it time wise and can't afford to waste days heading the wrong way.

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

Any ideas? My WP7 app is being built using MVVM via Caliburn Micro.

推荐答案

我可以让每个屏幕成为一个页面(由于后台堆栈问题，我不太热衷于此)

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

非线性导航服务可以帮助您使用后退按钮.

The Nonlinear Navigation Service may help you with the back button.

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

I could use one page with a tab control

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

I did one wizard-like app in WPF using restyled Tab control. Was a bit messy, works well though.

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

You need to design it first and consider a few scenarios. What happen when user clicks the back button, starts button or someone calls the user? (when app is tombstoned and user presses back button OS brings back the last page). Is the navigation very complex (decision tree)?

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

Make just one page with a grid with 3 grids/stack panels inside. Place them horizontally with margins 0; 480; 960. The only one internal grid can be shown at the time. You can see an example here (I made a joke for friends :P ).

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

I have used stack panels with composite transform.

        <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 事件.

When user presses the button, Completed event is added.

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

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

This approach has an advantage, because everything is on one page and animations give the nice UX. For more complex wizard consider making you own UserControl.

这篇关于在 WP7 中实现向导风格 UI 的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！