Full height of content in listview with ItemsWrapGrid as panel template windows 10 app

Question

I am trying to have the content of gridview cell to stretch the height so there is no scrolling within the cell.

Here's my code:

<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>   

and here is my data template:

<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>

How can I achieve this? Any recommendations? This is how it looks right now.

Answer 1

I can reproduce your issue: it seems that ItemsWrapGrid uses some strange logic when row heights are calculated automatically. You can set its ItemHeight property manually to avoid this problem, but this solution is far from being elegant.

Alternatively you can use the WrapPanel XAML Control from the UWP Community Toolkit as an ItemsPanelTemplate for your ListView to make the items stretch their height to fit the content

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

however, your grid is going to have a lot of empty space then

If that's not what you want, you can eliminate most of the empty spaces by changing the orientation of the WrapPanel from horizontal to vertical

and even further by not grouping your items into separate controls by category