Remove CarouselView WhiteSpace

user_7825830 0
Viewed 283

I'm trying to implement a CarouselView to display a set of images on my app. Apparently, I can't remove the Whitespace at the Bottom of the CarouselView no matter what combinations I tried.

I've placed BackgroundColor property for CarouselView [Red], Grid[Green] (inside DataTemplate), and IndicatorView [Blue] to see which of them is consuming the rest of the screen despite the lack of StackLayout and it seems that either CarouselView or Grid is causing the unwanted behaviour.

Here's my XAML Code with roughly nothing on the ViewModel but a Mock Database for the Image Collection:

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

And here's a screenshot of my current build with the CarouselView/Grid consuming most of the Screen Space:

enter image description here

carousel xamarin.forms
2 Answers

CarouselView has some weird behaviors on size calculating,in your scenario the only way is get the height it(template) needs in code(viewmodel), and bind it to the HeightRequest on CarouselView .

Xaml

 <CarouselView HeightRequest="{Binding xxx}"

View model

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