将“Horizo​​ntalContentAlignment”设置为在列表视图的 ItemcontainerStyle 内拉伸不会超出视口

Question

在以下 XAML 和 XAML.cs 中，我将列表视图项的水平内容对齐方式拉伸。但是，我观察到的是，只有当内容在视口内时，它才能很好地拉伸。如果内容超出视口并且水平滚动查看器可见时，项目不会进一步拉伸

对于为什么会发生这种情况以及任何解决方案有什么想法吗？我在下面附上了相同的屏幕截图

XAML

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ListView SelectionMode="Single" x:Name="TestView"  Grid.Row="1"                             
                  ScrollViewer.VerticalScrollMode="Enabled"  
                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollMode="Enabled"  
                  ScrollViewer.HorizontalScrollBarVisibility="Auto"                  
                  ShowsScrollingPlaceholders="False"
                  ItemsSource="{x:Bind strList}">
            <ListView.ItemContainerTransitions>
                <TransitionCollection/>
            </ListView.ItemContainerTransitions>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                    <Setter Property="Margin" Value="0"/>
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="BorderBrush" Value="#F0F0F0"/>
                    <Setter Property="BorderThickness" Value="1"/>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsStackPanel Orientation="Vertical" 
                                     />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
            <!--  END-->
        </ListView>
    </Grid>

XAML.cs（用于测试目的）

public sealed partial class MainPage : Page
    {
 private List<string> strList = new List<string>();
        public MainPage()
        {
            this.InitializeComponent();
            for(int i=1;i<50;i++)
            {
                if (i == 1)
                    strList.Add(i.ToString() + " sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd sdffsdfsdfsd sdf sdfsdf sdfdsf sdfdsf sfsd fsd sdfsdf sdfsdf  dsfsdf sfdsf sdfdsf sdfsdsf sdfdsfsd ");
                else
                    strList.Add(i.ToString());
            }
        }
}

Answer 1

我先提供两个解决方案：

1. 使用TextWrapping 或TextTrimming 将TextBlock 的宽度限制为不超过可见区域，例如：

<ListView.ItemTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding}" TextWrapping="Wrap"/>
    </DataTemplate>
</ListView.ItemTemplate>

1. 使用ScrollViewer作为容器

<ScrollViewer Grid.Row="1" 
         HorizontalAlignment="Stretch" 
         HorizontalScrollBarVisibility="Auto" 
         HorizontalScrollMode="Enabled">

    <ListView SelectionMode="Single" x:Name="TestView"                              
                  ItemsSource="{x:Bind strList}">
        ...
    </ListView>

</ScrollViewer>

现在我们来谈谈原因。

关键是可见区域。在使用ScrollViewer之前，可见区域只有窗口大小。渲染时使用 UWP 作为参考。

使用ScrollViewer作为容器后，理论上可视区域是无限的，UWP会按照ScrollViewer的宽度进行渲染，这样就可以让所有的列表项都具有相同的宽度。

但同时，由于可视区域是无限的，ListView会一次性加载所有列表项，所以当数据集较大时，不建议使用ScrollViewer作为@的容器987654331@.

最好的问候。