UWP SplitView Panel & Separator 系统，如邮件应用

Question

我目前正在使用 UWP、XAML 和 C# 为 Windows 10 构建应用程序。我按照教程将 SplitView 控件添加到我的主页。但是我在为 SplitView 窗格中的菜单选项定义分隔符和 Sub-Menu 系统时遇到问题 Windows.Mail app :

所以我想完全克隆 Mail 应用程序的菜单以供学习：如何使用窗格、SplitViews、StackPanels...

这是我目前在 MainPage.xaml 中的内容：

<Page
    x:Class="EasyCleaner.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:EasyCleaner"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Height="628" Width="970.5">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="5">

        <SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="130" Margin="0 10 0 0">

            <SplitView.Pane>

                <StackPanel Background="Gray">

                    <Button Name="btnShowPane" FontFamily="Segoe MDL2 Assets" Content="&#xE00F;" Width="50" Height="50" Background="Transparent" Click="btnShowPane_Click"/>

                    <StackPanel Orientation="Horizontal">
                        <Button Name="Message_Menu" FontFamily="Segoe MDL2 Assets" Content="&#xE715;" Width="50" Height="50" Background="Transparent"/>
                        <TextBlock Text="Message" FontSize="18" VerticalAlignment="Center"/>
                    </StackPanel>

                    <StackPanel Orientation="Horizontal">
                        <Button Name="Favorite_Menu" FontFamily="Segoe MDL2 Assets" Content="&#xE1CE;" Width="50" Height="50" Background="Transparent"/>
                        <TextBlock Text="Favorite" FontSize="18" VerticalAlignment="Center"/>
                    </StackPanel>

                    <StackPanel Orientation="Horizontal">
                        <Button Name="Settings_Menu" FontFamily="Segoe MDL2 Assets" Content="&#xE715;" Width="50" Height="50" Background="Transparent"/>
                        <TextBlock Text="Settings" FontSize="18" VerticalAlignment="Center"/>
                    </StackPanel>

                    <StackPanel Background="Gray" VerticalAlignment="Bottom">
                        <Button HorizontalAlignment="Stretch" Background="Blue">Content</Button>
                    </StackPanel>

                </StackPanel>

            </SplitView.Pane>

        </SplitView>

    </Grid>
</Page>

但最终结果看起来像：

如何在菜单底部制作最小的按钮、分隔符和 sub-menu 系统（并在子菜单旁边突出显示）？

Answer 1

尝试在网格的 XAML 设计器中定义此位置。添加新行和列并使它们相交。
接下来添加一个新的边框，通过定义数字来指定这个边框列和行以及 column/row -span。你应该以完美结束您要放置按钮的区域。
现在添加一个水平方向的堆栈面板，然后将您的按钮在这里。

希望这对您有所帮助。

Answer 2

我建议检查 NavigationView 控件。

The navigation view control provides a collapsible navigation menu for top-level navigation in your app. This control implements the nav pane, or hamburger menu, pattern and automatically adapts the pane's display mode to different window sizes.

与 SplitView 相比，它提供了更丰富的内置功能，它是您要模拟的导航类型（邮件）的recommended approach。

NavigationViewItems、NavigationViewItemSeperator 和 NavigationViewItemHeader 以及页脚选项应大大简化自定义解决方案的导航代码。

UWP SplitView Panel & Separator 系统，如邮件应用

UWP SplitView Panel & Separator system like Mail app

xaml

uwp

win-universal-app

windows-10-universal

uwp-xaml