locked
CollectionView included additional space at the bottom RRS feed

  • Question

  • User82261 posted

    Hi Team,

    I am using the CollectionView with Xamarin.Forms (4.1.0.483098-pre1) package. Facing an issue "Extra spacing was added at the bottom of the colletionview when the row-height is set to 'Auto' in its parent grid".

    Below is the code I use

        <ContentPage.Content>
            <ScrollView BackgroundColor="Brown">
                <Grid BackgroundColor="Red" RowSpacing="0" Padding="0" ColumnSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
    
                    <CollectionView ItemsSource="{Binding Categories}" Grid.Row="0" BackgroundColor="MistyRose">
                        <CollectionView.ItemsLayout>
                            <GridItemsLayout Span="2" Orientation="Vertical"></GridItemsLayout>
                        </CollectionView.ItemsLayout>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>  
                                <StackLayout Orientation="Vertical" BackgroundColor="Yellow" Padding="12">
                                    <Image Source="{Binding ImagePath}" Aspect="Fill" WidthRequest="160" HeightRequest="150"></Image>
                                    <Label Text="{Binding ImageName}" FontSize="14" FontAttributes="None" TextColor="Black"></Label>
                                </StackLayout>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
    
                    <Label Text="Home" TextColor="Blue" Grid.Row="1" VerticalOptions="Start" VerticalTextAlignment="Start" BackgroundColor="Green"></Label>
    
                </Grid>
            </ScrollView>
        </ContentPage.Content>
    

    The grid clearly has 2 rows and there is a space added between the rows without specifying any properties for that spacing. I haven't checked in UWP and iOS. I cannot post the screenshots because of the restriction "You have to be around for a little while longer before you can post links."

    Tuesday, June 11, 2019 2:30 PM

All replies

  • User180523 posted

    All controls have default values. This includes margin, padding and so on. Unless you make a point of setting those to zero, you have the default values. Try setting them all to zero and see if you still see the problem. If you do... please include a screenshot because it helps other see what is intrinsically a visual problem.

    Tuesday, June 11, 2019 2:37 PM
  • User82261 posted

    Hi ClintStLaurent,

    Thank you for your reply. But I have already zeroed the possible properties.

    RowSpacing="0" Padding="0" ColumnSpacing="0" Margin="0" - for parent Grid
    Margin = "0" - for CollectionView
    

    But the issue/faulty behavior exists

    Thanks Meikandan

    Tuesday, June 11, 2019 2:43 PM
  • User180523 posted

    What about the elements in the template? Those are not being zeroed or set to anything specific. And again - a screen shot pointing out the issue would help a lot.

    Tuesday, June 11, 2019 2:53 PM
  • User82261 posted

    I have tried zeroing every element. As I have mentioned - I could not post screenshots as the forum says "You have to be around for a little while longer before you can post links.". But the code snippet will definitely reproduce the issue

    Tuesday, June 11, 2019 2:59 PM
  • User82261 posted

    I have added an issue for this https://github.com/xamarin/Xamarin.Forms/issues/6497 . attached a sample in it. May this help to reproduce the issue.

    Tuesday, June 11, 2019 3:06 PM
  • User381884 posted

    As far as I know, both CollectionView and ListView will always fill the remaining space. This is the default (and controversial) behavior of both controls. If you really need it to fill only the used space, you'll probably have to do some workaround.

    Refer to: https://xamarinsharp.com/2017/05/20/xamarin-forms-listview-height-change-dynamically-using-mvvm-and-also-solve-empty-space-issue/

    Tuesday, June 11, 2019 5:19 PM
  • User369220 posted

    Did you find a solution for this @MeikandanI ? Having the same issue

    Friday, January 17, 2020 3:43 PM
  • User82261 posted

    HI @Kingamattack

    I have changed the layout used inside the data template to resolve the issue.

    Thanks Meikandan

    Wednesday, January 22, 2020 11:55 AM
  • User76049 posted

    Guessing it was missed that the Spacing was not to zero in the StackLayout

    <StackLayout Orientation="Vertical" BackgroundColor="Yellow" Padding="12" Spacing="0">

    I'd have used a Grid, a little faster, also setting this property causes an extra layout cycle calculation as teh default is Vertical, setting the property again causes an extra calculation

    <StackLayout Orientation="Vertical"

    Wednesday, January 22, 2020 1:14 PM
  • User379711 posted

    Collection view extra space can be avoided by a simple calculation..

    It give extra space at bottom based on no of items in the collection. For example, if you have specify Span="1" in the GridItemsLayout, you will not see any extra spaces. But if you have 12 items and you specify Span="3", then you will see 4X3 view and extra spaces at the bottom. This is becoz, the collection view adjusts its height based on the no of items in the collection and not based on the no of rows as per the specified Span. i.e in this case we have only 4 rows.

    We can fix this by specifying the HeightRequest of the collection view as an observable parameter. This parameter can be calculated based on the no of rows * item height. If the item height is 100 and you have 4 rows with 12 items, the height of the collection view should be 480 (20 for VerticalItemSpacing for each row) and not the 1200+..

    Thursday, February 20, 2020 8:33 AM
  • User57571 posted

    @jafarullahag What about dynamic Row Height? (Like a DropDown)

    Sunday, March 22, 2020 3:50 AM
  • User392745 posted

    @MeikandanI said: HI @Kingamattack

    I have changed the layout used inside the data template to resolve the issue.

    Thanks Meikandan

    can you please explain ?

    Thursday, April 2, 2020 5:18 PM
  • User245839 posted

    Hi, I implemented a Behavior as a work arround:

    public class CollectionViewHightBehavior : Behavior<CollectionView>
        {
            bool hasHeightChanged = false;
            public CollectionView CollectionViewObject
            {
                get;
                private set;
            }``
            protected override void OnAttachedTo(CollectionView bindable)
            {
                base.OnAttachedTo(bindable);
                CollectionViewObject = bindable;
                bindable.BindingContextChanged += Bindable_BindingContextChanged;
                bindable.SizeChanged += Bindable_SizeChanged;
            }
    
    
            private void Bindable_SizeChanged(object sender, EventArgs e)
            {
                var collectionHeight = CollectionViewObject.Height;
    
                if (CollectionViewObject.Height > 0 && !hasHeightChanged)
                {
                    CollectionViewObject.HeightRequest = (collectionHeight / 2) + 20;
    
                    hasHeightChanged = true;
                }
            }
    
            private void Bindable_BindingContextChanged(object sender, EventArgs e)
            {
                OnBindingContextChanged();
            }
    
            protected override void OnBindingContextChanged()
            {
                base.OnBindingContextChanged();
                BindingContext = CollectionViewObject.BindingContext;
            }
            protected override void OnDetachingFrom(CollectionView bindable)
            {
                base.OnDetachingFrom(bindable);
                bindable.BindingContextChanged -= Bindable_BindingContextChanged;
                bindable.SizeChanged -= Bindable_SizeChanged;
            }
        }
    

    In Bindable_SizeChanged I recalculate the height but becarful because it enters in a loop so I used a flag to change the height just once.

    In Xaml:

    <CollectionView.Behaviors>
        <behavior:CollectionViewHightBehavior/>
    </CollectionView.Behaviors>
    

    I hope that it can helps. Regards. Valerio.

    Monday, June 22, 2020 3:25 PM