Develop Reference

Xamarin Forms CarouselView too long

Elongated Carousel View
I have used Xamarin's native CarouselView as below and it is retrieving data as it is supposed to.
The problem is that the individual columns are too long (elongated more than the content). I want an effect similar to that of shopping sites where the individual column height fits the content as with ASP.NET DIV Card. I have tried to use two carousels to see if it is a bug but both carousels expand beyond the height needed.
I have tried using StackLayout the problem still persists. Is there a simple template that you can direct me to or some correction that is needed?
//James
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="ApplicationName.Views.HomePage">
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="tlbarLogin" Text="Sign Up/Login" Clicked="Launch_Login"/>
</ContentPage.ToolbarItems>
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Accent">#96d1ff</Color>
</ResourceDictionary>
</ContentPage.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout BackgroundColor="#2C5C2C" VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
<SearchBar BackgroundColor="White" Placeholder="Search items..." PlaceholderColor="LightGray"
CancelButtonColor="black"
TextColor="Black"
FontSize="Medium"
/>
</StackLayout>
<ScrollView Grid.Row="1">
<!--<StackLayout Orientation="Vertical" Padding="30,24,30,24" Spacing="10">-->
<Grid Margin="0, 5, 0, 0">
<Grid.RowDefinitions>
<!--One RowDefinition in * si useless by the way -->
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackLayout>
<CarouselView x:Name="TheCarousel" PeekAreaInsets="50" Loop="False" Grid.ColumnSpan="5">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="10"
VerticalOptions="Start" >
<StackLayout >
<Image Source="{Binding strImagePath}" Aspect="AspectFill"/>
<Label Text="{Binding strLocalisedString}" FontSize="20"/>
</StackLayout>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<CarouselView x:Name="TheCarousel2" PeekAreaInsets="50" Loop="False" Grid.ColumnSpan="5">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="10"
HeightRequest="50"
VerticalOptions="Start" >
<StackLayout >
<Image Source="{Binding strImagePath}" Aspect="AspectFill"/>
<Label Text="{Binding strLocalisedString}" FontSize="20"/>
</StackLayout>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
<!--</StackLayout>-->
</Grid>
</ScrollView>
</Grid>
</ContentPage>

Adding Height to Carousel as suggested by Jason worked
I simply added the HeightRequest value to the CarouselVeiw elements and they adjusted themselves to the set height of "250".

What is this big black bar at the bottom?

