How to set TextColor Xamarin.Forms TableSection?

Question

I am a fan of doing as much as possible in xaml, I have aTableView` with TableSection.

<TableView Intent="Menu"> <TableRoot> <TableSection Title="Test Section" TextColor="#FFFFFF"> <TextCell Text="Test Item" TextColor="#FFFFFF"/> </TableSection> </TableRoot> </TableView> 

For TextCell, TextColor="#FFFFFF" seems to work, however whenever I use this attribute in TableSection, I get the following:

 An unhandled exception occurred. 

Is it possible to change the color of a table using xaml?

Answer 1

Custom renderings! I have two blog entries:

Android: Xamarin.Forms TableView Section Custom Title on Android

iOS: Xamarin.Forms TableView Section Custom Header on iOS

Basically, create a custom view that inherits from TableView , and then custom renderers that implement custom TableViewModelRenderer . From there, you can override the methods to get the section title header.

Here's what Android might look like:

 public class ColoredTableViewRenderer : TableViewRenderer { protected override TableViewModelRenderer GetModelRenderer(Android.Widget.ListView listView, TableView view) { return new CustomHeaderTableViewModelRenderer(Context, listView, view); } private class CustomHeaderTableViewModelRenderer : TableViewModelRenderer { private readonly ColoredTableView _coloredTableView; public CustomHeaderTableViewModelRenderer(Context context, Android.Widget.ListView listView, TableView view) : base(context, listView, view) { _coloredTableView = view as ColoredTableView; } public override Android.Views.View GetView(int position, Android.Views.View convertView, ViewGroup parent) { var view = base.GetView(position, convertView, parent); var element = GetCellForPosition(position); // section header will be a TextCell if (element.GetType() == typeof(TextCell)) { try { // Get the textView of the actual layout var textView = ((((view as LinearLayout).GetChildAt(0) as LinearLayout).GetChildAt(1) as LinearLayout).GetChildAt(0) as TextView); // get the divider below the header var divider = (view as LinearLayout).GetChildAt(1); // Set the color textView.SetTextColor(_coloredTableView.GroupHeaderColor.ToAndroid()); textView.TextAlignment = Android.Views.TextAlignment.Center; textView.Gravity = GravityFlags.CenterHorizontal; divider.SetBackgroundColor(_coloredTableView.GroupHeaderColor.ToAndroid()); } catch (Exception) { } } return view; } } } 

And on iOS:

 public class ColoredTableViewRenderer : TableViewRenderer { protected override void OnElementChanged(ElementChangedEventArgs<TableView> e) { base.OnElementChanged(e); if (Control == null) return; var coloredTableView = Element as ColoredTableView; tableView.WeakDelegate = new CustomHeaderTableModelRenderer(coloredTableView); } private class CustomHeaderTableModelRenderer : UnEvenTableViewModelRenderer { private readonly ColoredTableView _coloredTableView; public CustomHeaderTableModelRenderer(TableView model) : base(model) { _coloredTableView = model as ColoredTableView; } public override UIView GetViewForHeader(UITableView tableView, nint section) { return new UILabel() { Text = TitleForHeader(tableView, section), TextColor = _coloredTableView.GroupHeaderColor.ToUIColor(), TextAlignment = UITextAlignment.Center }; } } } 

Answer 2

According to the official documentation for TableSection , you're out of luck. I'm afraid you will have to write your own renderer for a subclass of the TableSection class and set an additional property of the Xamarin.Forms.Color type. Then you can set the color from XAML.

Answer 3

You can set this color in the base theme (can be applied to other widgets)

In /Resources/values/styles.xml

 <style name="MainTheme.Base" parent="Theme.AppCompat.Light"> <item name="colorAccent">#434857</item> 

For headings of individual sections, the TextColor property now works correctly:

 <TableView Intent="Settings"> <TableRoot> <TableSection Title="App Settings" TextColor="Red">