WinUI 3 ListViewItem 宽度不符合 ListView 宽度

Question

个人评论

这实际上让我有点疯狂；我似乎无法获得预期的结果，因此非常感谢任何帮助。

问题陈述

我在 NavigationViewItem 中有一个 ListView，因为我希望能够在 Shell 视图中使用项目重新排序和拖放功能，而当前 NavigationView 控件并不真正支持此功能。

我遇到的问题是，当 NavigationView 控件位于其最小视图中时 (

IsPaneOpen="false"

)，ListView 不支持宽度更改，并且子项也不支持 ListView 宽度。

Tldr：当NavigationView Control IsPaneOpen =“false”发生时，按钮仅显示图像而不是文本，并且它居中，正确的填充/边距圆角仍然，就像NavigationViewItem一样。其中之一：

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

基本上是这样的：

看起来像这样：

我尝试过的事情

我尝试过使用 ItemContainerStyle 但这会删除 样式和选择指示器。

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

我也尝试过手动设置所有内容的宽度，所以我 至少可以看到什么可以复制我想要实现的目标并且 这也是不行的。

到目前为止我看过的一些内容：

1. 如何使用表格之类的DataTemplate在UWP ListView中动态缩放列宽

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

3. WinUI 列表控件，允许动态项目大小、重新排序和虚拟化

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

通常，在我绞尽脑汁想解决问题的那一刻，我会在调试项目的同时深入研究 VS2022 中的实时视图树，并找到 ListViewItem 的几个属性：需要进行更改以使其完全满足我的要求。

但是显然如上所述，当我设置它们时，它会删除

ListViewItem

控件的默认样式。然后我偶然发现了

BasedOn

风格的概念......启示。

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

上面基本上继承了默认的

ListViewItem

样式，并且允许您简单地修改几个属性而不会丢失其他样式属性。

因此，万一其他人遇到同样的问题，这就是它的全部荣耀。