ListView inside CarouselView is not vertical scrolling - xaml

Question

I am having some issues with getting my ListView to be vertical scrollable, which should be default behavior(?).
The Listview is contained in a CarouselTemplate with several other Grid items.
The Mainpage containing the CarouselView:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>
<ContentPage.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CarouselView
Margin="0,25,0,0"
HorizontalScrollBarVisibility="Never"
IndicatorView="indicatorView"
IsBounceEnabled="False"
ItemsSource="{Binding ActivityData}"
VerticalOptions="Center">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource CarouselWorkaround}">
<local:PCSActivityLocationBrowserTemplate />
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView
x:Name="indicatorView"
Padding="0,0,0,30"
IndicatorColor="{DynamicResource TranslucidBlack}"
SelectedIndicatorColor="{DynamicResource BaseTextColor}"
VerticalOptions="Start" />
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
The Carousel Template (PCSActivityLocationBrowserTemplate):
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView>
<ContentView.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- PAGE BG -->
<BoxView Grid.Row="1" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- CONTENT -->
<Grid Padding="0,0,0,10" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="250" />
<RowDefinition Height="140" />
<RowDefinition Height="450" />
</Grid.RowDefinitions>
<Grid Margin="20">
<!-- CARD -->
<grial:CardView
Grid.Row="0"
CornerRadius="5"
HeightRequest="180"
Style="{StaticResource ResponsiveLandscapeMarginStyle}"
VerticalOptions="End">
<StackLayout
Padding="20"
HorizontalOptions="Center"
VerticalOptions="End">
<!-- Rest of code left out for simplicity -->
</StackLayout>
</grial:CardView>
</Grid>
<!-- AVATAR -->
<Grid
Grid.Row="0"
HorizontalOptions="Center"
VerticalOptions="Start">
<!-- Rest of code left out for simplicity -->
</Grid>
<!-- BG -->
<BoxView Grid.Row="1" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- FLOORS -->
<grial:Repeater
Grid.Row="1"
BackgroundColor="Red"
HeightRequest="130"
ItemsSource="{Binding CurrentFloors}"
Orientation="Horizontal"
ScrollPadding="10"
Spacing="30"
VerticalOptions="CenterAndExpand">
<grial:Repeater.ItemTemplate>
<DataTemplate>
<local:PCSActivityFloorsItemTemplate />
</DataTemplate>
</grial:Repeater.ItemTemplate>
</grial:Repeater>
<!-- BG -->
<BoxView Grid.Row="2" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- Rooms -->
<ListView
Grid.Row="2"
CachingStrategy="RecycleElement"
HasUnevenRows="false"
ItemsSource="{Binding CurrentRooms}"
RowHeight="60"
SeparatorVisibility="None"
VerticalOptions="Start">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:PCSActivityRoomsItemTemplate />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</Grid>
</ContentView.Content>
</ContentView>
The Rooms section (Listview) is where the vertical scrolling is not working:
There is probably a quite simple solution to it but I can't seem to find it after several adjustments, like setting the third RowDefinition height (the row which contains the ListView) to *, or to Auto, by doing that the ListView disappears entirely from the screen.

Answer 1

