CollectionView rowspacing

2.8k Views Asked by At

I try to use a CollectionView to display simple tabular text. It seems like the (visual) minimum spacing between rows in a CollectionView is quite large. In my case I'm using some Labels within a DataTemplate, all with default values (except for the bindings of text of course) with default font size and the visually empty (valuable screen surface) is close to twice the height of the characters in the text. Is it possible to make such a tabular view denser? (Not necessarily by a CollectionView, but any View which is capable of displaying such data)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:vm="clr-namespace:MauiApp1.ViewModels" x:Class="MauiApp1.MainPage" Title="MainPage">
  <ContentPage.BindingContext>
    <vm:CollectionViewModel/>
  </ContentPage.BindingContext>
  <Grid>
    <CollectionView VerticalScrollBarVisibility="Always" SelectionMode="Multiple" ItemsSource="{Binding Items}" BackgroundColor="Black">
      <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" />
      </CollectionView.ItemsLayout>
      <CollectionView.ItemTemplate>
        <DataTemplate>
          <Grid ColumnDefinitions="150,150,*">
            <Label TextColor="White" Grid.Column="0" Text="{Binding Name}" />
          </Grid>
        </DataTemplate>
      </CollectionView.ItemTemplate>
    </CollectionView>
  </Grid>
</ContentPage>

enter image description here

1

There are 1 best solutions below

0
On

For some reason the minimum height of a CollectionView item is 40 so if your label is less than that, it ends up with a lot of space around it.

If you just want a list of labels, you can put your label in a ViewCell and use a ListView instead.

<ListView ItemsSource="{Binding Items}" BackgroundColor="Black">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label TextColor="White" Text="{Binding Name}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>