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