locked
How to navigate within settings flyout? RRS feed

  • Question

  • I am working on my first Win 8.1 Store app and have some trouble understanding the SettingsFlyout.

    Thanky to the docs creating Flyouts for my custom settings and adding them to the Settings Charm is not a problem.

    However I have not been able to find out how navigate within the Flyout. I would like to create the following behavious as it can be seen in the Mail App: 1. Swipe from the right to show charms 2. Click on "Settings" to show the settings pane 3. Click on Account to show the "Accounts List Flyout" 4. On the "Accounts List Flyout" click on an account show its settings 5. The settings of the selected account are shown within the Flyout 6. Using the Back button brings you back to the accounts list

    Steps 1-3 are no problem. But how do I manage the other steps? How can I navigate one lever deeper into the settings and use the Back button to go up again?

    Monday, January 20, 2014 12:03 PM

Answers

  • If you're navigating inside the SettingsFlyout, you'll need to determine how to show/hide panels based on your actions - it's not a built-in feature to have navigation within the SettingsFlyout.  Think of it like a single page where you show/hide different parts of the UI.

    You can handle the backbutton click event to do a custom action:
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.settingsflyout.backclick.aspx

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, January 21, 2014 1:21 PM
    Moderator
  • look here: http://code.msdn.microsoft.com/windowsapps/Framebased-Settings-flyout-e60cd91b

    i think i build it with callisto but dont think it will to hard to start using the flyout of windows 8.1. If need help let me know.


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Tuesday, January 21, 2014 2:51 PM

All replies

  • If you're navigating inside the SettingsFlyout, you'll need to determine how to show/hide panels based on your actions - it's not a built-in feature to have navigation within the SettingsFlyout.  Think of it like a single page where you show/hide different parts of the UI.

    You can handle the backbutton click event to do a custom action:
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.settingsflyout.backclick.aspx

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, January 21, 2014 1:21 PM
    Moderator
  • look here: http://code.msdn.microsoft.com/windowsapps/Framebased-Settings-flyout-e60cd91b

    i think i build it with callisto but dont think it will to hard to start using the flyout of windows 8.1. If need help let me know.


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Tuesday, January 21, 2014 2:51 PM
  • When we click on the back button of the SettingsFlyout, it will directly navigate back to the Settings Charm, instead of the root SettingsFlyout. We need to handle it seperately.

    To achieve 5th and 6th step you can show the selected SettingsFlyout as Independent, this will help you to show other Flyout on bacnavigation. Hook, backClick event and navigate to the root SettingsFlyout manually.

            private void Account_Tapped(object sender, TappedRoutedEventArgs e)

            {
                new AccountSettingsFlyout().ShowIndependent();
            }               

    void AccountSettingsFlyout_BackClick(object sender, BackClickEventArgs e)         {             newAccountsListFlyout().Show();         }

    Hope this helps someone!!!!

    Thursday, March 13, 2014 7:14 AM