locked
How to hide the empty rows of a list view in xamrin.forms in ios RRS feed

  • Question

  • User118358 posted

    My list view has just 1 or 2 datas , but still it shows empty rows till the end of the page . This just happens in ios ., in android its working fine . pls do tell me what changes to make to hide the empty rows

    Monday, April 27, 2015 11:35 AM

Answers

  • User62190 posted

    this is default behavior of iOS. to avoid this create a custom renderer for your ListView and add an empty footer:

    protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
            {
                base.OnElementChanged(e);
    
                if (this.Control == null) return;
    
                this.Control.TableFooterView = new UIView();
            }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, April 27, 2015 11:39 AM

All replies

  • User62190 posted

    this is default behavior of iOS. to avoid this create a custom renderer for your ListView and add an empty footer:

    protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
            {
                base.OnElementChanged(e);
    
                if (this.Control == null) return;
    
                this.Control.TableFooterView = new UIView();
            }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, April 27, 2015 11:39 AM
  • User118358 posted

    Thanks man.., it worked fine

    Monday, April 27, 2015 1:18 PM
  • User58922 posted

    can this also be achieved by XAML now that we also have FooterTemplate available in 1.4?

    Friday, June 26, 2015 9:01 AM
  • User55225 posted

    @TorbenKruse

    Thanks again :smiley:

    Sunday, September 13, 2015 4:33 PM
  • User21936 posted

    @SupreetTare.7191

    Yes, I have attached a sample demonstrating this.

    Friday, November 13, 2015 11:29 PM
  • User58922 posted

    cool @JGoldberger thanks :)

    Monday, November 16, 2015 1:10 PM
  • User98694 posted

    You can wrap your ListView in a StackLayout and the extra lines is gone, easy way :smile: only negativ about it, is the scrolling is done in its container and not the full screen.

    Friday, November 20, 2015 11:36 AM
  • User223656 posted

    It worked for me

    Tuesday, November 8, 2016 11:05 AM
  • User277224 posted

    Hi @JGoldberger, Can you upload the zip file again, getting file not found issue, thanks in advance

    Tuesday, November 29, 2016 3:31 PM
  • User21936 posted

    @ParmeshAlthi ,

    Odd , it was still there for me. but here it is again.

    Tuesday, November 29, 2016 6:00 PM
  • User277224 posted

    @JGoldberger, Now I am able to download the file. Thank you

    Wednesday, November 30, 2016 5:15 AM
  • User277224 posted

    Hi @JGoldberger, I have downloaded the provided code and applied the footer tag but still getting the empty rows in the list view. did i miss anything

        <ListView.Footer>
              <Label />
            </ListView.Footer>
    
    Wednesday, November 30, 2016 10:01 AM
  • User21936 posted

    Hi @ParmeshAlthi ,

    Hmm, downloaded and ran the sample and I did not see any empty rows after the for populated rows. Removing:

    <ListView.Footer>
          <Label />
     </ListView.Footer>
    

    made the empty rows show again, so I am not sure what might be going on on your end. Can you post your full XAML code?

    Wednesday, November 30, 2016 7:14 PM
  • User177799 posted

    Using the strategy posted by @TorbenKruse all of the extra cells were eliminated, but yet a large blank area remains that contains the same background color of which the ListView was assigned. The blank area persists exactly where the blank cells would have been located - right underneath the ListView. I have the ListView in a StackLayout with other Views underneath the ListView and the large, 'blank', colored area is still a hindrance aesthetically. Is there any possible way to remove that as well, or is anyone else running into this problem? Thanks.

    Monday, December 12, 2016 9:07 PM
  • User237248 posted

    @Jordanjhewitt Set the list view background color to whatever you want the "empty" background color to be, then set the individual cell background color to white, or whatever cell background color you want. I imagine you could also go with a transparent background color for the list view, in which case it would show the parent background color instead.

    Sunday, January 1, 2017 6:54 PM
  • User230072 posted

    If XAML based designed is used then below add below code. also add blank label inside Footer

    after closing of

    But it will only hide the lines. Sometime is below the list like button or anything then user have to scroll. Not a proper solution

    Wednesday, July 12, 2017 4:33 PM
  • User55052 posted

    Turn off the separator lines: SeparatorVisibility = "None", then draw your own using a BoxView with height set to 1 and Color set to #B2B2B2 or whatever shade of gray you like. Do this in your ViewCell. No need for empty Footer and this gives you more control of the separators as far as color and margin goes.

    Wednesday, July 12, 2017 7:48 PM
  • User354499 posted

    This is happening to me on Android and none of above solutions work. Here is my XAML:

        <StackLayout>
                        <ListView x:Name="listView_ModelDetail"
                                  SeparatorVisibility ="None" FooterTemplate=""
                                  Footer=""
                                  ItemsSource="{Binding Details, Mode=TwoWay}"
                                  IsVisible="{Binding Source={x:Reference pickerModel}, Path=SelectedItem, Converter={StaticResource modelToVisibilityConverter}}">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <Grid>
                                            <Label Text="{Binding Desc}"/>
                                            <Switch IsToggled="{Binding Filter}"/>
                                        </Grid>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                    <ListView.Footer>
                        <Label />
                    </ListView.Footer>
                </ListView>
        </StackLayout>
    

    I've validated it is NOT data in my binding class Property ("Desc").

    Saturday, December 2, 2017 2:17 AM
  • User354499 posted

    After fighting with this for half a day, I decided to use the most clean work around I could come up with based partly on https://forums.xamarin.com/discussion/38028/listview-space-issue-when-hasunevenrows-true-need-a-solution#latest

    My complete answer is on that thread. But it's fairly simple / sensical to me and doesn't involve a huge hack.

    1. Add a read only property to your view model class which will control the height and make the getter look at your ObservableCollection's .Count property of whatever your ListView's ItemSource.
    2. You want to make sure, PropertyChangedEventHandler is raised whenever your ListView items change count. Add a call to your PropertyChangedEventHandler in the setter of your viewModel's ObservableCollection that you're using to populate the list.
    3. Bind HeightRequest in the XAML to said new property.

    Overall, pretty easy if your'e following MVVM from the get-go. Clean, and easy to follow for others looking at your code, but still probably wondering why it's there. :)

    Saturday, December 2, 2017 3:54 AM
  • User155041 posted

    Best Solution for this

    Just Add *Footer="" * in Listview XAML

    https://xamgirl.com/quick-trick-remove-extra-separator-line-in-listview-xamarin-forms-ios/

    Thursday, December 20, 2018 3:26 PM
  • User381902 posted

    Just Add *Footer="" * in Listview XAML, solved all my problems. Thanks @Charwaka, well done!

    Monday, February 18, 2019 7:19 PM
  • User353802 posted

    After adding footer tag in listview, you also need to wrap the list in stacklayout.

    Saturday, March 23, 2019 10:56 AM
  • User155041 posted

    Best Solution for this

    Just Add *Footer="" * in Listview XAML

    https://xamgirl.com/quick-trick-remove-extra-separator-line-in-listview-xamarin-forms-ios/> @EhsanJahanagiri said:

    After adding footer tag in listview, you also need to wrap the list in stacklayout.

    Not required,Grid is Fine

    Tuesday, March 26, 2019 7:06 AM