UI Elements Displaying Collections Display Extra Space

Nathan Sokalski 4,116 Reputation points
2020-12-02T02:45:24.193+00:00

I admit that I am new to Xamarin.Forms, but I think I know enough to ask this question. While trying to create the UI (MainPage.xaml), all the elements I have tried to use so far (such as CollectionView & FlexLayout) display extra space at the end and/or right, making the UI very ugly, sometimes other elements end up completely hidden because of this. The only workaround I have found is to specify explicit WidthRequest and/or HeightRequest values, which is extremely inefficient, especially if the value must be calculated or is dynamic. I have seen multiple bug posts about this on GitHub, such as (among multiple others):

https://github.com/xamarin/Xamarin.Forms/issues/6451
https://github.com/xamarin/Xamarin.Forms/issues/5763
https://github.com/xamarin/Xamarin.Forms/issues/5942

I found everything in UWP much easier, and even the small parts of Xamarin.Android Xaml that I have learned (including RecyclerView) are much easier to layout appropriately. I'm debating whether or not to continue frustrating myself spending time looking for workarounds while trying to learn Xamarin.Forms (once I even realize that I need one, since right now I won't even always know if I'm just doing it wrong), or just wait until MAUI. MAUI will be based on Xamarin.Forms, so I don't know if I start studying buggy code or wait for the new stuff. Right now, I'll probably just need to manually calculate the sizes so I can start writing & testing as much of the codebehind as possible.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,293 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Dave Murray 1 Reputation point
    2020-12-04T12:36:11.303+00:00

    Not seen this in any of my apps. Check you don't have an extra item in your collection. And, how are you setting HorizontalOptions and VerticalOptions on your CollectionView / FlexLayout? Try setting them to Fill.

    I'd recommend looking at Debug Rainbows. It will help you see where your layout is placed on screen and what the space actually is.

    https://github.com/sthewissen/Xamarin.Forms.DebugRainbows

    0 comments