1

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 behavior 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?

chue x
  • 18,573
  • 7
  • 56
  • 70
Andrei Herford
  • 17,570
  • 19
  • 91
  • 225

1 Answers1

6

For Step 5 you can do something like

var newFlyout = new AccountFlyout(id);
newFlyout.ShowIndependent();

Now you are done with Step 5.

In the AccountFlyout.xaml.cs file hook on the BackClick event (in constructor) and then do something like:

    void OnAccountFlyoutBackClick(object sender, BackClickEventArgs e)
    {
        // go back to the accounts list
        var listFlyout = new AccountsListFlyout();
        listFlyout.Show();
    }

Clicking the Back button being on an Account will now go 'back' to the Accounts List flyout.

Yes, this is not very 'MVVM' friendly (if you perform the navigation in the VM you must know about the Flyouts and if you do it in the 'code-behind' you are not 100% MVVM conform) but it gets the job done without creating unnecessary complexity :)

ThumbGen
  • 162
  • 2
  • 8