SplitView 窗格中的分隔符答案

【问题标题】：Separator in a SplitView PaneSplitView 窗格中的分隔符
【发布时间】：2016-01-28 00:12:11
【问题描述】：

我已经创建了一个 SplitView，但是在 Groove Musique 应用程序中为 SplitView 窗格中的菜单选项定义分隔符时遇到了问题：

我尝试使用线条形状，但我认为这不是解决方案。

如何在我的 SplitView 窗格中定义这种分隔符？

【问题讨论】：

感谢 worldofjr 先生的编辑 :)

标签： win-universal-app windows-10-universal

【解决方案1】：

以Windows 10 SplitView – Build Your First Hamburger Menu 为指导，我对其进行了调整，如下所示，使用边框和矩形来实现分隔符。

<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" 
       CompactPaneLength="50" OpenPaneLength="150">
    <SplitView.Pane>
        <StackPanel Background="Gray">
            <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
             Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
            <StackPanel Orientation="Horizontal">
                <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;"
             Width="50" Height="50" Background="Transparent"/>
                <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
            </StackPanel>
            <Border BorderBrush="Red" BorderThickness="1" Width="Auto" HorizontalAlignment="Stretch" Margin="4,0"/>
            <StackPanel Orientation="Horizontal">
                <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"
                 Width="50" Height="50" Background="Transparent"/>
                <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
            </StackPanel>
            <Rectangle HorizontalAlignment="Stretch" Fill="Blue" Height="4" Margin="4,0"/>
            <StackPanel Orientation="Horizontal">
                <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="&#xE1D6;"
                 Width="50" Height="50" Background="Transparent"/>
                <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
            </StackPanel>
        </StackPanel>
    </SplitView.Pane>
    <SplitView.Content>
        <StackPanel>
            <TextBlock Text="Separator Hamburger Menu Test"/>
        </StackPanel>
    </SplitView.Content>
</SplitView>

【讨论】：

【解决方案2】：

我发现上面的示例有点过时，还没有为现实世界做好准备。你可以试试我这里显示的示例... https://bernhardelbl.wordpress.com/2015/11/17/hamburger-menu-with-splitview-for-windows-10-apps/

【讨论】：