AndreiMisiukevich / CardView

CardsView | CarouselView | CoverflowView | CubeView for Xamarin.Forms
MIT License
710 stars 114 forks source link

How can I configure CoverFlowView to have no space between items? #417

Closed sschaub closed 2 years ago

sschaub commented 2 years ago

I have tried playing with the Margin of my template view and PositionShiftValue of CoverFlowView, following the guidance you gave in #366. However, when I configure these values so that there is no space between the items on one platform / form factor, other form factors have space between or have overlapping images.

AndreiMisiukevich commented 2 years ago

Hmm, so if you set Margin = "80, 0" and PositionShiftValue="160" it doesn't work?

Also, I'd propose to set Horizontal and Vertical options to FillAndExpand (for card item views)

sschaub commented 2 years ago

Here's what I have:

<cards:CoverFlowView ItemsSource="{Binding FeaturedItems}"
                HeightRequest="100"
                PositionShiftValue="160"
                SelectedIndex="{Binding SlidePosition}"
                Margin="0">
    <cards:CarouselView.ItemTemplate>
        <DataTemplate x:DataType="vms:FeaturedItemViewModel">
            <forms:CachedImage Source="{Binding ImageUrl}"
                                Margin="80,0"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand"
                                Aspect="AspectFit">
            </forms:CachedImage>
        </DataTemplate>
    </cards:CarouselView.ItemTemplate>
</cards:CoverFlowView>

There is a noticeable gap between the items when rendered on some devices.

AndreiMisiukevich commented 2 years ago

Can you change cachedImage with BoxView (colored ones) and see if gap goes

sschaub commented 2 years ago

Switching to BoxView eliminates the gap. Also, changing the image Aspect="AspectFill" eliminates the gap.

Thanks for the tip!