4

I'm currently developing a Windows 10 UWP application. Before I upgraded to Windows 10 I used the SettingsFlyout class in Windows 8.1. Now I red on stackoverflow that this class isn't supported by Windows 10.

So is there a good alternative for the flyout in Windows 10 UWP which has the same or similar handling?

mario.trappl
  • 41
  • 2
  • The alternative would be to use a `SplitView` instead. – Stefan Over Feb 01 '16 at 14:42
  • So I found out now that only the SettingsPane isn't working in my solution. The flyout is now working. If I use it like before and it isn't officialy supported by Microsoft, is there a problem with publishing the app on the Windows Store? – mario.trappl Feb 01 '16 at 14:48

1 Answers1

1

If you want to replace Settings Flyout then there are some possible ways
1. Add SettingsPage.xaml page with settings and navigation from AppBar:

<Page.TopAppBar>
    <CommandBar IsOpen="False" ClosedDisplayMode="Minimal">
        <CommandBar.PrimaryCommands>
<AppBarButton x:Name="btnSettings" Label="Settings" Click="btnSettings_Click" Icon="Setting"  >
            </AppBarButton>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.TopAppBar>

And realize click event:

 private void btnSettings_Click(object sender, RoutedEventArgs e)
    {
        this.Frame.Navigate(typeof(SettingsPage));
    }

But in this case it's better to add Back button.
At the end of OnLaunched event add:

rootFrame.Navigated += OnNavigated;
SystemNavigationManager.GetForCurrentView().BackRequested += OnBackRequested;

And add:

   private void OnNavigated(object sender, NavigationEventArgs e)
    {
 SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
        ((Frame)sender).CanGoBack ? AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;
    }

    private void OnBackRequested(object sender, BackRequestedEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        if (rootFrame.CanGoBack)
        {
            e.Handled = true;
            rootFrame.GoBack();
        }
    }

2. Also add xaml page with settings, but use navigation with SplitView control and create Hamburger menu

Windows 10 SplitView – Build Your First Hamburger Menu
Implementing a Simple Hamburger Navigation Menu

3. Move settings to ContentDialog

4. If you don't have much settings you can put them into Flyout control

<Button Content="Settings">
<Button.Flyout>
<MenuFlyout>
<ToggleMenuFlyoutItem Text="Toggle Setting" />
<MenuFlyoutSeparator />
<MenuFlyoutItem Text="Setting 1" />
<MenuFlyoutItem Text="Setting 2" />
<MenuFlyoutItem Text="Setting 3" />
</MenuFlyout>
</Button.Flyout>
</Button>
Alexej Sommer
  • 2,677
  • 1
  • 14
  • 25