Home > Net >  Separator Lines in Xamarin Forms ListView are only between items on iOS
Separator Lines in Xamarin Forms ListView are only between items on iOS

Time:11-02

I have a Xamarin Forms Listview with a GroupHeader:

        <ListView x:Name="listView"
                      ios:ListView.SeparatorStyle="FullWidth"
                      AbsoluteLayout.LayoutBounds="0,0,1,1"
                      AbsoluteLayout.LayoutFlags="All"
                      ItemsSource="{Binding Items}"
                      IsGroupingEnabled="true"
                      SeparatorVisibility="Default" 
                      IsPullToRefreshEnabled="False"
                      SeparatorColor="Red"
                      SelectionMode="None"
                      Footer=""
                      BackgroundColor="Transparent">
                <ListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <TextCell Text="Header Cell"/>
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell Text="Item Cell"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

On iOS the separator line (red) is only visible between the items, but not between header and items: iOS ListView

On Android the line is also between Header and items: Droid Screenshot

I only found some suggestions to remove the separator lines on iOS (Setting SeparatorColor transparent).

How can i get the android behavior on iOS?

CodePudding user response:

You can use BoxView to achieve the effect you want, modify your code as follows:

<ListView x:Name="listView"
    AbsoluteLayout.LayoutBounds="0,0,1,1"
    AbsoluteLayout.LayoutFlags="All"
    ItemsSource="{Binding Items}"
    IsGroupingEnabled="True"
    SeparatorVisibility="None"
    SelectionMode="None"
    Footer=""
    BackgroundColor="Transparent">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="Header Cell" Margin="0,10,0,0"/>
                    <BoxView HeightRequest="0.5" Color="Red" HorizontalOptions="FillAndExpand" Margin="0,8,0,0"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="Item Cell" Margin="0,10,0,0"/>
                    <BoxView HeightRequest="0.5" Color="Red" HorizontalOptions="FillAndExpand" Margin="0,5,0,0"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
  • Related