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

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

Best Answer

Answers

  • EmilKAntonyEmilKAntony USMember

    Thanks man.., it worked fine

  • SupreetTare.9314SupreetTare.9314 GBUniversity ✭✭

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

  • AnthonyRamirezAnthonyRamirez USUniversity ✭✭✭

    @TorbenKruse

    Thanks again :smiley:

  • SupreetTare.9314SupreetTare.9314 GBUniversity ✭✭

    cool @JGoldberger thanks :)

  • JesperKrammingJesperKramming USMember ✭✭
    edited November 2015

    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.

  • mubimubi USMember ✭✭✭

    It worked for me

  • ParmeshAlthiParmeshAlthi USMember ✭✭

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

  • JGoldbergerJGoldberger USMember, Forum Administrator, Xamarin Team, University Xamurai

    @ParmeshAlthi ,

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

  • ParmeshAlthiParmeshAlthi USMember ✭✭

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

  • ParmeshAlthiParmeshAlthi USMember ✭✭

    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>
    
  • JordanjhewittJordanjhewitt USMember ✭✭

    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.

  • DidsDids FIMember ✭✭

    @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.

  • SachinKumarSachinKumar USMember ✭✭
    edited July 2017

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

    <ListView.Footer>

    after closing of </ListView.ItemTemplate>

    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

  • RodyRody USMember ✭✭
    edited July 2017

    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.

  • knottydevknottydev USMember ✭✭

    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").

  • knottydevknottydev USMember ✭✭
    edited December 2017

    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. :)

  • CharwakaCharwaka INMember ✭✭✭✭
    edited February 22

    Best Solution for this

    Just Add **Footer="" ** in Listview XAML

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

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

  • EhsanJahanagiriEhsanJahanagiri USMember ✭✭

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

  • CharwakaCharwaka INMember ✭✭✭✭

    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

Sign In or Register to comment.