Separator in a SplitView Pane

Question

I have created a SplitView, but I have a problem in defining a Separator for the menu Option in the SplitView Pane like this in Groove Musique application:

I tried to use a Line shape, but I think that is not a solution.

How can I define this kind of separator in my SplitView Pane?

Answer 1

Using Windows 10 SplitView – Build Your First Hamburger Menu as a guide, I have adapted it as shown below using a Border and a Rectangle to achieve a separator.

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