Xamarin remove TableSection top border

Question

Is it possible to remove the top blue border(or atleast change its color) of xamarins TableSection:

I looked at Xamarin TableView documentation, but I found no help there: https://developer.xamarin.com/guides/xamarin-forms/user-interface/tableview/

My code at the moment looks like this:

public class UserProfilePushNotification : TableView
    {
        public UserProfilePushNotification(string text) : base()
        {
            Intent = TableIntent.Data;
            Root = new TableRoot
            {
                new TableSection
                {
                    new SwitchCell
                    {
                        Text = text
                    },
                    new TextCell()
                    {
                        Text = string.Empty
                    },
                    new TextCell
                    {
                        Text = "Android Version: 1.2.1"
                    }
                }
            };
        }
    }

@jzeferino don't worry I didn't forget you : ) I just didn't have the time to test it out before marking it as a correct answer, or asking something if it didn't work. I'll test it out after work. — Stralos

jzeferino jzeferino · Accepted Answer · 2016-06-29T22:38:47

I was digging into this problem and I found that TableView is implemented (in the default renderer) as a ListView. The TableSection is just a normal item in the Listview, the first one.

If you don't use the Title Property from the TableSection (in this case you aren't using it) you can hide it.

To do this I created a custom render for the TableView and hidden the first element of the ListView:

[assembly:ExportRenderer(typeof(Project.MenuTableView), typeof(Project.Droid.MenuTableViewRenderer))]
namespace Project.Droid
{
    public class MenuTableViewRenderer : TableViewRenderer
    {    
        private bool _firstElementAdded = false;

        protected override void OnElementChanged (ElementChangedEventArgs<TableView> e)
        {
            base.OnElementChanged (e);

            if (Control == null)
                return;

            var listView = Control as Android.Widget.ListView;    
            listView.ChildViewAdded += (sender, args) => 
            {    
                if (!_firstElementAdded)
                {    
                    args.Child.Visibility = ViewStates.Gone;    
                    _firstElementAdded = true;    
                }

            };
            // Uncomment this if you want to remove all the dividers from the table.
            //listView.DividerHeight = 0;    
        }    
    }
}

Xamarin remove TableSection top border

1 Answers