I am building an app in .NET MAUI. I started building it for a previous android version (API 22). The layout is fine for that version. But when I installed it on a later version of android (API 33), the vertical stack layout wasn't aligning as I wanted it to be.
I thought the problem was with how I arranged all these elements. So, I rewrote the XAML, but still didn't achieve what I was looking for. The black bar still remains at the bottom.
<?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:viewmodels="clr-namespace:WordsAssistantMAUI.ViewModels"
x:DataType="viewmodels:DefinitionViewModel"
x:Class="WordsAssistantMAUI.Views.DefinitionView"
Title="Get Definition"
BackgroundColor="#7d83cf">
<VerticalStackLayout
VerticalOptions="Start" HorizontalOptions="Center" Margin="20,20" Spacing="20">
<!--Search bar-->
<SearchBar Text="{Binding Input}" IsEnabled="{Binding IsNotBusy}"
SearchCommand="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:DefinitionViewModel}}, Path=SearchDefinitionCommand}"/>
<!--Definition and Navigation buttons-->
<Grid ColumnDefinitions="*, 10*, *"
ColumnSpacing="15" VerticalOptions="Center" RowDefinitions="*,*">
<Button Text="b"
HeightRequest="50" WidthRequest="50"
Grid.Column="0" Grid.Row="0"
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:DefinitionViewModel}}, Path=PreviousDefinitionCommand}"/>
<ScrollView Grid.Row="0" Grid.Column="1" HeightRequest="125">
<Label Text="{Binding Definition}"
Style="{StaticResource DefintionStyle}"/>
</ScrollView>
<Button Text="n"
Grid.Row="0" Grid.Column="2"
HeightRequest="50" WidthRequest="50"
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:DefinitionViewModel}}, Path=NextDefinitionCommand}"/>
<ActivityIndicator
IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}"
Grid.Column="1"
Grid.Row="1"/>
</Grid>
<!--Synonyms and Antonyms-->
<Grid ColumnDefinitions="*,*" Style="{StaticResource ResponsesListGrid}">
<VerticalStackLayout Grid.Column="0" HorizontalOptions="Center">
<Label Text="Synonyms"
Style="{StaticResource ResponsesLabel}"/>
<Frame HeightRequest="300"
Style="{StaticResource ResponsesFrame}">
<ScrollView HorizontalOptions="Start">
<FlexLayout BindableLayout.ItemsSource="{Binding synonyms}"
Style="{StaticResource ResponsesFlexLayout}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource ResponseStyling}">
<Label Text="{Binding .}" Style="{StaticResource Responses}"/>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
<BindableLayout.EmptyViewTemplate>
<DataTemplate>
<Frame HasShadow="True" BackgroundColor="LightGray"
Padding="5">
<Label Style="{StaticResource Responses}"
Text="Nothing to show right now!"/>
</Frame>
</DataTemplate>
</BindableLayout.EmptyViewTemplate>
</FlexLayout>
</ScrollView>
</Frame>
</VerticalStackLayout>
<VerticalStackLayout Grid.Column="1" HorizontalOptions="Center">
<Label Text="Antonyms"
Style="{StaticResource ResponsesLabel}"/>
<Frame HeightRequest="300"
Style="{StaticResource ResponsesFrame}">
<ScrollView HorizontalOptions="Start">
<FlexLayout BindableLayout.ItemsSource="{Binding antonyms}"
Style="{StaticResource ResponsesFlexLayout}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource ResponseStyling}">
<Label Text="{Binding .}" Style="{StaticResource Responses}"/>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
<BindableLayout.EmptyViewTemplate>
<DataTemplate>
<Frame HasShadow="True" BackgroundColor="LightGray"
Padding="5">
<Label Style="{StaticResource Responses}"
Text="Nothing to show right now!"/>
</Frame>
</DataTemplate>
</BindableLayout.EmptyViewTemplate>
</FlexLayout>
</ScrollView>
</Frame>
</VerticalStackLayout>
</Grid>
<Button Text="Clear all" WidthRequest="150"
IsEnabled="{Binding IsNotBusy}"
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:DefinitionViewModel}}, Path=ClearAllCommand}"/>
</VerticalStackLayout>
</ContentPage>

How to make a FloatingActionButton work on top of a ListView and position it correctly

I am trying to get a SuaveControls.FloatingActionButton to work on top of a ListView following the example on this page - https://devlinduldulao.pro/how-to-create-a-floating-action-button/
My ListView is inside a StackLayout so I decided to wrap them into an AbsoluteLayout
Here is the View/XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
xmlns:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<AbsoluteLayout>
<StackLayout Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</AbsoluteLayout>
</ContentPage>
But with this approach two things are happening
When the device is in Landscape mode the ListView is not growing as it did before adding the AbsoluteLayout
Dont know how to position the FloatingActionButton to always stay on the lower right corner of any device
I have also tried placing the FloatingActionButton inside the current StackLayout but it does not float is just added below or above the listview as a regular "row" like is shown here
Feel free to use the comments if something is not clear.

You can remove absolute layout since you can see that your layout doesn't fully expand at landscape mode.
You can try this one
<MainLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
//YourTopBar
// YourListView
<StackLayout HorizontalOptions="End"
VerticalOptions="End"
Spacing="0"
Margin="15">
<YourFloatingButton />
</StackLayout>
</MainLayout>
The mainlayout can be a grid or stacklayout

