How to remove space in CarouselView (CarouselView inside ScrollView)

Issue

I use CarouselView inside ScrollView because I only want CarouselView to bind Imgae only. More info shows up as I scroll the page. I don’t want to Binding other information inside CarouselView because I only want other information to display outside CarouselView.

<ScrollView VerticalOptions"FillAndExpand" VerticalScrollBarVisibility"Never" HorizontalScrollBarVisibility"Never" HorizontalOptions"FillAndExpand">
<StackLayout Padding"0" Margin"0">
    <StackLayout Padding"0" Margin"0">
        <CarouselView IndicatorView"indicatorView"
                ItemsSource"{Binding ProductInfo.ProductImages}">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding"0" Margin"0" BackgroundColor"#fff">
                        <Frame HasShadow"False" Padding"0" Margin"15,0" CornerRadius"7" IsClippedToBounds"True">
                            <control:AspectRatioContainer AspectRatio"1">
                                <Image HorizontalOptions"Fill"  Aspect"AspectFill" Source"{Binding Images}"/>
                            </control:AspectRatioContainer>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <StackLayout Margin"0">
            <IndicatorView x:Name"indicatorView"
                IndicatorColor"#ddd"
                Margin"0,-100,0,0"
                Padding"0"
                BackgroundColor"Transparent"
                SelectedIndicatorColor"#333"
                HorizontalOptions"Center"
                IndicatorSize"5"/>
        </StackLayout>
    </StackLayout>
    <StackLayout Padding"15" Margin"0,0,0,5" BackgroundColor"#fff">
        <Label Text"{Binding ProductInfo.Name}" FontFamily"{StaticResource QuicksandBold}" FontSize"16" HorizontalTextAlignment"Start" TextColor"#333"/>
        <StackLayout>
            <Label TextType"Html" Text"{Binding ProductInfo.ContentsSmall}" HorizontalOptions"Start" HorizontalTextAlignment"Start" FontFamily"{StaticResource QuicksandRegular}" FontSize"13" TextColor"#333"></Label>
        </StackLayout>
    </StackLayout>
</StackLayout>
</ScrollView

However I want to remove the whitespace below.

Please help me any solution except setting HeightRequest of CarouselView. Tks!

Solution

Since the image is square , we just need to let the height equal to the width on CarouselView , so we can bind HeightRequest with a value(screen width) .

Xaml

 <CarouselView x:Name"cView" IndicatorView"indicatorView" HeightRequest"{Binding ScreenWidth}">

Code behind

public double ScreenWidth { get; set; }
public Page1()
{
    InitializeComponent();
    var mainDisplayInfo  DeviceDisplay.MainDisplayInfo;
    ScreenWidth  mainDisplayInfo.Width/mainDisplayInfo.Density;
    this.BindingContext  this;
}

Answered By – ColeX – MSFT