Сепаратор в SplitView панели

Question

Я создал SplitView, но у меня есть проблема в определении Сепаратор для опции меню в SplitView панели, как это в приложении Groove Musique:

Я попытался используйте форму линии, но я думаю, что это не решение.

Как я могу определить этот разделитель в моей панели SplitView?

Answer 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> 

Answer 2

Я считаю выше образец немного устарел не готов к реальному миру. Вы можете попробовать мой образец, показанный здесь ... https://bernhardelbl.wordpress.com/2015/11/17/hamburger-menu-with-splitview-for-windows-10-apps/