删除 CarouselView 空白答案

【问题标题】：Remove CarouselView WhiteSpace删除 CarouselView 空白
【发布时间】：2022-11-19 10:44:12
【问题描述】：

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

我已经为CarouselView[红色]、Grid[绿色]（在 DataTemplate 内）和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 占用了大部分屏幕空间：

【问题讨论】：

您需要指定一些具体的高度值，否则旋转木马和网格将占用所有可用空间。因为轮播包含一个在运行时动态加载的图像，所以在计算布局时它不知道需要多大。

标签： xamarin.forms carousel

【解决方案1】：

CarouselView 在尺寸计算上有一些奇怪的行为，在您的场景中，唯一的方法是在代码（视图模型）中获取它（模板）所需的高度，并将其绑定到 CarouselView 上的 HeightRequest。

Xaml

 <CarouselView HeightRequest="{Binding xxx}"

查看模型

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

【讨论】：

然后 CarouselView 将删除不需要的空间，IndicatorView 将粘在底部。

【解决方案2】：

如果你想让你的indicatorView坚持你的CarouselView，我认为你需要将Space between rows and columns设置为零

【讨论】：

当我使用 StackLayout 时会发生同样的事情，所以我不确定设置该属性会有什么不同。
如果是这样，那么您需要使用AbsoluteLayout 并使其浮动在您的CarouselView 前面
StackLayout 的默认间距为 6。根据您的问题，不清楚您指的是指示器视图上方的空白区域还是其他内容

【解决方案3】：

那么真正对我有用的是什么。我将 Grid Row Definition 设置为 ex.(300)，然后将 Carousel Height Request 设置为 350。

我正在根据屏幕宽度设置图像宽度，但我手动尝试过（400）并且仍然有效，不要感到困惑。

<Grid RowDefinitions="300">
    <CarouselView x:Name="carouselView"
                  Grid.Row="0"
                  ItemsSource="{Binding HomeCarousel}">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Frame HasShadow="False"
                           CornerRadius="0"
                           Margin="0"                
                           HorizontalOptions="CenterAndExpand" 
                           VerticalOptions="CenterAndExpand"
                           HeightRequest="350">
                        <SwipeView>
                            <Image Source="{Binding ImageSource}"                                 
                                   Aspect="AspectFill"
                                   WidthRequest="{DynamicResource FullScreenWidth}"                         
                                   HorizontalOptions="Center" />
                        </SwipeView>
                    </Frame>
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
</Grid>

【讨论】：