Создайте страницу настроек, такую ​​как приложение электронной почты

Question

Я хочу создать страницу настроек, подобную той, которая используется в почтовом приложении uwp:

Я хотел бы иметь некоторые общие настройки, как на первом изображении, поэтому, когда я нажимаю на любой из них, страница переходит к выбранной настройке.

В настоящее время я использую представление навигации в моем MainPage.xaml, как показано ниже:

   <Page
       x:Class="TestApp.UWP.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:local="using:TestApp.UWP"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       x:Name="MainContentPage"
       Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
       DataContext="{Binding Home, Source={StaticResource Locator}}"
       mc:Ignorable="d">

        <NavigationView
            x:Name="NavigationView"
            Background="{ThemeResource SystemControlBaseLowAcrylicWindowBrush}"
            CompactModeThresholdWidth="1280"
            ExpandedModeThresholdWidth="1280"
            IsBackButtonVisible="Collapsed"
            IsBackEnabled="False"
            IsSettingsVisible="True"
            MenuItemsSource="{Binding NavigationItems, Mode=OneWay}"
            SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
            <NavigationView.PaneFooter>
                <StackPanel>
                    <Button
                        HorizontalAlignment="Stretch"
                        HorizontalContentAlignment="Stretch"
                        Background="Transparent"
                        Command="{Binding LogoutCommand}"
                        ToolTipService.ToolTip="Sign out">
                        <Grid Height="40" Margin="-9,0,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="48" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <SymbolIcon
                                Grid.Column="0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Symbol="People" />
                            <TextBlock
                                Grid.Column="1"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Text="Sign out" />
                        </Grid>
                    </Button>
                </StackPanel>
            </NavigationView.PaneFooter>
        </NavigationView>
    </Page>  

Я думал, что мог бы использовать фрейм, который содержит кнопки общих настроек и какую-то команду / событие, связанное с ними, поэтому, когда я нажимаю на любую из них, команда / событие вызоветFrame.Navigate(pageType) метод

Проблемы / сомнения:

1. Я не знаю, как я мог бы разместить основной кадр вправо
2. Чтобы показатьфрейм только после нажатия на кнопку настроек навигационного просмотра, я должен использовать свойство Visibility?
3. Как я могу закрыть настройки после щелчка в любой части в окне?(кроме самой рамки)
4. Должен ли я использовать рамку или есть какая-нибудь другая лучшая альтернатива?

Любая помощь будет признательна

Answer 1

Как насчет использования SplitView ?Он предназначен именно для этой задачи.

1. Использовать свойство PanePlacement
2. Использовать свойство IsPaneOpen
3. Это стандартное поведение splitview (режим наложения)