Finally found the problem, after testing it a bit more by moving things around (thanks to #LucasZhang-MSFT hint to test the ListView directly in the Carousel), which I should have done a bit more before posting.
TLDR;
There were several things wrong.
The first thing I removed was the outer Grid in PCSActivityLocationBrowserTemplate, this contained 1 fixed row with a height of 120 and 1 row with a * height. This Grid was implemented to have a custom Navigation bar (with a height of 120), though this was not used (anymore) so that outer Grid was unnecessary.
The second was that the Third row (the row of my ListView) was set to a fixed height, by setting this to * the List became scrollable.
I kept noticing that my third row (with the ListView) would disappear from my screen when I set it's height to * (which I did as described in .2). This was caused by the CarouselView in the Main page because it had it's VerticalOptions set to Center. So it would always center the whole, and because the screen size is increased with the non-fixed height of the third row, the whole shebang would be centered and thus not visible anymore. Setting the VerticalOptions to Start fixed this.
The fixed code:
The Main page containing the CarouselView:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>
<ContentPage.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CarouselView
Margin="0,25,0,0"
HorizontalScrollBarVisibility="Never"
IndicatorView="indicatorView"
IsBounceEnabled="False"
ItemsSource="{Binding ActivityData}"
VerticalOptions="Start">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource CarouselWorkaround}">
<local:PCSActivityLocationBrowserTemplate />
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView
x:Name="indicatorView"
Padding="0,0,0,30"
IndicatorColor="{DynamicResource TranslucidBlack}"
SelectedIndicatorColor="{DynamicResource BaseTextColor}"
VerticalOptions="Start" />
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
The Carousel Template (PCSActivityLocationBrowserTemplate):
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView>
<ContentView.Content>
<Grid>
<!-- CONTENT -->
<Grid Padding="0,0,0,10" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="250" />
<RowDefinition Height="140" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Margin="20">
<!-- CARD -->
<grial:CardView
Grid.Row="0"
CornerRadius="5"
HeightRequest="180"
Style="{StaticResource ResponsiveLandscapeMarginStyle}"
VerticalOptions="End">
<!-- Info -->
<StackLayout
Padding="20"
HorizontalOptions="Center"
VerticalOptions="End">
<!-- Name -->
<Label
FontSize="18"
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationName}" />
<!-- {Binding Profile.Name} -->
<!-- Description -->
<Label HorizontalTextAlignment="Center" Text="{Binding ClientName}" />
<!-- {Binding Profile.Description} -->
<!-- Social -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Column 1 -->
<StackLayout Grid.Column="0" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalFloors}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 1629 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="ETAGES" />
</StackLayout>
<!-- Column 2 -->
<StackLayout Grid.Column="1" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalRooms}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 235 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="RUIMTES" />
</StackLayout>
<!-- Column 3 -->
<StackLayout Grid.Column="2" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalElements}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 2963 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="ELEMENTEN" />
</StackLayout>
</Grid>
</StackLayout>
</grial:CardView>
</Grid>
<!-- AVATAR -->
<Grid
Grid.Row="0"
HorizontalOptions="Center"
VerticalOptions="Start">
<!-- Image -->
<local:CircleCachedImage
BorderColor="{DynamicResource BasePageColor}"
BorderSize="{OnPlatform Android=8,
iOS=15}"
HeightRequest="100"
Source="resource://PCS2.APP.SharedImages.PCSDefaultClientImage.png"
WidthRequest="100" />
<!-- Badge -->
<local:Badge
BackgroundColor="#22c064"
HorizontalOptions="Center"
Text="10+"
TextColor="{DynamicResource InverseTextColor}"
TranslationX="40"
VerticalOptions="Start" />
</Grid>
<!-- FLOORS -->
<grial:Repeater
Grid.Row="1"
BackgroundColor="Red"
HeightRequest="130"
ItemsSource="{Binding CurrentFloors}"
Orientation="Horizontal"
ScrollPadding="10"
Spacing="30"
VerticalOptions="CenterAndExpand">
<grial:Repeater.ItemTemplate>
<DataTemplate>
<local:PCSActivityFloorsItemTemplate />
</DataTemplate>
</grial:Repeater.ItemTemplate>
</grial:Repeater>
<!-- Rooms -->
<ListView
Grid.Row="2"
BackgroundColor="Blue"
CachingStrategy="RecycleElement"
HasUnevenRows="false"
ItemsSource="{Binding CurrentRooms}"
RowHeight="60"
SeparatorVisibility="None"
VerticalOptions="Start"
VerticalScrollBarVisibility="Always">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:PCSActivityRoomsItemTemplate />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</ContentView.Content>
</ContentView>