We Keep Coding

Increasing the spacing between Items in ListView, Maui/Xamarin

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.

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>

Change CollectionView EmptyView Text Color

I'm trying to change a CollectionView's EmptyView Text's font color. It seems to automatically change from black to white when switching between the native device's Light theme and Dark theme. TextColor is not an attribute, unfortunately.
I'm new to Xamarin.Forms, I'd like to apologize, first, if I haven't displayed enough code, please let me know if there's anything else you need.
My code is located in the AppShell.xaml
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<Grid HeightRequest="{Binding ShellHeight}"
ColumnSpacing="0"
RowSpacing="0"
RowDefinitions="Auto, Auto"
ColumnDefinitions="45, Auto">
<CollectionView
Margin="15,0,0,0" Grid.Row="1" Grid.Column="0"
Grid.ColumnSpan="2" Grid.RowSpan="2"
ItemsSource="{Binding ShellModelList}"
SelectionMode="Single"
EmptyView="No items to display" //<-- trying to change this text's color
SelectionChanged="OnCollectionViewSelectionChanged">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="1"
RowSpacing="10"
ColumnDefinitions="25, Auto"
RowDefinitions="35">
<Image Grid.Column="0">
<Image.Source>
<FontImageSource
x:Name="imgMenuItem"
FontFamily="{StaticResource NextupFont}"
Glyph="{Binding IconName}"
Color="{StaticResource NuCyanBlue}"
Size="8" />
</Image.Source>
</Image>
<Label x:Name="lblMenuItem"
Grid.Column="1"
Margin="10,0,0,0"
Text="{Binding Text}"
TextColor="{AppThemeBinding Light={DynamicResource NuCyanBlue}, Dark={DynamicResource NuBlack}}"
FontSize="12"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>

Well, I think what you should be doing is creating your custom EmptyView.
<CollectionView.EmptyView>
<StackLayout
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Label
FontAttributes="Bold"
FontSize="18"
TextColor="Black"
HorizontalTextAlignment="Center"
Text="No items to display" />
</StackLayout>
</CollectionView.EmptyView>
Good luck! feel free to get back if you have any queries.

Xamarin Faster then listview

Im buildining a novel-manga app.
When i came to novels there was about 2000 chapthers and i need to render them all at once.
Im using a listview to render them but its to damnt slow.
I was wondering if there is a faster solution like a renderer or somthing i could build that will work faster.
Here is my current XAML
<ListView ItemsSource="{Binding Chapters}"
x:Name="grdChapters"
ItemSelected="GrdChapters_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="5" HeightRequest="30">
<StackLayout Orientation="Horizontal">
<Label TextColor="Black" Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="StartAndExpand" Style="{StaticResource header}" FontAttributes="None" />
<Image Source="right.png" HorizontalOptions="End" IsVisible="{Binding Completed}" WidthRequest="16" HeightRequest="16" Aspect="AspectFit" />
</StackLayout>
<BoxView Style="{StaticResource lightLine}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

The RecycleElementAndDataTemplate should improve your performance, because even though you're not using any dynamic images, the datatamplate is the same for all of the items in the list and it'll get optimized.
If that doesn't help, I'd recommend using the glidex library for Xamarin.Android, it makes scrolling a lot smoother.

How to set the width of the fixed columns in xamarin

I have a ListView that shows chemical residues, the problem is that when I add a particular residue ("BORRAS") my column configuration goes to shit as shown in the following figure
I think there is a nomenclature to set the width of the columns, how can I solve this? How can I make my ListView look homogenous?
I attach my ListView.XAML:
<ListView
SelectionMode="None"
Margin="5,0,10,10"
IsRefreshing="{Binding IsRefreshing}"
HeightRequest="{Binding AltoListaResiduos}"
SeparatorVisibility="None"
HasUnevenRows="true"
ItemsSource="{Binding ListaResiduos}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<!--NOMBRE RESIDUO-->
<ColumnDefinition Width="3*"/>
<!--CANTIDAD ESTIMADA-->
<ColumnDefinition Width="1.5*"/>
<!--NOMBRE ESTIMADA-->
<ColumnDefinition Width="1.5*"/>
<!--CANTIDAD CONTENEDOR-->
<ColumnDefinition Width="1.5*"/>
<!--NOMBRE CONTENEDOR-->
<ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding NombreResiduo}"
HorizontalOptions="FillAndExpand"
MaxLines="3"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="0"
Margin="4,0">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double" iOS="11" Android="11" />
</Label.FontSize>
</Label>
<Label Text="{Binding formattedCantidadEstimada}"
HorizontalTextAlignment="End"
FontSize="Small"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="1"
Margin="4,0">
</Label>
<Label Text="{Binding Estimado}"
HorizontalTextAlignment="End"
FontSize="Micro"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="2"
Margin="4,0">
</Label>
<Label Text="{Binding CantidadContenedor}"
HorizontalTextAlignment="End"
FontSize="Small"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="3"
Margin="4,0">
</Label>
<Label Text="{Binding Contenedor}"
HorizontalTextAlignment="End"
FontSize="Micro"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="4"
Margin="4,0">
</Label>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm new to Xamarin.Forms and I hope this question helps others, how can I make my list look the same with all the waste? (independent of the name) any help for me?

