locked
Remove gap between cells in ListView RRS feed

  • Question

  • User112345 posted

    Hi,

    We are having a problem with gaps between cells in a ListView. We set SeparatorVisibility="None" but still there are a 1-pixel high gap in some cases.

    On iOS is seems to be connected with the CachingStrategy setting of the ListView. If we set the CachingStrategy to RetainElement there are no gaps, but when using RecycleElement the gap is there.

    On Android the gap is there no matter what.

    I've filed a bug about this (Bug 39802) and you can use the attached testproject to test it.

    Anyone got any input on this? A workaround?

    Monday, March 21, 2016 2:35 PM

All replies

  • User166393 posted

    Setting SeparatorColor as Blue might work as an illusion, but I dont know whether that is a good solution.

    Monday, March 21, 2016 2:59 PM
  • User112345 posted

    Yeah, in this test scenario that would work fine, but in our real project we use images instead of a solid color. :-)

    Monday, March 21, 2016 3:23 PM
  • User166393 posted

    You mean to say that you are using images as background for the viewcell

    Monday, March 21, 2016 3:25 PM
  • User92610 posted

    You could do something like this https://gist.github.com/shanempope/ee585de7c943ae3ecfc4

    and then in your pcl page add something like this in the constructor after initialize component

    _listView.Effects.Add(Effect.Resolve("MyCompany.NoDividerListviewEffect"));

    I haven't tested the effect but I use the UITableViewCellSeparatorStyle.None; in a custom renderer for the same effect

    Monday, March 21, 2016 3:34 PM
  • User112345 posted

    I'll give it try applying it as an effect but when setting the SeparatorStyle to None in a custom iOS renderer it produces the same bug. Do you have the effect implementation for Android as well?

    Monday, March 21, 2016 4:13 PM
  • User112345 posted

    @Maharshi.5212 said: You mean to say that you are using images as background for the viewcell

    Well, yes, we use a photo as the background of the cell. :-)

    Monday, March 21, 2016 4:15 PM
  • User92610 posted

    this is my iOS custom renderer code (Calling UpdateDividers it in both OnElementPropertyChanged and OnElementChanged):

    iOS

        void UpdateDividers()
        {
            if (Element.HasDividers)
            {
                Control.SeparatorColor = Element.DividerColor.ToUIColor();
                Control.SeparatorStyle = UITableViewCellSeparatorStyle.SingleLine;
            }
            else
            {
                Control.SeparatorStyle = UITableViewCellSeparatorStyle.None;
            }
        }
    

    android:

        void UpdateDividers()
        {
            if (Element.HasDividers)
            {
                Control.Divider = new ColorDrawable(Element.DividerColor.ToAndroid());
                Control.DividerHeight = AndroidConverters.ConvertDPToPixels(1);
            }
            else
            {
                Control.Divider = null;
                Control.DividerHeight = 0;
            }
        }
    
    Monday, March 21, 2016 4:16 PM
  • User112345 posted

    Thanks, I'll try the Android code to see if it makes anny difference. On iOS we can set the CacheStartegy to RetainElement as a workaround, but we're still looking for a workaround on Android. :-)

    Monday, March 21, 2016 4:20 PM
  • User112345 posted

    Now I've tried to remove the separator using:

    • SeparatorVisibility in Forms
    • Custom renderers for iOS and Android
    • Platform effects for iOS and Android

    But the behavior is the same:

    • Android: Can't remove the 1-pixel gap no matter what I do.
    • iOS: If a set CachingStrategy to RetainElement the gap is removed, if i set CachingStrategy to RecycleElement the gap is there.

    Any other ides? :-)

    Tuesday, March 22, 2016 6:52 AM
  • User112345 posted

    Edit: Today iOS gets a gap between cells no matter what I set the CachingStrategy to.

    Tuesday, March 22, 2016 7:27 AM
  • User92610 posted

    Those things I posted work for me so I'm not sure. It's possible it's something else, or maybe you're setting them on a control that isn't the one you're seeing? I don't know sorry. Good luck.

    Tuesday, March 22, 2016 2:36 PM
  • User142315 posted

    @JohnErikssoniksson Is it a dynamically changing listview with many rows?

    If the # rows is manageable, would a table work for you instead? Or even a grid?

    Tuesday, March 22, 2016 4:30 PM
  • User112345 posted

    @ShanePope said: Those things I posted work for me so I'm not sure. It's possible it's something else, or maybe you're setting them on a control that isn't the one you're seeing? I don't know sorry. Good luck.

    Thanks. :-) If you have time though, please try the example project. It's really small and it would be interesting to see if you experience the problem as well. :-)

    Tuesday, March 22, 2016 5:19 PM
  • User112345 posted

    @RobertHudson.0264 said: @JohnErikssoniksson Is it a dynamically changing listview with many rows?

    If the # rows is manageable, would a table work for you instead? Or even a grid?

    Well, yes. In this case we could even use a simple StackLayout, but a workaround like that should really be the last resort. :-)

    Tuesday, March 22, 2016 5:22 PM
  • User92610 posted

    In android I see the 1 pixel lines are transparent. I don't use Xamarin.ListView and I have white cells on white background so I'm either missing this issue in our own app because white on white or it's a Xamarin.ListView issue (I use CustomRenderer with Android.Listview in our app) Seems like it could be an issue. You'll probably have to go custom renderer listview route to get something in a reasonable time. I use native listviews a lot anyway because I need the extra functionality and speedup and the xamarin bugs become a headache in more complex ones, but it is a lot of overheard :/

    On iOS that sounds like a xamarin.listview cacheing strat bug, since they just added that feature i wouldn't be surprised. Might even be causing both platform issues.

    Good luck.

    Tuesday, March 22, 2016 6:36 PM
  • User112345 posted

    I've reported it as a bug and it got status confirmed. Hopefully it will be fixed soon. In the meantime we'll just accept it as it is. In the most critical page we decided to change the layout anyway, and in the new layout the extra lines isn't visible. :-)

    Wednesday, March 23, 2016 1:45 PM
  • User117011 posted

    There is a similar bug for TableView where setting the divider height to 0 does nothing. I set divider tint to 0 and this hid the lines. I hope this transferable.

    Saturday, March 26, 2016 9:23 AM
  • User187467 posted

    I ran into the exact same issue as you John. I managed to get around it by going into my native view cell implementation and adding this:

    public override void LayoutSubviews () { base.LayoutSubviews (); Subviews[2].Frame = new CGRect (0, Subviews[2].Frame.Y, Frame.Width, Subviews[2].Frame.Height); Subviews[2].BackgroundColor = <Whatever color you want>; } Looks like Xamarin's UITableViewCell has two separator views, which can be accessed with Subviews[1] and Subviews[2]. I also set the SeparatorVisibility and SeparatorColor of my Xamarin Forms ListView, so YMMV in your specific case.

    Thursday, March 31, 2016 8:34 AM
  • User32853 posted

    Well, I had the same problem. I had a look at the released source code and found the cause for Android in the ListViewAdapter. A seperator line is always added at the end of the cell's native view, no matter what you set ListView.SeparatorVisibility to. If you set it to None, the separator line will be transparent, therefore you will always have this gap.

    The only way to solve this is to comment the code out (or better place an if statement around it), that creates the line. This starts in ListViewAdapter.cs, Line 270 (AView bline;) and ends at Line 305. https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/Renderers/ListViewAdapter.cs#L270

    Thursday, April 28, 2016 4:49 PM
  • User65806 posted

    I'm only experiencing the gap on iOS. Has anyone figured out how to remove the 1 pixel line between cells? My Android List looks perfect without gaps. I have tried this on multiple projects and iOS always has a small gap between cells and I need it to go away! I have set all spacing to 0, I've tried custom renders and nothing will remove it. Someone please help! My Background on the Listview is Transparent, and there is an image in the background.

    Thursday, January 5, 2017 8:48 PM
  • User400575 posted

    For my case (on iOS), this 1px gap was gone after i changed cell DataTemplate's Grid.VerticalOptions from LayoutOptions.CenterAndExpand to LayoutOptions.FillAndExpand

    Thursday, April 15, 2021 11:12 AM