listview中的内容全高，ItemsWrapGrid作为面板模板windows 10 app

Question

我试图让gridview单元格的内容拉伸高度，以便单元格内没有滚动。

这是我的代码：

<Grid Grid.Row="1" Padding="50 10 50 10">
    <ListView IsTapEnabled="False"
        Background="White"
        SizeChanged="categoryListView_SizeChanged"
        x:Name="categoryListView"
        Height="auto"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        ItemsSource="{Binding Source={StaticResource stores}, Path=CollectionGroups}"
        ItemTemplate="{StaticResource CategoriesList}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
</Grid>   

这是我的数据模板：

<DataTemplate x:Key="CategoriesList">
    <Grid x:Name="AlphabetGrid" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0 0 20 0">
        <TextBlock x:Name="CategoryName" FontSize="24" Text='{Binding Group.Key}' Foreground="#412141" FontWeight="Bold"  HorizontalAlignment="Left" TextAlignment="Left"/>
        <Grid Margin="0 30 0 0">
            <ListView ItemsSource="{Binding Group.Items}" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="4*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" x:Name="unit_number" FontSize="15"  Text='{Binding unit}' Foreground="red"  HorizontalAlignment="Left" TextAlignment="Left"/>
                            <TextBlock Grid.Column="1" x:Name="name" FontSize="15"  Text='{Binding name}' Foreground="red"  HorizontalAlignment="Left" TextAlignment="Left"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </Grid>
</DataTemplate>

我怎样才能做到这一点？有什么建议？ 这就是它现在的样子。

Answer 1

我可以重现您的问题：当自动计算行高时，似乎 ItemsWrapGrid 会使用一些奇怪的逻辑。您可以手动设置其 ItemHeight 属性以避免此问题，但此解决方案远非优雅。

或者，您可以使用WrapPanel XAML Control中的UWP Community Toolkit ItemsPanelTemplate 作为 ListView ，以使项目拉伸其高度以适应含量

<ListView>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <controls:WrapPanel/>
        <ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ListView>

然而，你的网格将会有很多空白空间

如果这不是你想要的，你可以通过将 WrapPanel 的方向从水平变为垂直来消除大部分空白

，甚至不按类别将您的项目分组到单独的控件中