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

Question

我有一个ListView默认SeparatorVisibility。如果在ItemsSource中有元素，并停止在最后一个元素下面显示它，我的Android项目将显示分隔符。这是我想要的iOS项目的结果。

但是，在我的iOS项目中，无论有多少元素，屏幕都充满了分隔符，即使我没有元素或仅有一个元素，分隔符仍然在那里。

有人可以给我一个理由，如何解决它吗？谢谢。

Answer 1

我觉得你可以看看到this post

这些都是一些提示

首先禁用默认的分隔符，这是通过添加以下属性到ListView XAML

SeparatorColor="Transparent" 

后完成这样，将完整的ViewCell内容包装在双层StackLayout中！我知道这听起来像是矫枉过正，但这样你就不会遇到任何有关ViewCell内部边缘或其他东西的BoxView问题。 第一个StackLayout应该有一个BackgroundColor设置为你希望你的分隔符的颜色，第二个StackLayout应该和它在其中的容器的其余部分具有相同的BackgroundColor ......在我们的例子中该页面被设置为白色。一定要在第二个StackLayout的底部添加一个边距，因为这将代表我们分隔符的厚度！

我想你可以用这个“保证金” ......当你的数据是空的，除去保证金，所以你不应该有分隔

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

随着在地方玩，你会得到与本博文右上角的预览图像具有相同的视觉效果。

作为奖励，如果页面的背景颜色不是白色，则可以省略StackLayouts之一。因为如果是这种情况，您可以通过使用ListView中的透明度来使用该颜色作为分隔符颜色。

这个例子，只有在页面本身也有一个BackgroundColor设置为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 2

这是由于在iOS端执行了ListView。它呈现为UITableView，其中（在ListView的情况下）总是占据整个高度并显示空的项目。要更改此类行为，您可以在页面的代码隐藏中动态设置ListView高度。另一种选择是看看Xamarin的Evolve sample app，它有几页，它使用CardView与ListView相结合，以使其看起来像它在Android上一样。

Answer 3

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