3

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

EuroEager
  • 167
  • 1
  • 2
  • 11
  • Its always best to show some code, so people have some context for what you are trying to do. **Add to question** your `` declaration, plus your `ItemsLayout` if you have one. – ToolmakerSteve Apr 19 '22 at 20:46
  • Could show us what's your text looks like? – Adrain Apr 20 '22 at 05:42
  • I thought the default vertical spacing wasn't zero, but I see that it is - so that isn't the cause of the space. To make sure that is true, put `BackgroundColor="Red"` on your `Label` - is there any gap between the Red areas? If not, then either the Label or the font includes some space by default. Try `` - experiment with different numbers. – ToolmakerSteve Apr 20 '22 at 17:31
  • Do you see all the other comments (by you and several by me)? I cannot see them, suddenly gone!! (But I can see your last one regarding default vertical spacing) – EuroEager Apr 20 '22 at 17:38
  • Using GridItemsLayout there is now a red gap between first and second line, nothing on the following lines. (Can i add a screenshot or similar to SO?) – EuroEager Apr 20 '22 at 17:40
  • Playing with HeightRequest and Margin seems to have effect, but only in increasing the spacing (or cutting the text so only upper part of characters are visible) – EuroEager Apr 20 '22 at 17:46
  • you could add your code or screenshots – Adrain Apr 21 '22 at 06:47
  • To add code, screenshots etc. do I have to edit my original question? – EuroEager Apr 21 '22 at 10:38
  • yes the edit is under the question – Adrain Apr 22 '22 at 01:03
  • Unfortunately, it's a known issue for 7.0 https://github.com/dotnet/maui/issues/12495 and https://github.com/dotnet/maui/issues/15492 – Stephen Quan Jul 18 '23 at 09:30

1 Answers1

0

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>
gaggleweed
  • 204
  • 3
  • 5