Xamarin CarouselView PeekAreaInsets and LinearGradientBrush not working

Question

PeekAreaInsets is of Thickness type and I'm trying to make the lateral items of the carousel view have a smaller height. But seems that declaring PeekAreaInsets="20,100" is not working.

Also, I'm trying to declare a gradient on half background of the item, but it is not aplying correctly. So I'm double confused here trying to implement this features...Has anyone encountered this problem yet? Thanks all

<CarouselView ItemsSource="{Binding ListOfGames}" PeekAreaInsets="20,100" HeightRequest="190" IsSwipeEnabled="True" Loop="True" >
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <Frame Grid.Row="0" CornerRadius="10" Margin="0" Padding="0" HasShadow="False" HeightRequest="190" WidthRequest="340" BackgroundColor="Transparent">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Label Grid.Row="1" Text="{Binding Campaign}" FontFamily="Lato-Regular" FontSize="21" TextColor="White"/>
                                <Label Grid.Row="2" Text="{Binding Section}" FontFamily="Lato-Regular" FontSize="13" TextColor="White"/>
                            </Grid>
                            <Frame.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStopCollection>
                                        <GradientStop Color="Transparent" Offset="0.5" />
                                        <GradientStop Color="#b3000000" Offset="1.0" />
                                    </GradientStopCollection>
                                </LinearGradientBrush>
                            </Frame.Background>
                        </Frame>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>

Answer 1

So basically you are misunderstanding the concept of offset when you set the offset of a GradientStop it will immediately start merging with the Color from the first GradientStop.

So for instance take the below code as an example:

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Blue"
                      Offset="0.5" />
        <GradientStop Color="Green"
                      Offset="0.7" />
        <GradientStop Color="Red"
                      Offset="1.0" />
</LinearGradientBrush>

So if you see the above image it immediately starts merging with the Color at 0.5 and 0.7 so for you to make your code work the way you want in my opinion your code would look something like this:

   <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Transparent"
                      Offset="0.5" />
        <GradientStop Color="Transparent"
                      Offset="0.6" />
        <GradientStop Color="#b3000000"
                      Offset="1.0" />
    </LinearGradientBrush>

Answer 2

I have tested it and I found that your PeekAreaInsets property uses a value of 20 by default. Anyway, CarouselView The PeekAreaInsets attribute will use a parameter by default, possibly because the default visible adjacent items in CarouselView are symmetricalFor the PeekAreaInsets attribute, so you may need to set a value just like this:

 <CarouselView ItemsSource="{Binding ListOfGames}"
          PeekAreaInsets="100">
...
 </CarouselView>

For details, please refer to the document:“ https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/layout#partially -visible-adjacent-items".