Xamarin.forms: [Bug] CarouselView/CollectionView (iOS Only) Shows Extra White Space On Top & Left When Shouldn't Be

Created on 18 Dec 2019  路  3Comments  路  Source: xamarin/Xamarin.Forms

Description

I'm applying a CarouselView inside of a GridLayout and the ItemTemplate (currently a stack layout) should go edge to edge to the left, top, and right edges of the screen. There should be no padding, insets, or margins. However, it seems that on iOS only, the left and top edges contains some white space, approximately 2 pixels (see screenshots). When you scroll through, the white spaces remain, but there shouldn't be any. Android does not have this issue and renders as expected.

Steps to Reproduce

  1. Open the attached solution.
  2. Run the Android application.
  3. Scroll and see how all items render edge to edge correctly.
  4. Run the iOS application.
  5. Scroll and see how there's white spaces on the left and top edges when there shouldn't be.

Expected Behavior

iOS should render like Android (see screenshot)
CarouselView_Android

Actual Behavior

iOS contains white space on the top and left edges (see screenshot)
CarouselView_iOS

Basic Information

  • Version with issue: 4.4.0.991265
  • Last known good version: Unknown
  • IDE: Visual Studio for Mac 2019 8.3.11 (Build 1)
  • Platform Target Frameworks:

    • iOS: 13.6.0.12

  • Nuget Packages: Xamarin Essentials
  • Affected Devices: All iOS Devices

Screenshots

(See Above)

Reproduction Link

CarouselViewBugForiOS.zip

collectionview 4 high impact iOS 馃崕 bug

Most helpful comment

So this seems some issue with layout and CollectionView not specific to CarouselView.

Well try to figure it out but here's my workaround right now. Wrap it on a Frame.

<Frame BackgroundColor="{Binding BackgroundColor}" CornerRadius="0" HasShadow="False">
         <StackLayout>
                <Label 
                        HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                        HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
                        Text="{Binding Name}" />
         </StackLayout>
</Frame>

All 3 comments

Confirmed also with 4.5.5.74 nightly

So this seems some issue with layout and CollectionView not specific to CarouselView.

Well try to figure it out but here's my workaround right now. Wrap it on a Frame.

<Frame BackgroundColor="{Binding BackgroundColor}" CornerRadius="0" HasShadow="False">
         <StackLayout>
                <Label 
                        HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                        HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
                        Text="{Binding Name}" />
         </StackLayout>
</Frame>

It's actually adding one pixel on top and left, and right and bottom one pixel get out of the frame

Was this page helpful?
0 / 5 - 0 ratings