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>

Add Page Carrousel

I have built a simple and basic app. In order to help people to understand easly the app.
I would like to create a dynamic turorial. My idea is put differents content's pages in a carousel or collection view. And In every content's pages there is an image in background and I will add label and box to explain fonctionalities
Here you will find an example of an image that I will put in background of content page and add label to explain highlighted information
My question are :
I have 3 content pages that I will put backgroud image on it :
home =new HomePage(), Page2 page2 =new Page2() & Page3 page3 =new Page3()
how can i easly add label where I want as the image will be in background ?
how I can put those content pages in carrousel view or collection view ?
Thanks for your help

You can create carousel like this:
<StackLayout Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<CarouselView x:Name="cvTutorial" ItemsSource="{Binding Tutorials}" HorizontalScrollBarVisibility="Never" ItemsUpdatingScrollMode="KeepItemsInView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" PeekAreaInsets="10" IsScrollAnimated="True" PositionChanged="cvTutorial_PositionChanged">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" Padding="0" HorizontalOptions="End">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage BackgroundColor="Transparent" Grid.Row="0" x:Name="tutorialImg" Source="{Binding ImageUrl}" Aspect="AspectFit" HorizontalOptions="FillAndExpand"
Margin="{DynamicResource 50,40,50,00}" HeightRequest="350"/>
<StackLayout Grid.Row="1" HorizontalOptions="Center" VerticalOptions="End" Padding="0,30,0,0" Spacing="15">
<Label Style="{StaticResource RobotoBoldSize24WhiteLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Title}" Padding="10,10,10,0" />
<Label Style="{StaticResource RobotoRegularSize16LightGrayLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Subtitle}" HorizontalOptions="Center"
Padding="50,10,50,10" />
</StackLayout>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Grid x:Name="indicatorGrid" ColumnSpacing="3" HorizontalOptions="Center" VerticalOptions="Start" Padding="{DynamicResource MarginPadding00_20_00_40}"
ColumnDefinitions = "25,25,25">
<pancake:PancakeView x:Name="Dot_1" Grid.Column="0" Style="{StaticResource SelectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_2" Grid.Column="1" Style="{StaticResource UnselectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_3" Grid.Column="2" Style="{StaticResource UnselectedIndicatorStyle}"/>
</Grid>
</StackLayout>
Check working sample - https://rb.gy/mlmh0q

Xamarin Forms How can I inject a ContentPage into Frame element?

I need to inject a ContentPage into Frame element ?
Is this possible to be done ?
I have update my description and I have added the below code
XAML Code
<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"
DrawerWidth ="400"
Position="Right"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
DrawerHeaderHeight="160">
<navigationdrawer:SfNavigationDrawer.ContentView>
<Grid x:Name="mainContentView" BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackLayout BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" Orientation="Horizontal">
<controls:IconButton Text="{i18n:TransIcn HamburgerMenu}" FontSize="30" x:Name="SyncIcon" HorizontalOptions="Start" Clicked="hamburgerButton_Clicked" BackgroundColor="Transparent" TextColor="#FFFFFF" ></controls:IconButton>
<Label x:Name="headerLabel" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="" FontSize="16"/>
</StackLayout>
<ScrollView Grid.Row="1" Margin="0" Padding="0">
<Frame x:Name="contentViewFrame" >
</Frame>
</ScrollView>
</Grid>
</navigationdrawer:SfNavigationDrawer.ContentView>
<navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<!--<Image Source="icon.png" HeightRequest="110" BackgroundColor="#1aa1d6" VerticalOptions="Center" HorizontalOptions="Center"/>-->
<Label Text="James Pollock" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<navigationdrawer:SfNavigationDrawer.DrawerContentView>
<ListView x:Name="listView"
FlowDirection="RightToLeft"
ItemsSource="{Binding Items}"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
ItemSelected="listView_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Margin="0,8,0,0" BackgroundColor="{DynamicResource DashboardItemsDarkSurface}">
<Label Text="{Binding IconText}" HorizontalOptions="Start" FontSize="30" Style="{StaticResource EventaIconStyle}" ></Label>
<Label Text="{Binding Title}" HorizontalOptions="Start" Style="{StaticResource MainHeaderLabel}"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</navigationdrawer:SfNavigationDrawer.DrawerContentView>
<navigationdrawer:SfNavigationDrawer.DrawerFooterView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" >
<StackLayout VerticalOptions="Center"
`enter code here` HorizontalOptions="Center">
<Label Text="Footer View"/>
</StackLayout>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerFooterView></navigationdrawer:SfNavigationDrawer>
Please Let me know if you need more information.
The issue is that I cannot add a ContentPage Object into the ContentView item so could please provide me with some workarounds that I might go for ?

