Increasing the spacing between Items in ListView, Maui/Xamarin-CodePudding

I am trying to create a simple ListView with custom ItemTemplate which consists of a Grid with some information. Each item in the ListView should have a larger space than that of the default. I've tried messing around with Margins/Padding but can't seem to create a larger space between items. Does anyone have any tips how to achieve a greater whitespace between items in a ListView? From what I've found online and in documentation seems to be lacking. But there must be something I'm missing since this should be a pretty obvious use case of a ListView.

Code in the xaml page which the user sees:


<ListView ItemsSource="{Binding List, Mode=TwoWay}"
          VerticalOptions="CenterAndExpand"
          HorizontalOptions="CenterAndExpand"
          HasUnevenRows="True"
          WidthRequest="455"
          SeparatorVisibility="Default"
          SeparatorColor="Transparent"
          BackgroundColor="WhiteSmoke"
          IsGroupingEnabled="True"
          >
    <ListView.ItemTemplate >
        <DataTemplate>
            <ViewCell>
              <controls:CustomItemTextTable NameText="Name Name"
                                            IdentityText="NUMBER IDENTITY"
                                            IssuerText="TEST"
                                            IssuerOrganisationText="TEST ORG"
                                            CreatedText="2022-10-10 20:24"
                                            ExpireText="2042-04-06 22:58"
                                            StatusText="Inactive"
                                            TrustLevelText="3"
                                            IsClippedToBounds="False"
                                            />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Code in the CustomItemTextTable

<Border StrokeThickness="0"
        StrokeShape="RoundRectangle 10"
        BackgroundColor="WhiteSmoke"
        VerticalOptions="FillAndExpand"
        HorizontalOptions="Fill"
        Padding="11"
        >
 
    <Grid ColumnDefinitions="155,10,171"
          RowDefinitions="*,*,*,*,*,*,*,*"
          Padding="0,0,0,0"
          >
        <Label Text="Name"
               Grid.Row="0"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Identity"
               Grid.Row="1"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Issuer"
               Grid.Row="2"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Issuer org"
               Grid.Row="3"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Created"
               Grid.Row="4"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Expire"
               Grid.Row="5"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Status"
               Grid.Row="6"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="TrustLevel"
               Grid.Row="7"
               Grid.Column="0"
               HorizontalOptions="End"
                         />
        <Label Grid.Row="0"
               Grid.Column="2"
               x:Name="name"
               />
        <Label Grid.Row="1"
               Grid.Column="2"
               x:Name="identity"
               />
        <Label Grid.Row="2"
               Grid.Column="2"
               x:Name="issuer"
               />
        <Label Grid.Row="3"
               Grid.Column="2"
               x:Name="issuerOrg"
               />
        <Label Grid.Row="4"
               Grid.Column="2"
               x:Name="created"
               />
        <Label Grid.Row="5"
               Grid.Column="21"
               x:Name="expire"
               />
        <Label Grid.Row="6"
               Grid.Column="2"
               x:Name="status"
               />
        <Label Grid.Row="7"
               Grid.Column="2"
               x:Name="trustLevel"
               />
    </Grid>

Any help/tips would be greatly appreciated...

I tried increasing Padding/Margin in both Xaml-pages.

CodePudding user response：

IMPORTANT: You don't show the first few lines of CustomItemTextTable's xaml -
The header element that defines x:Class. Remove any BackgroundColor there, or change it to something obvious like "HotPink", to see if it is filling an area you are trying to make "show through".

That XAML doesn't give LayoutManager enough information to do what you want:

You've told Grid to make all rows same height (*), but nowhere is a total height stated.
Then you ask for a Margin, but that gets taken from the default total height assigned to the item.

The safest solution is to explicitly Request a Height. Make it large enough to include the desired Margin:

<CustomItemTextTable HeightRequest="210" Margin="0,0,0,10" ... />

NOTE: An alternative location for HeightRequest and/or Margin is in the custom view's header:

<SomeUIClass
  xmlns:...
  x:Class="...CustomItemTextTable"
  HeightRequest="210"      <-- these can be above x:Class property if you prefer.
  Margin="0,0,0,10"
/>

If that doesn't fix it, remove that Margin. Instead, add a TRANSPARENT area within the item. Thus allowing color behind to show through. There are various ways to do this. Here is one:

<StackLayout
  <Border ...    <-- your existing code
  </Border>
  <BoxView HeightRequest="10" />
</StackLayout>