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:
How to dynamically scale column width in UWP ListView with DataTemplate like table
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>
