Xamarin Forms CarouselView too long

Question

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>

Answer 1

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".