如何实现

Question

在进入“设置”页面时，点击其中的选项，会直接导航到新的页面。如下图所示：

点击“设置”选项，进入到下面所示页面

当点击“后退”按钮后，还会返回到前一个页面。

这种在屏幕的右侧进行页面导航的交互如何实现呢？最好能有例子！！！

Answer 1

这里有个例子： http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49  符合你的要求的

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us

Answer 2

这个例子已经看过了，但不知道如何把点击选项后的页面加载到（settings panel）。当点击back按钮，回退到settings 页面。如同图2中，“开始设置”页面停靠的位置。

Answer 3

Metro HTML WinJS中有 SettingsFlyout 这个组件可以来实现你的效果，http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49    Javasvript版本中你可以看到。 但是在XAML版本中，你需要自己去show一个区域，让其显示。然后在里面添加一个Back按钮，调用其 SettingsPane.Show 方法。

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us

Answer 4

 "但是在XAML版本中，你需要自己去show一个区域，让其显示"

可以来段代码演示下吗？

Answer 5

        void App_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {
            var about = new SettingsCommand("about", "关于", (handler) =>
            {

                   //声明你自己的控件

                  var settings = new SettingsFlyout();

                  //调用自己控件的弹出方法

                settings.ShowFlyout(new About());
            });
            args.Request.ApplicationCommands.Add(about);
        }

//弹出方法就是一个Popup 的Open

==========================================================================

        public void ShowFlyout(UserControl control)
        {
            popup = new Popup();
            popup.Closed += popup_Closed;
            Window.Current.Activated += Current_Activated;
            popup.IsLightDismissEnabled = true;
            popup.Width = width;
            popup.Height = Window.Current.Bounds.Height;
            control.Width = width;
            control.Height = Window.Current.Bounds.Height;
            popup.Child = control;
            popup.SetValue(Canvas.LeftProperty, Window.Current.Bounds.Width - width);
            popup.SetValue(Canvas.ZIndexProperty, 0);
            popup.IsOpen = true;
        }

你不需要考虑后退的事情 这个系统已经帮你处理好了

Answer 6

        void App_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {
            var about = new SettingsCommand("about", "关于", (handler) =>
            {

                   //声明你自己的控件

                  var settings = new SettingsFlyout();

                  //调用自己控件的弹出方法

                settings.ShowFlyout(new About());
            });
            args.Request.ApplicationCommands.Add(about);
        }

//弹出方法就是一个Popup 的Open

==========================================================================

        public void ShowFlyout(UserControl control)
        {
            popup = new Popup();
            popup.Closed += popup_Closed;
            Window.Current.Activated += Current_Activated;
            popup.IsLightDismissEnabled = true;
            popup.Width = width;
            popup.Height = Window.Current.Bounds.Height;
            control.Width = width;
            control.Height = Window.Current.Bounds.Height;
            popup.Child = control;
            popup.SetValue(Canvas.LeftProperty, Window.Current.Bounds.Width - width);
            popup.SetValue(Canvas.ZIndexProperty, 0);
            popup.IsOpen = true;
        }

你不需要考虑后退的事情 这个系统已经帮你处理好了

不好意思，最近才看回复。上面的代码有没有完整的例子呢！！

Answer 7

http://timheuer.com/blog/archive/2012/03/06/creating-custom-settings-pane-xaml-windows-8.aspx