ListView inside CarouselView is not vertical scrolling

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.

1. 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.
2. 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.
3. 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>