如何设置 TextColor Xamarin.Forms TableSection？答案

【问题标题】：How to set TextColor Xamarin.Forms TableSection?如何设置 TextColor Xamarin.Forms TableSection？
【发布时间】：2015-11-20 08:59:15
【问题描述】：

我喜欢在 xaml 中做尽可能多的事情，我有一个带有 TableSection 的 TableView`。

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

对于 TextCell TextColor="#FFFFFF" 似乎有效，但是每当我在 TableSection 上使用此属性时，我都会得到：

An unhandled exception occurred.

是否可以用 xaml 更改 TableSection 的颜色？

【问题讨论】：

我遇到了同样的问题。我已将其报告给 Xamarin.Forms GitHub，github.com/xamarin/Xamarin.Forms/issues/2910，让我们看看情况如何。
似乎在 Xamarin Forms 版本 3.5 及以后的版本中得到修复

标签： xaml xamarin.forms

【解决方案1】：

自定义渲染器！我在这里有两篇博文：

安卓：Xamarin.Forms TableView Section Custom Header on Android

iOS：Xamarin.Forms TableView Section Custom Header on iOS

基本上，创建一个继承TableView 的自定义视图，然后创建实现自定义TableViewModelRenderer 的自定义渲染器。从那里你可以重写方法来获取部分标题的标题视图。

这可能是 Android 的样子：

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;
        }
    }
}

在 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
            };
        }
    }
}

【讨论】：

对于这样一个看似基本的事情来说这是必要的，这很烦人，但我想这正是试图在一个库下支持这么多平台的结果。
Android 版本似乎改变了每一个TextCell，而不仅仅是标题。
使用GetCellForPosition(int position, out bool isHeader, out bool nextIsHeader) 变体。这是private，但反射会有所帮助。
知道如何为 UWP 做到这一点吗？

【解决方案2】：

根据官方documentation for TableSection 的说法，您不走运。恐怕您必须为TableSection class 的子类编写自定义渲染器并公开Xamarin.Forms.Color 类型的额外属性。然后你就可以从 XAML 中设置颜色了。

【讨论】：

TableSection 是一个密封类。它不能有子类。

【解决方案3】：

您可以在基本主题中设置此颜色（也可能适用于其他小部件）

在/Resources/values/styles.xml

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

对于个别章节标题，TextColor 属性现在似乎可以正常工作：

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

【讨论】：