[Bug] CarouselView pushes other layouts and consumes all space

[davidortinau]

Description

CarouselView is consuming all vertical space in my layout, unless I give it a size. But I don't know the height to give it b/c I want it to size to my content. Please let me size to my content, either the height or the width perhaps?

<StackLayout Margin="15">
            <Frame BackgroundColor="White"
                   Padding="10"
                   BorderColor="Black"
                   CornerRadius="0">
                <CarouselView>
                    <CarouselView.ItemsSource>
                        <x:Array Type="{x:Type x:String}">
                            <x:String>rei_01.jpg</x:String>
                            <x:String>rei_02.jpg</x:String>
                            <x:String>rei_03.jpg</x:String>
                            <x:String>rei_04.jpg</x:String>
                        </x:Array>
                    </CarouselView.ItemsSource>
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding .}"/>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>
            </Frame>

        </StackLayout>

Expected Behavior

CarouselView sizes to my content and provides a consistent layout across different screen sizes.

Actual Behavior

CarouselView consumes ALL space in the layout, even pushing other layouts out of view. I have to set a height to achieve the results I want on this screen, but it will look wrong on other sizes screens.

Basic Information

• Version with issue: 4.4.0-pre2
• Platform Target Frameworks:
  • Android: 10

Screenshots

All consuming height:

Fixed height (guessing):

Reproduction Link

https://github.com/davidortinau/CarouselGallery/blob/master/CarouselGallery/CarouselGallery/Views/REIPage.xaml

[jfversluis]

Confirmed that this is happening. Tried a couple of different things to make it size to content, but it seems to always take the full available height. Happens on Android.

On iOS is NREs altogether, stack trace is below. Not sure it it's related to this though. iOS error seems more of an Shell issue

at System.Reflection.RuntimeConstructorInfo.InternalInvoke (System.Object obj, System.Object[] parameters, System.Boolean wrapExceptions) [0x00018] in /Users/builder/jenkins/workspace/xamarin-macios/xamarin-macios/external/mono/mcs/class/corlib/System.Reflection/RuntimeMethodInfo.cs:944
at System.RuntimeType.CreateInstanceMono (System.Boolean nonPublic, System.Boolean wrapExceptions) [0x00095] in /Users/builder/jenkins/workspace/xamarin-macios/xamarin-macios/external/mono/mcs/class/corlib/ReferenceSources/RuntimeType.cs:185
at System.RuntimeType.CreateInstanceSlow (System.Boolean publicOnly, System.Boolean wrapExceptions, System.Boolean skipCheckThis, System.Boolean fillCache) [0x00009] in /Users/builder/jenkins/workspace/xamarin-macios/xamarin-macios/external/mono/mcs/class/corlib/ReferenceSources/RuntimeType.cs:155
at System.RuntimeType.CreateInstanceDefaultCtor (System.Boolean publicOnly, System.Boolean skipCheckThis, System.Boolean fillCache, System.Boolean wrapExceptions, System.Threading.StackCrawlMark& stackMark) [0x00027] in /Users/builder/jenkins/workspace/xamarin-macios/xamarin-macios/external/mono/mcs/class/referencesource/mscorlib/system/rttype.cs:5770
at System.Activator.CreateInstance (System.Type type, System.Boolean nonPublic, System.Boolean wrapExceptions) [0x00039] in /Users/builder/jenkins/workspace/xamarin-macios/xamarin-macios/external/mono/mcs/class/referencesource/mscorlib/system/activator.cs:206
at System.Activator.CreateInstance (System.Type type, System.Boolean nonPublic) [0x00000] in /Users/builder/jenkins/workspace/xamarin-macios/xamarin-macios/external/mono/mcs/class/referencesource/mscorlib/system/activator.cs:190
at System.Activator.CreateInstance (System.Type type) [0x00000] in /Users/builder/jenkins/workspace/xamarin-macios/xamarin-macios/external/mono/mcs/class/referencesource/mscorlib/system/activator.cs:134
at Xamarin.Forms.ElementTemplate+<>c__DisplayClass4_0.<.ctor>b__0 () [0x00000] in d:\agent\1\s\Xamarin.Forms.Core\ElementTemplate.cs:26
at Xamarin.Forms.ElementTemplate.CreateContent () [0x00031] in d:\agent\1\s\Xamarin.Forms.Core\ElementTemplate.cs:82
at Xamarin.Forms.Internals.DataTemplateExtensions.CreateContent (Xamarin.Forms.DataTemplate self, System.Object item, Xamarin.Forms.BindableObject container) [0x00001] in d:\agent\1\s\Xamarin.Forms.Core\DataTemplateExtensions.cs:19
at Xamarin.Forms.ShellContent.Xamarin.Forms.IShellContentController.GetOrCreateContent () [0x00036] in d:\agent\1\s\Xamarin.Forms.Core\Shell\ShellContent.cs:61
at Xamarin.Forms.Platform.iOS.ShellSectionRootRenderer.LoadRenderers () [0x00024] in d:\agent\1\s\Xamarin.Forms.Platform.iOS\Renderers\ShellSectionRootRenderer.cs:145
at Xamarin.Forms.Platform.iOS.ShellSectionRootRenderer.ViewDidLoad () [0x0003b] in d:\agent\1\s\Xamarin.Forms.Platform.iOS\Renderers\ShellSectionRootRenderer.cs:63
at (wrapper managed-to-native) UIKit.UIApplication.UIApplicationMain(int,string[],intptr,intptr)
at UIKit.UIApplication.Main (System.String[] args, System.IntPtr principal, System.IntPtr delegate) [0x00005] in /Library/Frameworks/Xamarin.iOS.framework/Versions/13.8.2.2/src/Xamarin.iOS/UIKit/UIApplication.cs:86
at UIKit.UIApplication.Main (System.String[] args, System.String principalClassName, System.String delegateClassName) [0x0000e] in /Library/Frameworks/Xamarin.iOS.framework/Versions/13.8.2.2/src/Xamarin.iOS/UIKit/UIApplication.cs:65
at CarouselGallery.iOS.Application.Main (System.String[] args) [0x00001] in /Users/jfversluis/Downloads/CarouselGallery-master/CarouselGallery/CarouselGallery.iOS/Main.cs:17

