Weird ListBox behavior inside SplitView Pane

[LSXAxeller]

I am trying to create a navigation sidebar, I want to get navigation items as items in ListBox but the selected indicator never get visible when Pane isn't opened like this

What I want to achieve is

this is code

<SplitView IsPaneOpen="{Binding IsPaneOpen}"
                       CompactPaneLength="50"
                       DisplayMode="CompactInline"
                       OpenPaneLength="200"
                       PaneBackground="Transparent">
                <SplitView.Pane>
                    <Panel>
                        <Panel.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="Transparent" Offset="0.0" />
                                <GradientStop Color="#44000000" Offset="0.5" />
                                <GradientStop Color="#22000000" Offset="1.0" />
                            </LinearGradientBrush>
                        </Panel.Background>

                        <StackPanel Orientation="Vertical"
                                    Spacing="5"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Top">
                            <Button HorizontalAlignment="Left"
                                    Height="32"
                                    Width="50"
                                    Margin="0,10"
                                    Classes="transparent"
                                    Command="{Binding TriggerPaneCommand}">
                                <icons:SymbolIcon Symbol="ListBar" />
                            </Button>

                            <ItemsControl ItemsSource="{Binding NavigationItems}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <ListBox ItemsSource="{Binding Children}"
                                                 SelectedValue="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).CurrentNavigationItem}"
                                                 HorizontalAlignment="Left" Margin="0,0,0,0">
                                            <ListBox.ItemTemplate>
                                                <DataTemplate>
                                                    <StackPanel HorizontalAlignment="Stretch" Spacing="25"
                                                                Orientation="Horizontal" Margin="15,5,0,0">
                                                        <icons:SymbolIcon Symbol="{Binding Icon}" FontSize="24" />
                                                        <TextBlock Text="{Binding Title}" FontSize="24" />
                                                    </StackPanel>
                                                </DataTemplate>
                                            </ListBox.ItemTemplate>
                                        </ListBox>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </StackPanel>
                    </Panel>
                </SplitView.Pane>

                <SplitView.Content>
                    <Border CornerRadius="16" Margin="15,50,15,15">
                        <TransitioningContentControl
                            Content="{Binding Source={x:Static services:NavigationService.Current}, Path=Main}" />
                    </Border>
                </SplitView.Content>
            </SplitView>

[timunie]

Use DevTools F12 to check:

• MinWidth
• Alignment
• Margins

I think ListBox or ListBoxItem may have a MinWidth which makes the control positioned incorrectly due to missing space.

[LSXAxeller]

after investigating with DevTools thanks to @timunie for bringing it up, I found that ListBoxItem.HorizontalAlignment="Left" fixes it

<Window.Styles>
        <Style Selector="ListBoxItem">
            <Setter Property="HorizontalAlignment" Value="Left" />
        </Style>
    </Window.Styles>