How to not show separator/divider row between rows in a ListView()

Hi, I'm using Xamarin forms to show a ListView(), everything is working fine, but I cannot find out a solution to not show separator/divider row between rows in my ListView.

Someone knows how to fix that?

Thanks so much.

Posts

  • rmarinhormarinho PTMember, Insider, Beta Xamurai

    You need a custom render for that, you can use the Xamarin Forms Labs nuget and the ExtendedCell control that already exposes the SeparatorColor and padding :

    https://github.com/XForms/Xamarin-Forms-Labs/blob/master/src/Xamarin.Forms.Labs/Xamarin.Forms.Labs/Controls/ExtendedViewCell.cs

  • DennisAbrahamDennisAbraham USMember

    Thanks! I'm going to try that.

  • CraigDunnCraigDunn USXamarin Team Xamurai

    @DennisAbraham‌ you can also see how it's done in this Evolve sample MenuPage class - notice the empty subclass of MenuTableView.

    This is then given a renderer in the iOS project - MenuTableViewRenderer - which is where you can hide the separators.

  • DennisAbrahamDennisAbraham USMember

    Hi Craig Dunn, Thanks so much! Worked fine.

  • JohnBeansJohnBeans USMember ✭✭
    edited July 2014

    Assuming it's iOS you're interested in tweaking, add a new file to your iOS project called something like ListViewCellRenderer.cs (name doesn't matter) that contains this:

    using System;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;
    using MonoTouch.UIKit;
    using System.Drawing;
    using [YOUR NAMESPACE HERE];
    
    [assembly: ExportRenderer(typeof(ViewCell), typeof(MyListViewCellRenderer))]
    
    namespace [YOUR NAMESPACE HERE] {
        public class MyListViewCellRenderer : ViewCellRenderer {  
            public override UITableViewCell GetCell(Cell item, UITableView tv) {
                var cell = base.GetCell (item, tv);
                if (cell != null) {
                    cell.SelectedBackgroundView = new UIView() { BackgroundColor = UIColor.Blue};
                    cell.BackgroundColor = UIColor.Black; // Set whatever native properties you need
                }
                tv.SeparatorStyle = UITableViewCellSeparatorStyle.None;
                return cell;
            }
        }
    }
    

    It will modify every ListView cell in your iOS project.

  • deadlyfingersdeadlyfingers GBMember

    In Xamarin.Forms PCL project you can set the separator color to transparent in code behind:
    listView.SeparatorColor = Color.Transparent;
    or set ListView attribute in XAML:
    SeparatorColor="Transparent"

  • Abhijeet_SuryaAbhijeet_Surya USMember ✭✭✭

    @MichaelCheng

    Please correct me, if I am wrong

    In xamarin forms listView.SeparatorVisibility is not available

  • MichaelChengMichaelCheng SGMember ✭✭

    @abhi_aps

    I just checked, it is still there.

    var listView = new ListView { SeparatorVisibility = SeparatorVisibility.None };

  • Abhijeet_SuryaAbhijeet_Surya USMember ✭✭✭

    @MichaelCheng

    It's not available in my xamarin forms. (version 1.3.3.0 & run time v4.0.30319) - see the attached screen.

    The one that you are mentioned is might be from Xamarin.IOS or Xamarin.Android. Correct me.

    I have written custom renderer ( :smile: its simple )

  • TorbenKruseTorbenKruse DEMember ✭✭✭

    SeparatorVisibility was introduced in 1.3.5.

  • @TorbenKruse , thank you

  • AMD21AMD21 USMember ✭✭
    edited February 2017

    @DennisAbraham said:
    Hi, I'm using Xamarin forms to show a ListView(), everything is working fine, but I cannot find out a solution to not show separator/divider row between rows in my ListView.

    Someone knows how to fix that?

    Thanks so much.

    Use this into your listview statement: SeparatorVisibility="None"

  • JorisMeylaersJorisMeylaers USMember ✭✭

    @JohnBeans said:
    Assuming it's iOS you're interested in tweaking, add a new file to your iOS project called something like ListViewCellRenderer.cs (name doesn't matter) that contains this:

    using System;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;
    using MonoTouch.UIKit;
    using System.Drawing;
    using [YOUR NAMESPACE HERE];
        
    [assembly: ExportRenderer(typeof(ViewCell), typeof(MyListViewCellRenderer))]
        
    namespace [YOUR NAMESPACE HERE] {
      public class MyListViewCellRenderer : ViewCellRenderer {  
          public override UITableViewCell GetCell(Cell item, UITableView tv) {
              var cell = base.GetCell (item, tv);
              if (cell != null) {
                  cell.SelectedBackgroundView = new UIView() { BackgroundColor = UIColor.Blue};
                  cell.BackgroundColor = UIColor.Black; // Set whatever native properties you need
              }
              tv.SeparatorStyle = UITableViewCellSeparatorStyle.None;
              return cell;
          }
      }
    }
    

    It will modify every ListView cell in your iOS project.

    Is there a way to do this in xaml?

  • LarsIbsenLarsIbsen USMember

    @JohnBeans @DennisAbraham

    I ran into this problem today and made a workaround by adding a View with height=1 and a backgroundcolor in my itemtemplate, and then hidding the seperator.

  • CeregolCeregol USMember ✭✭

    This is my solution, it worked for me

       public MenuListView()
        {
            List<MenuItem> data = new MenuListData();
            ItemsSource = data;
            VerticalOptions = LayoutOptions.FillAndExpand;
            //Color!
            BackgroundColor = Color.White;
           ** SeparatorColor = Color.White;**
            var cell = new DataTemplate(typeof(ImageCell));
    
             cell.SetBinding(TextCell.TextProperty, "Title");
    
            cell.SetBinding(ImageCell.ImageSourceProperty, "IconSource");
    
            ItemTemplate = cell;
            SelectedItem = data[0];
        }
    
  • SteveShaw.5557SteveShaw.5557 USMember ✭✭✭
    edited June 2018

    FYI, Annoyingly, even with SeparatorVisibility="None", the separator still occupies space.

    While usually this does not matter, my list rows are a one-row-grid with columns, and I set a different background color in some columns, hoping for a nice column effect. The result has unwanted gaps in the column color.

    (Various ways to work around this, but they all require lower-level work than I was hoping to do.)

    (I would simply place an actual column boxview in grid underneath that area of the listview, but I ran into the annoying difficulty of getting listview to occupy only as much space as it needs. None of the usual techniques work in this page's layout. Will either have to measure children and force listview to correct height, so column doesn't extend below the bottom of it, or make a custom renderer.)

  • CarLoOSXCarLoOSX USMember ✭✭

    separator fullwidth:

    Separator color property in list view

    & remove separator when no content in view cell

    https://xamgirl.com/quick-trick-remove-extra-separator-line-in-listview-xamarin-forms-ios/

Sign In or Register to comment.