在WP7中實現向導樣式UI的最佳方法

Question

我正在移植Windows窗體程序以在Windows Phone 7上運行。

Windows程序的一部分是向導式系列步驟，其中包含“下一個”和“上一個”按鈕以及“保存”和“取消”。 屏幕由存儲在數據庫中的元數據生成。 某些屏幕是可選的，僅在滿足某些條件后才會創建。

我的問題是 - 如何在WP7中最好地實現？

我最初的想法是使用一個支點，但后來我讀到了Tim Heuer的Panaroma vs Pivot指南 ，他特別指出“不要使用pivot / pano來實現基於向導的UI”。

我有很多想法 - 我可以讓每個屏幕都成為一個頁面（由於后台堆棧問題而對此不太熱衷）或者我可以使用帶有選項卡控件的一個頁面 - 但是時間明智而且不能承受浪費時間走錯路。

有任何想法嗎？ 我的WP7應用程序是通過Caliburn Micro使用MVVM構建的。

Answer 1

我可以讓每個屏幕成為一個頁面（由於后面的堆棧問題，不太熱衷於此）

非線性導航服務可以幫助您使用后退按鈕。

我可以使用一個帶有選項卡控件的頁面

我在WPF中使用重新設置的Tab控件做了一個類似向導的應用程序。 雖然有點亂，但效果很好。

您需要先設計它並考慮幾個場景。 當用戶點擊后退按鈕，啟動按鈕或有人呼叫用戶時會發生什么？ （當應用程序被邏輯刪除時，用戶按下后退按鈕操作系統將返回最后一頁）。 導航是否非常復雜（決策樹）？

只做一個頁面，里面有3個網格/堆棧面板。 將它們水平放置，邊距為0; 480; 960.當時只能顯示一個內部網格。 你可以在這里看到一個例子（我為朋友開了個玩笑：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

我最初的想法是不要這樣做並重新設計過程。 如果沒有更好地了解您的情況和應用程序，很難適當地提出建議。

如果你趕時間並且真的必須這樣做，我建議使用單個頁面並更新視圖模型以創建多個頁面的外觀。

或者，您可以使用一系列頁面和非線性導航服務 。
這可能與它如何與應用程序的其余部分集成有問題。

Answer 3

您是否嘗試使用網格並使用應用欄上的后退和下一個按鈕切換其可見性？ 然后后退按鈕將作為取消按鈕。