如何实现Windows邮件App风格的UWP SplitView面板与子菜单系统

我正在用UWP、XAML和C#开发Windows 10应用，已经在主页面添加了SplitView控件，但没法实现类似Windows邮件App的几个功能：

• SplitView Pane菜单中的分隔符
• 子菜单系统
• 底部小尺寸按钮
• 子菜单旁的高亮效果

当前的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>

解决方案：修改后的完整代码及说明 #

我来帮你一步步实现这些功能，下面是调整后的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="240"  <!-- 加宽面板以容纳子菜单 -->
                   Margin="0 10 0 0">
            <SplitView.Pane>
                <!-- 使用ListView替代StackPanel，实现选中高亮效果 -->
                <ListView x:Name="MenuListView"
                          Background="Gray"
                          SelectionMode="Single"
                          ItemContainerStyle="{StaticResource ListViewItemRevealStyle}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <!-- 根据菜单类型显示不同内容：普通项/可展开项 -->
                            <ContentPresenter Content="{Binding}"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <ListView.Items>
                        <!-- 菜单开关按钮 -->
                        <Button Name="btnShowPane" 
                                FontFamily="Segoe MDL2 Assets" 
                                Content="&#xE00F;" 
                                Width="50" Height="50" 
                                Background="Transparent" 
                                Click="btnShowPane_Click"/>

                        <!-- 普通菜单：Message -->
                        <StackPanel Orientation="Horizontal" Height="50">
                            <Button FontFamily="Segoe MDL2 Assets" Content="&#xE715;" Width="50" Height="50" Background="Transparent"/>
                            <TextBlock Text="Message" FontSize="18" VerticalAlignment="Center"/>
                        </StackPanel>

                        <!-- 分隔符 -->
                        <Rectangle Height="1" 
                                   Fill="{ThemeResource SystemControlForegroundAltHighBrush}" 
                                   Margin="16 0"/>

                        <!-- 可展开子菜单：Favorite -->
                        <Expander Header="Favorite" 
                                  FontSize="18" 
                                  Padding="16 0">
                            <Expander.HeaderTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" Height="50">
                                        <Button FontFamily="Segoe MDL2 Assets" Content="&#xE1CE;" Width="50" Height="50" Background="Transparent"/>
                                        <TextBlock Text="{Binding}" VerticalAlignment="Center"/>
                                    </StackPanel>
                                </DataTemplate>
                            </Expander.HeaderTemplate>
                            <!-- 子菜单列表 -->
                            <StackPanel>
                                <StackPanel Orientation="Horizontal" Height="40" Margin="48 0">
                                    <TextBlock Text="Starred" FontSize="16" VerticalAlignment="Center"/>
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Height="40" Margin="48 0">
                                    <TextBlock Text="Flagged" FontSize="16" VerticalAlignment="Center"/>
                                </StackPanel>
                            </StackPanel>
                        </Expander>

                        <!-- 分隔符 -->
                        <Rectangle Height="1" 
                                   Fill="{ThemeResource SystemControlForegroundAltHighBrush}" 
                                   Margin="16 0"/>

                        <!-- 普通菜单：Settings -->
                        <StackPanel Orientation="Horizontal" Height="50">
                            <Button FontFamily="Segoe MDL2 Assets" Content="&#xE715;" Width="50" Height="50" Background="Transparent"/>
                            <TextBlock Text="Settings" FontSize="18" VerticalAlignment="Center"/>
                        </StackPanel>
                    </ListView.Items>

                    <!-- 底部按钮区域 -->
                    <ListView.Footer>
                        <StackPanel VerticalAlignment="Bottom" Margin="0 16 0 0">
                            <Button FontFamily="Segoe MDL2 Assets" 
                                    Content="&#xE770;"  <!-- 帮助图标 -->
                                    Width="40" Height="40" 
                                    Background="Transparent"
                                    HorizontalAlignment="Center"/>
                            <Button FontFamily="Segoe MDL2 Assets" 
                                    Content="&#xE109;"  <!-- 反馈图标 -->
                                    Width="40" Height="40" 
                                    Background="Transparent"
                                    HorizontalAlignment="Center"
                                    Margin="0 8 0 0"/>
                        </StackPanel>
                    </ListView.Footer>
                </ListView>
            </SplitView.Pane>

            <!-- SplitView主内容区域（这里可以添加你的页面内容） -->
            <Grid Background="White">
                <TextBlock Text="主内容区域" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </SplitView>
    </Grid>
</Page>

关键功能实现说明： #

1. 菜单分隔符：
   使用Rectangle控件设置高度为1，填充色用系统主题资源SystemControlForegroundAltHighBrush，保持和系统风格一致，放在需要分隔的菜单项之间。

2. 子菜单系统：
   采用Expander控件（Windows 10 1809及以上版本支持），自定义HeaderTemplate来匹配父菜单的图标+文字样式，内部嵌套StackPanel放置子菜单项，实现点击展开/折叠的效果。

3. 底部小尺寸按钮：
   利用ListView.Footer区域放置底部按钮，调整按钮宽高为40x40，使用Segoe MDL2 Assets的图标，保持紧凑的布局，并且设置水平居中对齐。

4. 高亮效果：
   用ListView替代原来的StackPanel作为菜单容器，使用系统默认的ListViewItemRevealStyle样式，当选中菜单项时会自动显示左侧高亮条，完全贴合Windows邮件App的视觉效果。如果需要自定义高亮样式，可以修改ItemContainerStyle来调整颜色和样式。

另外，我把OpenPaneLength从130调整为240，这样能更好地容纳子菜单的缩进内容，你可以根据自己的需求再调整这个数值。

内容的提问来源于stack exchange，提问作者Dentrax