listviewwinui-3listviewitemwinui

WinUI ListView Item Height Not Working Below a Certain Threshold

Despite setting the margins, heights, min heights and so on for the ListView item template, there is a certain minimum height threshold where the ListView seems to create its own container of a certain height (probably in the 20-30 range) and the item template is simply floating within that, as happens with the XAML below. As you can see from the image, the text FontSize is 12, but the item container height is more than 2.5 times that.

I would like to create a ListView that is compact and where each item has a total height of around 18. Possible?

enter image description here

   <ListView
        x:Name="MyListView"
        Margin="15,15,0,0"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid
                    Height="15"
                    MinHeight="15"
                    Margin="0"
                    Padding="0"
                    BorderThickness="0">
                    <TextBlock
                        Height="15"
                        MinHeight="15"
                        Margin="0"
                        Padding="0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        FontSize="12"
                        Text="{Binding}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.Items>
            <x:String>Item 1</x:String>
            <x:String>Item 2</x:String>
        </ListView.Items>
    </ListView>
Solution

  • You can style the ListViewItem based on the DefaultListViewItemStyle:

    <ListView ...>
    <ListView.Resources>
        <Style
            BasedOn="{StaticResource DefaultListViewItemStyle}"
            TargetType="ListViewItem">
            <Setter Property="MinHeight" Value="18" />
            <Setter Property="Height" Value="18" />
            <Setter Property="FontSize" Value="12" />
        </Style>
    </ListView.Resources>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <TextBlock Text="{x:Bind Mode=OneWay}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

    You can learn about DefaultListViewItemStyle in the generic.xaml file.

    UPDATE

    Let me show you a few alternatives:

    <ListView ...>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <ListViewItem
                Height="18"
                MinHeight="18"
                FontSize="12">
                <TextBlock Text="{x:Bind Mode=OneWay}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

    <ListView ...>
    <ListView.ItemContainerStyle>
        <Style
            BasedOn="{StaticResource DefaultListViewItemStyle}"
            TargetType="ListViewItem">
            <Setter Property="MinHeight" Value="18" />
            <Setter Property="Height" Value="18" />
            <Setter Property="FontSize" Value="12" />
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <TextBlock Text="{x:Bind Mode=OneWay}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

    <Page ...>

    <Page.Resources>
        <Style
            x:Key="CustomListViewItemStyle"
            BasedOn="{StaticResource DefaultListViewItemStyle}"
            TargetType="ListViewItem">
            <Setter Property="MinHeight" Value="18" />
            <Setter Property="Height" Value="18" />
            <Setter Property="FontSize" Value="12" />
        </Style>
    </Page.Resources>

    <ListView ...
        ItemContainerStyle="{StaticResource CustomListViewItemStyle}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="x:String">
                <TextBlock Text="{x:Bind Mode=OneWay}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</Page>