You shouldn't need the StackLayout at all since you are defining a Grid with the appropriate columns.
This should help your Grid to span properly and fill the entire space

I have a feeling this is happening because you are using VerticalTextAlignment now for some reason both the TextAlignment Properties(H, V) have weird behaviors in them, even though Xamarin says for VerticalTextAlignment that it
Gets or sets the vertical alignment of the Text property.
I would rather use YAlign instead as it does not have this behavior and Xamarin says about YAling that it
Gets or sets the vertical alignment for the Text inside of the Label bound.
Secondly, when you use a grid layout a define the columns and rows you should never use AndExpand types as you have already defined the max area and it will not overlay that. Now what the LayoutOptions docs say is CenterAndExpand or FillAndExpand do is
A LayoutOptions structure that describes an element that is centered and expands.
Also, Remove the StackLayout just keep the Grid in your ViewCell.
<Label Text="{Binding Contenedor}"
XAlign="End"
FontSize="Micro"
YAlign="Center"
TextColor="{StaticResource das.color.texto}"
Grid.Column="4"
Margin="4,0"/>
Want to learn the best practices with Xamarin forms? Check my blog here: https://heartbeat.fritz.ai/techniques-for-improving-performance-in-a-xamarin-forms-application-b439f2f04156

ListView Tapped removes button background color on data template Xamarin.Forms

I don't know why, but when I tap any ListView item, the Button inside it's template loses the background color.
I use default ViewCell inside ListView. Is this a Xamarin.Forms bug?
I have this problem only on iOS.
<ListView x:Name="lv" Grid.Row="2" HasUnevenRows="true" BackgroundColor="White" ItemTapped="OnItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="16" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="{Binding .,Converter={StaticResource IndexColorConverter}">
<StackLayout VerticalOptions="Center">
<Label Text="{Binding Auditorium}" FontSize="18" TextColor="Black"/>
<ContentView Padding="0,-5,0,0">
<Label Text="{Binding Title}" FontSize="16" TextColor="Black"/>
</ContentView>
<StackLayout Orientation="Horizontal">
<Button WidthRequest="100" Text="{Binding ButtonOverviewText}" TextColor="White" BackgroundColor="{Binding ButtonColor}" CommandParameter="{Binding .}" Clicked="Handle_Clicked"/>
<Button WidthRequest="100" Text="{Binding ButtonOverviewText}" TextColor="White" BackgroundColor="{Binding ButtonColor}" CommandParameter="{Binding .}" Clicked="Handle_Clicked" />
</StackLayout>
</StackLayout>
<Label Text="{Binding Coordinator}" FontSize="14" TextColor="Gray"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

There was an old issue that I filed fora similar bug: https://bugzilla.xamarin.com/show_bug.cgi?id=27502.
However, the specific scenario you mention is expected behavior on iOS and happens in native (non-Xamarin.Forms) projects too. See the comment here. You might consider disabling the UITableViewCellSelectionStyle of your cells with UITableViewCellSelectionStyle.None. Here is an example of a cell renderer. You can set the cell.SelectionStyle here. This would stop the gray highlight of the cell. If you don't want that it could be a workaround to keep your button colors.

My workaround for this problem is the following.
<Grid>
<BoxView BackgroundColor="{Binding ButtonColor}"/>
<Button Text="{Binding ButtonOverviewText}" TextColor="White" BackgroundColor="Transparent" CommandParameter="{Binding .}" Clicked="Handle_Clicked"/>
</Grid>