[Mikilll94]

@rmarinho
Ping. Any progress on this? With this bug CarouselView is unusable.

[rmarinho]

After talking with @ez I think this a issue we need to look also with CollectionView , we will see how to fix this.

[dersia]

As a work-around it works if you put it into a stacklayout

[Codelisk]

Also waiting for this one. :)

[Dids]

It seems like Xamarin.Forms 5.0 only made this worse? The previous workarounds weren't exactly reliable before, but now they seem to be entirely unusable.

What's more, there seems to be a new warning coming from iOS when using CarouselView (only when using the workarounds mentioned before):

The behavior of the UICollectionViewFlowLayout is not defined because:
the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
The relevant UICollectionViewFlowLayout instance is <Xamarin_Forms_Platform_iOS_CarouselViewLayout: 0x7fd10f47dd50>, and it is attached to <UICollectionView: 0x7fd10fe91400; frame = (0 0; 390 161.667); clipsToBounds = YES; autoresize = W+H; gestureRecognizers = <NSArray: 0x600001cb9650>; layer = <CALayer: 0x600001909160>; contentOffset: {0, 0}; contentSize: {0, 364.33333333333331}; adjustedContentInset: {0, 0, 0, 0}; layout: <Xamarin_Forms_Platform_iOS_CarouselViewLayout: 0x7fd10f47dd50>; dataSource: <Xamarin_Forms_Platform_iOS_CarouselViewController: 0x7fd10f47df80>>.
Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.

[bikrambhandari48]

Is it ever going to be fixed. Why is XF so buggy???

[thomasgalliker]

@bikrambhandari48 There are currently a lot of open issues. The fact that XF has become more an more complex and the transition over to .NET MAUI does probably not speed up things. However, the communication could be improved drastically: What is the current state of the issue? Is anyone actively working on it? By when (estimate) can we expect a solution? 🤷🏼‍♂️

[Painwraith]

having same issue. cant believe not fixed. wow.

[IeuanWalker]

@Painwraith i switch to CardView instead

[bares43]

Any news? This issue is 1,5 years old 😢

[BlueRaja]

The fact that CarouselView is literally unusable has led a lot of other groups to design their own replacements. So far I've seen

• HorizontalListView (despite the name, it can be used vertically)
• CardView
• CarouselView.FormsPlugin

[BlueRaja]

[EDIT] To anyone reading this, do yourself a favor and just don't use CarouselView at all. After spending another 3 hours trying to get it to work, and running into no less than three more CRITICAL bugs (Example), I installed CardView and had a working control in 5 minutes.

---

(original post)

@Dids I was able to get the workaround by @thomasgalliker working in the latest Xamarin by calling .Measure() instead of .Height.

Example:

MyControl.xaml

<CarouselView x:Name="myCarousel">
  <CarouselView.ItemTemplate>
    <DataTemplate>
      <Label SizeChanged="OnLabelSizeChanged">Hello world!</Label>
    </DataTemplate>
  </CarouselView.ItemTemplate>
</CarouselView>

MyControl.xaml.cs

private void OnLabelSizeChanged(object sender, EventArgs e)
{
     var element = (VisualElement) sender;
     var requestedSize = element.Measure(myCarousel.Width, 0, MeasureFlags.IncludeMargins).Requested;
     myCarousel.HeightRequest = Math.Max(myCarousel.HeightRequest, requestedSize.Height);
}

Then you have the fun job of making sure to set myCarousel.HeightRequest = -1 any time it's possible for your items' heights to change 😭

[kalyan-pidugu-by]

@PureWeen any update on this issue?

[skadookkunnan]

Looks like this issue is back with the CarouselView in XF 5 SDK.

I am also stuck with the carousel view taking up a lot of space of the content in iOS and can't load the entire page properly.

Please fix this.

[IeuanWalker]

XF carousel control also has accessibility issues.

When scrolling with the screenreader on android it jumps to carousel panels that are not visible to the user and the layout gets all jumbled up.

I'm using CardView now and accessibility issues were fixed in this commit - AndreiMisiukevich/CardView@c46b6c9

[FabriBertani]

Any update on this issue ? @jfversluis @rmarinho @jsuarezruiz @PureWeen

[EduardoReisDev]

no solution?