WinUI 3 ListViewItem Width not adhering to ListView Width

Question

Personal commentary

This has actually been driving me a bit loopy; I just can't seem to get the desired outcome so any help with this is much appreciated.

Problem Statement

I have a ListView within a NavigationViewItem because I wanted to be able to use item reordering and drag and drop capabilities from within my Shell view and currently the NavigationView control doesn't really support this properly.

The issue I'm running into is when the NavigationView control is in it's minimsed view (IsPaneOpen="false") the ListView doesnt honour the width change and the child items do not honour the ListView width either.

Tldr: When NavigationView Control IsPaneOpen="false" occurs the button only shows the image not the text and it's centered, proper padding/margin rounded corners still, exactly like a NavigationViewItem does I.E. one of these:

<NavigationViewItem
    x:Uid="Shell_Main"
    Icon="Target" />

Basically this:

to look like this:

What I've tried

I have tried using an ItemContainerStyle however this removes the styling and the selection indicator.

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</ListView.ItemContainerStyle>

I've also tried just manually setting the width on everything so I can at least see what might replicate what I'm trying to achieve and that's a no go too.

Handful of content I've looked at so far:

1. How to dynamically scale column width in UWP ListView with DataTemplate like table

2. https://github.com/microsoft/microsoft-ui-xaml/issues/3682

3. WinUI list control that allows for dynamic item size, reordering, and virtualization

XAML

<NavigationViewItem Visibility="{x:Bind ViewModel.ShowSC, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}">
    <NavigationViewItem.Template>
        <ControlTemplate>
            <Border Width="auto" Height="auto">
                <ContentPresenter />
            </Border>
        </ControlTemplate>
    </NavigationViewItem.Template>
    <Grid
        x:Name="scOuterGrid"
        MinHeight="100"
        HorizontalAlignment="Stretch">
        <ListView
            x:Name="lstvSC"
            HorizontalAlignment="Stretch"
            AllowDrop="True"
            CanDragItems="True"
            CanReorderItems="True"
            DragItemsCompleted="lstvSpotlightChats_DragItemsCompleted"
            DragItemsStarting="lstvSpotlightChats_DragItemsStarting"
            ItemsSource="{x:Bind ViewModel.SCC, Mode=OneWay}"
            SelectedItem="{x:Bind ViewModel.SelectedSC, Mode=TwoWay}"
            SelectionChanged="lstvSC_SelectionChanged"
            SelectionMode="Single"
            SizeChanged="lstvSC_SizeChanged">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="models:CM">
                    <Grid
                        HorizontalAlignment="Stretch"
                        ColumnSpacing="14"
                        ToolTipService.ToolTip="{x:Bind MenuItemName}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <BitmapIcon
                            Grid.Column="0"
                            Width="24"
                            Margin="-4,0,0,0"
                            UriSource="{x:Bind IP, Converter={StaticResource SCIconConverter}}" />
                        <TextBlock
                            Grid.Column="1"
                            VerticalAlignment="Center"
                            Text="{x:Bind MenuItemName}"
                            Visibility="Collapsed" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.Header>
                <TextBlock
                    x:Name="lstviewSH"
                    Margin="15,15,0,15"
                    FontSize="14"
                    FontWeight="SemiBold"
                    Foreground="{ThemeResource TextBoxForegroundHeaderThemeBrush}"
                    OpticalMarginAlignment="TrimSideBearings"
                    Text="SC" />
            </ListView.Header>
            <i:Interaction.Behaviors>
                <i:BehaviorCollection>
                    <core:EventTriggerBehavior EventName="DragItemsStarting">
                        <core:InvokeCommandAction Command="{x:Bind ViewModel.OnSpotlightDragItemsStartingCommand}" />
                    </core:EventTriggerBehavior>

                    <core:EventTriggerBehavior EventName="DragItemsCompleted">
                        <core:InvokeCommandAction Command="{x:Bind ViewModel.OnSpotlightDragItemsCompletedCommand}" />
                    </core:EventTriggerBehavior>

                    <core:EventTriggerBehavior EventName="DragOver">
                        <core:InvokeCommandAction Command="{x:Bind ViewModel.OnSpotlightDragOverCommand}" />
                    </core:EventTriggerBehavior>

                    <core:EventTriggerBehavior EventName="Drop">
                        <core:InvokeCommandAction Command="{x:Bind ViewModel.OnSpotlightDropCommand}" />
                    </core:EventTriggerBehavior>

                    <core:EventTriggerBehavior EventName="SelectionChanged">
                        <core:InvokeCommandAction Command="{x:Bind ViewModel.OnChatSelectedNavigateCommand}" />
                    </core:EventTriggerBehavior>
                </i:BehaviorCollection>
            </i:Interaction.Behaviors>
        </ListView>
        <Grid
            x:Name="dropGridSpotlight"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            AllowDrop="True"
            Visibility="Collapsed">
            <Grid
                Margin="4"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Background="{ThemeResource AcrylicBackgroundFillColorBaseBrush}"
                BorderBrush="DarkGoldenrod"
                BorderThickness="1"
                CornerRadius="5"
                Opacity="0.8" />
            <BitmapIcon
                x:Name="dropIconSpotlight"
                Width="32"
                Height="32"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Foreground="DarkGoldenrod"
                UriSource="ms-appx:///Assets/Icons/torch-64.png" />
            <i:Interaction.Behaviors>
                <i:BehaviorCollection>
                    <core:EventTriggerBehavior EventName="DragOver">
                        <core:InvokeCommandAction Command="{x:Bind ViewModel.OnSpotlightDragOverCommand}" />
                    </core:EventTriggerBehavior>

                    <core:EventTriggerBehavior EventName="Drop">
                        <core:InvokeCommandAction Command="{x:Bind ViewModel.OnSpotlightDropCommand}" />
                    </core:EventTriggerBehavior>
                </i:BehaviorCollection>
            </i:Interaction.Behaviors>
        </Grid>
    </Grid>
</NavigationViewItem>

Answer 1

Typically, at the exact moment I give in trying to solve the problem after days of scratching my head I do a bit of a deep dive into the Live View Tree in VS2022 whilst debugging the project and find a couple of properties of the ListViewItem that needed to be changed to make it perfectly meet my requirements.

However obviously as above, when I set them it removes the default styling for the ListViewItem control. Then I stumbled upon the concept of BasedOn for styles... Revelation.

 <ListView.ItemContainerStyle>
     <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
         <Setter Property="MinWidth" Value="0" />
         <Setter Property="Padding" Value="12,0,0,0" />
     </Style>
 </ListView.ItemContainerStyle>

The above basiaclly inherits from the default ListViewItem style and allows you to simply amend a couple of the properties without losing the other style properties.

So just on the off chance anyone else runs into the same issue here it is in all its glory.