Search code examples
uwpwindows-10flyout

SettingsFlyout for UWP (Windows 10)

I am currently developing a UWP(windows 10) application, and I am stuck with developing a setting panel for my application.

I understand that there is no more SettingsFlyout like this for UWP windows 10

Settings flyout

However, I really like the look and feel of it. Hence, is there any ways I could develop a settingsflyout of uwp?

Solution

  • You can use the SplitView control and set its DisplayMode property to Overlay and the PanePlacement property to Right.

    <SplitView x:Name="SV_SettingsMenu"
           DisplayMode="Overlay"
           PanePlacement="Right"
           >
    <SplitView.Pane>
        <StackPanel>
            <Button Content="Button 1" HorizontalAlignment="Stretch"/>
            <Button Content="Button 2" HorizontalAlignment="Stretch"/>
            <Button Content="Button 3" HorizontalAlignment="Stretch"/>
        </StackPanel>
    </SplitView.Pane>

    <StackPanel Padding="10">
        <Button Click="ToggleSettings">
            <SymbolIcon Symbol="Setting"/>
        </Button>

        <TextBlock Text="Content"/>
    </StackPanel>
</SplitView>


private void ToggleSettings(object sender, RoutedEventArgs e)
{
    SV_SettingsMenu.IsPaneOpen = !SV_SettingsMenu.IsPaneOpen;
}

    Preview