Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

Remove gap between cells in ListView

JohnErikssonJohnEriksson USUniversity ✭✭

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?

Posts

  • Maharshi.5212Maharshi.5212 USMember ✭✭

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

  • JohnErikssonJohnEriksson USUniversity ✭✭

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

  • Maharshi.5212Maharshi.5212 USMember ✭✭

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

  • Shane000Shane000 USMember ✭✭✭
    edited March 2016

    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

  • JohnErikssonJohnEriksson USUniversity ✭✭

    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?

  • JohnErikssonJohnEriksson USUniversity ✭✭

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

  • Shane000Shane000 USMember ✭✭✭

    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;
            }
        }
    
  • JohnErikssonJohnEriksson USUniversity ✭✭

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

  • JohnErikssonJohnEriksson USUniversity ✭✭

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

  • JohnErikssonJohnEriksson USUniversity ✭✭

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

  • Shane000Shane000 USMember ✭✭✭

    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.

  • RHudsonRHudson CAMember ✭✭✭

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

  • JohnErikssonJohnEriksson USUniversity ✭✭

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

  • JohnErikssonJohnEriksson USUniversity ✭✭

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

  • Shane000Shane000 USMember ✭✭✭

    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.

  • JohnErikssonJohnEriksson USUniversity ✭✭

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

  • IsaacCarringtonIsaacCarrington NZMember
    edited March 2016

    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.

  • JDFJDF USMember

    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.

  • MarkoLudolphMarkoLudolph DEMember ✭✭

    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

  • RSHRSH USUniversity ✭✭

    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.

    gaps.jpg 103.3K
  • evaganovevaganov Member

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

Sign In or Register to comment.