Search code examples
listviewxamarinxamarin.formsseparator

How to remove Extra Separator in my ListView in Xamarin Forms


I am new in Xamarin Forms. so Forgive me if this is silly question.

I have Created Simply ListView. But I want to remove extra Separator which row have empty.

I try to search on SO, google and Xamarin Forms. but nothing is Help for me.

Xaml Code :

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewDemo" x:Class="ListViewDemo.ListViewDemoPage">
    <StackLayout Orientation="Vertical"
             VerticalOptions="Fill"
             HorizontalOptions="StartAndExpand">
        <ListView x:Name="MainListView" Margin="0,30,0,0" VerticalOptions="FillAndExpand"  SeparatorColor="Red" BackgroundColor="Gray" HasUnevenRows="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <Label Text="{Binding Name}" Grid.Column="0" Margin="10,10,0,0">
                            </Label>
                            <Label Text="{Binding Age}" Grid.Column="1" Margin="0,10,10,0">
                            </Label>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

ListViewDemoPage.cs

using System.Collections.Generic;
using Xamarin.Forms;

namespace ListViewDemo
{
    public partial class ListViewDemoPage : ContentPage
    {
        public ListViewDemoPage()
        {
            InitializeComponent();

            var strings = new List<EmptyClass>
            {
                new EmptyClass{Name = "Harshad Harshad Harshad Harshad Harshad Harshad Harshad Harshad", Age = 23},
                 new EmptyClass{Name = "Sunita", Age = 23},
                 new EmptyClass{Name = "Rahul", Age = 23},
                 new EmptyClass{Name = "Vrushbh", Age = 23},
                 new EmptyClass{Name = "Harmi", Age = 23},
                 new EmptyClass{Name = "Jigu", Age = 23},

            };

            MainListView.ItemsSource = strings; 
        }
    }
}

EmptyClass.cs

using System;
namespace ListViewDemo
{
    public class EmptyClass
    {
        public string Name { get; set; }
        public double Age { get; set; }
        public EmptyClass()
        {
        }
    }
}

Any Help be Appreciated.


Solution

  • Just Add the Footer below the ListView.ItemTemplate

    <ListView.Footer>
                <StackLayout Orientation="Horizontal">
                </StackLayout>
    </ListView.Footer>
    

    Full code :

    <?xml version="1.0" encoding="utf-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewDemo" x:Class="ListViewDemo.ListViewDemoPage">
        <ListView x:Name="MainListView" Margin="0,30,0,0" VerticalOptions="FillAndExpand" SeparatorColor="Red" BackgroundColor="Gray" HasUnevenRows="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <Label Text="{Binding Name}" Grid.Column="0" Margin="10,10,0,0">
                            </Label>
                            <Label Text="{Binding Age}" Grid.Column="1" Margin="0,10,10,0">
                            </Label>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.Footer>
                <StackLayout Orientation="Horizontal">
                </StackLayout>
            </ListView.Footer>
        </ListView>
    </ContentPage>