Listview Separator Inset Full Width

Question

So to my surprise, I haven't found anything on the web or SO on this particular issue. I'm trying to make my listview separator inset to be full width. I have found documentation on this for a tableview, here. But it's not clear to me how to do this for a listview as well? I am using Xamarin Forms listview, trying to accomplish this on iOS. I imagine I have to write a custom renderer, seeing as no (publically exposed) property is available on forms for a listview.

This is a good picture that is happening for me on a listview, although the image shown is from a SO question regarding tableview, not listview, but the issue seems to be the same.

score 7 · Answer 1 · answered Nov 09 '17 at 00:26

I managed to get the list view separator to go full width using a custom renderer.

Tested on iOS 11.

[assembly: ExportRenderer(typeof(CustomListView), typeof(CustomListViewRenderer))]
namespace MasterDetailNav1.iOS.CustomRenderers
{
    public class CustomListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.SeparatorInset = UIEdgeInsets.Zero;
            }
        }
    }
}

score 6 · Answer 2 · answered Dec 17 '18 at 16:08

6

This is now built in with Xamarin Forms 3.0:

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/platform/platform-specifics/consuming/ios#setting-the-separator-style-on-a-listview

Simply set the SeparatorStyle to either Default or FullWidth on your ListView (be aware this is a platform specific for iOS, Android does full width by default):

<ListView ios:ListView.SeparatorStyle="FullWidth"/>

answered Dec 17 '18 at 16:08

hvaughan3

10,955
5
56
76

1

this is the latest link: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/listview-separator-style and this line is required to function using xaml: xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" – enam Jun 27 '22 at 11:51

Tim Klingeleers · Accepted Answer · 2019-07-02T09:41:42.140

5

The answer depends on whether you are using Xamarin Forms 3.0+ or earlier versions.

Xamarin Forms 3.0 and higher

A ListView on Xamarin Forms 3.0 and higher now exposes a SeparatorStyle property which can be set to a SeparatorStyle enum value, either Default or FullWidth. This has been provided via this PR.

Make sure to set the SeparatorStyle property to FullWidth in order to achieve the wanted effect.

Before Xamarin Forms 3.0

You are correct that there isn't a property exposed through the Xamarin Forms ListView (which ultimately renders as a UITableView on iOS) to change the separator width. If you want to change the separator yourself, you will have to resort to a custom renderer and implement what you found in the other SO question.

As a workaround, you could disable the separator visibility and then add a BoxView of 1 height to simulate a full width separator.

edited Jul 02 '19 at 09:41

answered May 03 '17 at 21:12

Tim Klingeleers

2,834
14
20

@jdmdevdotnet Saw [this](http://depblog.weblogs.us/2017/04/29/xamarin-forms-custom-listview-separator-without-boxview) just the other day for this very thing. – hvaughan3 May 03 '17 at 21:17
1

@hvaughan3 Keep in mind that Stefan's comment on your link is a valid one, nesting `StackLayout` instead of using a `BoxView` probably isn't the best option regarding performance. – Tim Klingeleers May 03 '17 at 21:21
Good point and completely agree with you. It is why I never implemented something like what is in the link myself. – hvaughan3 May 03 '17 at 21:32
yeah i wouldnt ever do that lol, i appreciate the link though. guess we're just gonna deal with the non-full width separator. So annoying, this should be a property... – jdmdevdotnet May 03 '17 at 21:36
It's too specific to iOS to add as a `ListView` property. Xamarin Forms has to look for a common denominator over all platforms when creating abstractions like `ListView`. It would be hard to deal with every possible usage scenario, so it's left out. It's a little hassle, but you get the ability to adjust your renderer to your specific needs. – Tim Klingeleers May 03 '17 at 21:43
this answer is no logner valid. Since Xamarin.Forms 3.0 this is handled with a platform specific: https://github.com/xamarin/Xamarin.Forms/issues/1665 – GiampaoloGabba Jun 28 '19 at 13:52
Thanks @GiampaoloGabba, I've updated the answer to differentiate between the different Xamarin Forms versions – Tim Klingeleers Jul 02 '19 at 09:42
MAUI solution https://learn.microsoft.com/en-us/dotnet/maui/ios/platform-specifics/listview-separator-style?view=net-maui-7.0 – Suchith Apr 14 '23 at 09:00

CarLoOSX · Answer 4 · 2019-07-01T11:39:08.597

0

separator fullwidth:

<ListView ios:ListView.SeparatorStyle="FullWidth"/>

Separator color property in list view

& remove separator when no content in view cell

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

edited Jul 01 '19 at 11:39

answered Jun 28 '19 at 11:06

CarLoOSX

505
3
9

this is completely unrelated to the question. The OP was asking for separator fullwidth not for separator color or to remove extra separator at the ned of a listview – GiampaoloGabba Jun 28 '19 at 13:50
Sorry, as you can notice there is a " : " because its supposed to be the example of the fullWidth property. Also I consider that's it would be nice to show an example of removing the separator when the cell has no content and apply a color. I update my comment, stop crying please – CarLoOSX Jul 01 '19 at 11:37
In fact when I try to edit the comment I see : but its not showing. – CarLoOSX Jul 01 '19 at 11:38
Check solution in MAUI https://learn.microsoft.com/en-us/dotnet/maui/ios/platform-specifics/listview-separator-style?view=net-maui-7.0 – Suchith Apr 14 '23 at 09:00

Listview Separator Inset Full Width

4 Answers4

Xamarin Forms 3.0 and higher

Before Xamarin Forms 3.0