listviewmigrationmaui

How to remove separators in MAUI ListView after migrating from Xamarin.Forms?


I recently migrated my Xamarin.Forms project to .NET MAUI. In Xamarin.Forms, my ListView was displaying without separators between the items, but after the migration, I'm seeing these separator lines that weren't there before.

Here's an image showing the issue: [enter image description here](https://i.sstatic.net/KPUeUHTG.png)

I've tried setting the SeparatorVisibility to None, but it didn't have any effect:

Code -

<ListView
    x:Name="listDataItems"
    Grid.Row="1"
    Grid.ColumnSpan="2"
    BackgroundColor="#ffffff"
    HasUnevenRows="True"
    ItemsSource="{Binding DataList}"
    SeparatorVisibility="None"
    SelectionMode="Single">

    <ListView.Header>
        <Grid Margin="10,0,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="50*" />
            </Grid.ColumnDefinitions>
            <Label
                Grid.Column="0"
                FontAttributes="Bold"
                Text="{Binding Column1}" 
                FontSize="Medium"/>
            <Label
                Grid.Column="1"
                FontAttributes="Bold"
                Text="{Binding Column2}"
                FontSize="Medium"/>
        </Grid>
    </ListView.Header>

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <Frame
                        Grid.Row="0"
                        Margin="5,5,5,5"
                        Padding="5">
                        <Grid Margin="5,0,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="50*" />
                                <ColumnDefinition Width="50*" />
                            </Grid.ColumnDefinitions>

                            <Label Grid.Column="0" Text="{Binding Field1}" />
                            <Label Grid.Column="1" Text="{Binding Field2}" />
                        </Grid>
                    </Frame>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>



Any help on how to remove these separators would be greatly appreciated!


Solution

  • Well, I can reproduce the question. Setting Margin to 0 can remove separators:

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Frame
                            Grid.Row="0"
                            Margin="5,0,5,0" // modify here
                            Padding="5">
                          ......