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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ListView x:Name="SeparatorListView" ItemsSource="{Binding Persons}" Margin="0,20,0,0" RowHeight="60" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1"> <ListView.ItemTemplate> <DataTemplate> <ViewCell IsEnabled="false"> <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Spacing="0"> <Label Text="{Binding FullName}" TextColor="Maroon" VerticalOptions="CenterAndExpand" Margin="20,0,20,0" /> <Label Text="{Binding Profession}" TextColor="Maroon" VerticalOptions="CenterAndExpand" Margin="20,0,20,0" /> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> |
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
1 |
SeparatorColor="Transparent" |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ListView x:Name="SeparatorListView" SeparatorColor="Transparent" ItemsSource="{Binding Persons}" Margin="0,20,0,0" RowHeight="60" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White" Grid.Row="1"> <ListView.ItemTemplate> <DataTemplate> <ViewCell IsEnabled="false"> <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Black"> <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="White" Margin="0,0,0,0.4"> <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Spacing="0"> <Label Text="{Binding FullName}" TextColor="Maroon" VerticalOptions="CenterAndExpand" Margin="20,0,20,0" /> <Label Text="{Binding Profession}" TextColor="Maroon" VerticalOptions="CenterAndExpand" Margin="20,0,20,0" /> </StackLayout> </StackLayout> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> |
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!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ListView x:Name="SeparatorListView" SeparatorColor="Transparent" ItemsSource="{Binding Persons}" Margin="0,20,0,0" RowHeight="60" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Olive" Grid.Row="1"> <ListView.ItemTemplate> <DataTemplate> <ViewCell IsEnabled="false"> <StackLayout BackgroundColor="#f4eac3" Padding="0,5,0,5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <StackLayout BackgroundColor="Transparent" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Spacing="0" Margin="20,0,20,0"> <Label Text="{Binding FullName}" TextColor="Maroon" VerticalOptions="CenterAndExpand" /> <Label Text="{Binding Profession}" TextColor="Maroon" VerticalOptions="CenterAndExpand" /> </StackLayout> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> |
All code is up on GitHub here…