Month: April 2017

Here is a small alternative way to add your own ListView separator, without adding a BoxView inside your ItemTemplate.

This is a request often seen because the default iOS rendering of the separator is not full width, even though most apps today would generally show a full width separation.

Example before and after the code changes

Let’s start out with our regular XAML that would generate the original ListView shown on the left above.

Nothing all to special, we have a ListView hooked up with an ItemsSource and are using that together with an ItemTemplate to design the list items.
Because this is just a default implementation of a ListView we are seeing separators on iOS that are not full width.

To get a good separator we need to adjust our XAML!
First disable the default separator, this is done by adding following property to the ListView XAML

After this, wrap the complete ViewCell content inside a double StackLayout! I know this sounds like overkill but this way you’ll not run into any BoxView issues regarding margins inside the ViewCell… or other stuff.
The first StackLayout should have a BackgroundColor set to the colour you want your separator to be, the second StackLayout should have the same BackgroundColor as the rest of the container it is in… in our example the page and that is set to white. Be sure to also add a Margin to the bottom of this second StackLayout because that will represent the thickness of our separator!

Giving us following XAML

With that in place, you’ll get the same visual result as the preview image at the top right of this blog post.

As a bonus, you could omit one of the StackLayouts IF your page has a background color other than white. Because if this is the case, you can use that color as the separator color by playing with transparency inside the ListView.

Example of this, note will only work if the page itself also has a BackgroundColor set to Olive!

All code is up on GitHub here…