删除CarouselView WhiteSpace

Question

我正在尝试实现一个CarouselView来在我的应用程序上显示一组图像。显然，无论我尝试什么组合，都无法删除CarouselView底部的空格。

我已经为CarouselView红，GridGreen和IndicatorView蓝设置了BackgroundColor属性，以查看它们中的哪一个正在消耗屏幕的其余部分，尽管缺少StackLayout，似乎是CarouselView或Grid导致了不想要的行为。

这是我的XAML代码，在ViewModel上几乎什么都没有，只有一个用于图像收集的模拟数据库：

<ContentPage.Content>
    <Grid ColumnDefinitions="*"
          RowDefinitions="Auto,Auto,Auto,1*">
        <Label Grid.Row="0" Grid.Column="0"
               Text="CarouselView Test"
               TextColor="Black"
               FontAttributes="Bold"
               FontSize="20"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand"
               Padding="10" />

        <CarouselView Grid.Row="1" Grid.Column="0" BackgroundColor="Red" HeightRequest="{Binding ScreenWidth}"
                      x:Name="TheCarousel"
                      ItemsSource="{Binding ImageSourceCollection}"
                      IndicatorView="indicatorView">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Grid RowDefinitions="Auto" ColumnDefinitions="Auto" BackgroundColor="Green" HorizontalOptions="Center" VerticalOptions="Center">
                        <Image Grid.Row="0" Grid.Column="0" Source="{Binding .}" />
                    </Grid>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

        <IndicatorView Grid.Row="2" Grid.Column="0" BackgroundColor="Blue"
                       x:Name="indicatorView"
                       IndicatorColor="LightGray"
                       IndicatorSize="10"
                       SelectedIndicatorColor="Black" />
    </Grid>
</ContentPage.Content>

这是我当前构建的屏幕截图，CarouselView/Grid占用了大部分屏幕空间：

​

​

Answer 1

我认为如果你想让你的indicatorView和你的CarouselView保持一致，你需要把Space between rows and columns设置为0

Answer 2

CarouselView在大小计算上有一些奇怪的行为，在你的场景中，唯一的方法是在代码(视图模型)中获得它(模板)所需的高度，并将其绑定到CarouselView上的HeightRequest。

Xaml

 <CarouselView HeightRequest="{Binding xxx}"

查看模型

public double xxx { 
   get 
   {
      // calculate the height according to the width by ratio
      return height;
   } 
}