Xamarin.Forms（iOS项目）：ListView分隔符显示在所有屏幕中

Question

I have a ListView with the default SeparatorVisibility. My Android project shows the Separator if there are elements in the ItemsSource and stops showing it below the last element. It's the result I want for my iOS project.

However, in my iOS project the screen is full of Separators no matter how many elements I have, even if I have no elements or only one, the Separators still being there.

Could someone give me a reason and how to fix it please? Thanks.

Answer 1

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer (typeof(ListView), typeof(CustomListViewRenderer))]
namespace yourNamespace
{
    public class CustomListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                var listView = Control as UITableView;
                listView.SeparatorInset = UIEdgeInsets.Zero;
            }
        }
    }
}

Answer 2

I think you can take a look to this post

these are some tips

First disable the default separator, this is done by adding following property to the ListView XAML

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!

I think you can play with this "Margin"... when your data is empty, remove the margin so you should not have the separator

<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!

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

Answer 3

That is due to the implementation of the ListView on the iOS side. It renders as a UITableView which (in the case of the ListView ) always takes the entire height and shows empty items. To change this type of behavior you could set the ListView height dynamically in the code-behind for your page. Another option is taking a look at Xamarin's Evolve sample app which has a few pages where it uses a CardView combined with a ListView to make it appear as it does on Android.