You can modify the layout to use Grid and AbsoluteLayout to wrapper the listview and Floating button. So it is somethig like the following:(As I don't have your list datasource, to be simple, I just put a mock list)
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
xmlns:local="clr-namespace:App51"
x:Class="App51.MainPage">
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand">
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" ></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="8*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="FAB" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="24" FontAttributes="Bold" BackgroundColor="LightGray"
TextColor="CadetBlue" />
<AbsoluteLayout Grid.Row="1">
<ListView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,1,1,1"
VerticalOptions="FillAndExpand"
SeparatorColor="Black"
RowHeight="50"
BackgroundColor="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="Binding Name"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="Binding Name"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<views:FloatingActionButton Grid.Row="1" Grid.Column="1"
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="End"
VerticalOptions="End"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
Margin="10" >
</views:FloatingActionButton>
</AbsoluteLayout>
</Grid>
</StackLayout>
</ContentPage>
And the result is like this:

Based on #Swift_Talt answer and this discussion- https://forums.xamarin.com/discussion/52420/create-a-layered-page-layering-controls
I found this solution using a Grid of one (1) cell where the ListView (background) and the FloatingActionButton are on the same unique cell
This is how it looks:
And here is the View/Page
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
xmlns:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="End" Spacing="0" Margin="15">
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</StackLayout>
</Grid>
</ContentPage>

Fill the screen with a listview

i need a trick, i have in my xamarin.forms app a listview, but it don't feel my screen, and it's orrible to see it now, because it take off a quarter of screen without nothing, could you helo me?
XAML:
<ContentPage.Content>
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="WhiteSmoke">
<ListView x:Name="ItemsListView"
HeightRequest="000" <--this is the bad thing
VerticalOptions="FillAndExpand"
HasUnevenRows="true"
IsPullToRefreshEnabled="true"
Refreshing="OnRefresh"
CachingStrategy="RecycleElement"
ItemSelected="OnItemSelected"
SeparatorVisibility="Default"
BackgroundColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Clicked="MenuItem_Clicked" CommandParameter="{Binding .}" Text="Delete" IsDestructive="True" />
</ViewCell.ContextActions>
<ViewCell.View>
<Grid Margin="0,0,0,15">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal" BackgroundColor="White" Padding="10">
<controls:CircleImage Source="{Binding UserPicture}" WidthRequest="40" HeightRequest="40" Aspect="AspectFit" VerticalOptions="Start"/>
<StackLayout Orientation="Vertical" Padding="5" Spacing="20">
<StackLayout Orientation="Vertical" Spacing="2">
<Label Text="{Binding Title}" LineBreakMode="TailTruncation" Style="{DynamicResource ListItemTextStyle}"
FontSize="18" FontAttributes="Bold" TextColor="Black"/>
<Label Text="{Binding UserName}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="14" />
</StackLayout>
<BoxView HeightRequest="1" WidthRequest="250" BackgroundColor="LightGray"/>
<StackLayout Orientation="Horizontal" VerticalOptions="End" >
<StackLayout Orientation="Horizontal">
<Image Source="people.png" WidthRequest="20" HeightRequest="20" />
<Label Text="{Binding Posti}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="14" />
<Label Text="/" LineBreakMode="NoWrap" Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="14" />
<Label Text="{Binding Participants}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="14" />
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<fab:FloatingActionButtonView
ImageName="add.png"
ColorNormal="#2196F3"
ColorPressed="#2196F3"
ColorRipple="#2196F3"
x:Name="FloatingActionButtonAdd"
IsVisible="False"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize"/>
</AbsoluteLayout>
</ContentPage.Content>
I want the heghtrequest will scale automatically with the device or have a standard heght for any devices

Because you are using absolutelayout around your listview you should try as below. add these on your listview VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1"
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="WhiteSmoke">
<ListView x:Name="ItemsListView" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,1,1,1"
HasUnevenRows="true"
IsPullToRefreshEnabled="true"
Refreshing="OnRefresh"
CachingStrategy="RecycleElement"
ItemSelected="OnItemSelected"
SeparatorVisibility="Default"
BackgroundColor="Transparent">
read more about absolutelayout here. in my code
AbsoluteLayout.LayoutBounds="0,0,1,1"
tells you to start from position vertical 0, horizontal 0 and align the UI as large as the screen. you dont need to use HeightRequest in this case as it will take the screen size dynamically.

Here is simple style and code you can change it to your own
<RelativeLayout><ListView x:Name="MessagesListView" HasUnevenRows="True" IsPullToRefreshEnabled ="true" SeparatorVisibility="None"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.92,Constant=0}">
</ListView></RelativeLayout>