As they have been mentioning in the comments about a content VIEW vs content page, that should work for you with a slight bit of alteration. When I wrote my first Xamarin app, I had several other applications over time that have had nested controls in controls and did not want to find myself in similar.
So, what I did was to create simple user controls with all the stuff I needed on them. So when I was creating a page, I would just add my user control where it physically needed to be placed. This way, should I need to alter the layout of that one user control, it doesn't change the functionality the rest of the way through. Binding was the same because the binding context was the same level, regardless of the VISUAL depth of controls.
So, if you were to create a new Navigation drawer user control of its own context, then slap that in your content page should work for you.

Align label and entry, make entry autosize width and align right in xamarin forms

I'm trying to create a label with entry next to it, I'm trying to achieve the effect below (My entry has the border set to transparent which is why there's no lines under it):
Where the entry text and label text are both aligned, the entry should "grow" to the left as more numbers are typed and move the "£" symbol to the left, this is the best Ive been able to do so far though:
This is using the code:
<StackLayout Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
<Label HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Text="£" FontSize="20" FontFamily="{StaticResource RobotoLight}" TextColor="#C7C7C7" Grid.Column="0"/>
<controls:BorderlessEntry Text="{Binding Income.MonthlyIncome}" WidthRequest="80" HorizontalOptions="EndAndExpand" PlaceholderColor="#C7C7C7" Placeholder="0" VerticalOptions="CenterAndExpand" FontSize="20" FontFamily="{StaticResource RobotoLight}" TextColor="#C7C7C7" Grid.Column="1"/>
</StackLayout>
But despite both being centred, the entry text is just slightly above the label text, I also cant figure out how to make the Entry extend the width depending on the text, or how to align it to the right (or stacklayout end).
I know I've bundled 3 questions into one here, so if anyone can help with even just 1 part of it it'd be a big help.

i test with a simple Entry and Label,you could use HorizontalOptions property and set to EndAndExpand or End to let the label and Entry align right like :
<StackLayout Orientation="Horizontal">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<StackLayout Grid.Column="0" VerticalOptions="Start" HeightRequest="60">
<Label Text="Monthly Income" VerticalOptions="CenterAndExpand"></Label>
</StackLayout>
<StackLayout Grid.Column="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="Start" HeightRequest="60" >
<Label HorizontalOptions="EndAndExpand" VerticalOptions="Center" Text="£" FontSize="20" TextColor="#C7C7C7" />
<Entry PlaceholderColor="#C7C7C7" HorizontalOptions="End" WidthRequest="100" VerticalOptions="Center" FontSize="18" TextColor="#C7C7C7" />
</StackLayout>
</StackLayout>
and the effect like :
and make entry autosize width,maybe you should use custom renderer to achive it

So for the entry to grow on the left side as you mentioned, you can try giving HorizontalOptions as EndAndExpand to the StackLayout, Label and Entry.
Also for "entry text is just slightly above the label text" you can give some Margin from the bottom to the Label. Like Margin="0,0,0,5" you can try with 3,4,5 which works the best for the Margin. This is happening because the Entry Border is set to transparent so it is there but not visible.
Let me know if you have further issues.

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>