CODEWITHSUNDEEP
listviewxamarinxamarin.iosxamarin.forms
jdmdevdotnet
jdmdevdotnet

Reputation: 1

Listview Separator Inset Full Width

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.

enter image description here

Upvotes: 5

Views: 3475

Answers (4)

Tim Klingeleers
Tim Klingeleers

Reputation: 3024

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.

Upvotes: 5

CarLoOSX
CarLoOSX

Reputation: 525

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/

Upvotes: 1

hvaughan3
hvaughan3

Reputation: 11105

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"/>

Upvotes: 6

Steve Chadbourne
Steve Chadbourne

Reputation: 6953

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;
            }
        }
    }
}

Upvotes: 7

Related Questions