how can i make expandable listView in Grid?

I want make ui like this image.
but I don't know how can I make expandable listview in grid.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ElronWebtoon_Test.myLibrary.LibTab" BackgroundColor="White">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition x:Name="TopGrid"/>
<RowDefinition />
<RowDefinition x:Name="menuRow"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="GlobalLayout" >
<Grid.RowDefinitions>
<RowDefinition x:Name="TopBtn_Grid"/>
<RowDefinition x:Name="menu_Grid"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalOptions="Start" >
<Label x:Name="labelBox1" Text="LabelBox1" Font="Bold, 16" TextColor="Black" HorizontalOptions="Start" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="Center" Grid.Column="0" BackgroundColor="#A8D2F1">
<Label.GestureRecognizers>
<TapGestureRecognizer/>
</Label.GestureRecognizers>
</Label>
<Label x:Name="LabelBox2" Text="LabelBox2" Font="Bold, 16" TextColor="Black" HorizontalOptions="End" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="Center" Grid.Column="0" BackgroundColor="#A8D2F1">
<Label.GestureRecognizers>
<TapGestureRecognizer />
</Label.GestureRecognizers>
</Label>
</Grid>
<Grid Grid.Row="1" x:Name="libMenu" RowSpacing="0" HorizontalOptions="CenterAndExpand">
<Grid Grid.Column="0" x:Name="menuGrid_1" HorizontalOptions="Center">
<Button BorderRadius="30" BorderColor="Black" BorderWidth="2" BackgroundColor="White" VerticalOptions="Center"/>
<Label x:Name="BtnText1" Text="BtnText1" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center"/>
</Grid>
<Grid Grid.Column="1" x:Name="menuGrid_2" HorizontalOptions="Center">
<Button BorderRadius="30" BorderColor="Black" BorderWidth="2" BackgroundColor="White" VerticalOptions="Center"/>
<Label x:Name="BtnText2" Text="BtnText2" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center"/>
</Grid>
<Grid Grid.Column="2" x:Name="menuGrid_3" HorizontalOptions="Center">
<Button BorderRadius="30" BorderColor="Black" BorderWidth="2" BackgroundColor="White" VerticalOptions="Center"/>
<Label x:Name="BtnText3" Text="BtnText3" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center"/>
</Grid>
</Grid>
</Grid>
<Grid Grid.Row="1" VerticalOptions="Fill" x:Name="inner_Content">
</Grid>
<Grid Grid.Row="2" >
<Grid>
<Button Text="BTN1" Grid.Column="0" />
<Button Text="BTN2" Grid.Column="1"/>
<Button Text="BTN3" Grid.Column="2"/>
<Button Text="BTN4" Grid.Column="3"/>
<Button Text="BTN5" Grid.Column="4"/>
</Grid>
</Grid>
</Grid>
</ContentPage>
this is my sample code.
I want insert expandable listview in Grid, named inner_Content in this code.
but if I searching expandable listview, that only in contentPage.
not in grid.
can you help me?

I guess you are looking something like an accordion control to be used in Xamarin.
Check the URL below:
https://www.codeproject.com/Articles/1088093/Simple-Accordion-User-Control-in-Xamarin-Forms
Hope this helps, mark this as an answer if you think this meets your requirement.
Regards,
N Baua