With a custom renderer can I make a TableSection.Title appear in small mixed case?

Question

Here's what I currently have:

<TableView Intent="Settings">
   <TableRoot>
      <TableSection>
         <TableSection.Title>
            This appears in uppercase
         </TableSection.Title>

Is there a way perhaps with an iOS custom renderer that I could convert the font that displays to a mixed upper and lower case and make the font size smaller such as I see Apple user in Settings > Control Center ?

Answer 1

For iOS you need for XF TableView TableViewRenderer with native control of UITableView. More here:

https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/renderers/

Below is the solution. The code in renderer of function Draw should be done in OnElementChanged but unfortunately it seems like Xamarin has a bug https://bugzilla.xamarin.com/show_bug.cgi?id=58731 Another problem that text conversion doesn't work either https://bugzilla.xamarin.com/show_bug.cgi?id=58732

One more small optimisation - to avoid doing text conversion in renderer every time control drawn textDecapitalized was added. Answering another question how to change text size I added hv.TextLabel.Font set (commented out but working).

so, working around these 2 bugs:

XML

<?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:ButtonRendererDemo;assembly=ButtonRendererDemo"
             x:Class="ButtonRendererDemo.CustomTablePage">

    <ContentPage.Content>
        <local:CustomTableView Intent="Settings">
            <TableRoot>
                <TableSection Title="First Case Sensitive Header">
                    <SwitchCell Text="New Voice Mail" />
                </TableSection>
                <TableSection Title="Second Case Sensitive Header">
                    <SwitchCell Text="New Mail" On="true" />
                </TableSection>
            </TableRoot>
        </local:CustomTableView>
    </ContentPage.Content>
</ContentPage>

Page code

namespace ButtonRendererDemo
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CustomTablePage : ContentPage
    {
        public CustomTablePage()
        {
            InitializeComponent();
        }
    }

    public class CustomTableView : TableView
    {

    }
}

Renderer

[assembly: ExportRenderer(typeof(CustomTableView), typeof(CustomTableViewRenderer))]
namespace ButtonRendererDemo.iOS
{
    public class CustomTableViewRenderer : TableViewRenderer
    {
        bool textDecapitalized = false;

        public override void Draw(CGRect rect)
        {
            base.Draw(rect);

            if (!textDecapitalized)
            {
                textDecapitalized = true;

                var tableView = Control as UITableView;
                var numSections = tableView.NumberOfSections();
                for (nint s = 0; s < numSections; s++)
                {
                    var hv = tableView.GetHeaderView(s);
                    if (hv != null) //always null in OnElementChanged. Bug reported
                    {
                        //unfortunately TextInfo doesn't work. Bug reported
                        //TextInfo textInfo = new CultureInfo("en-US", false).TextInfo;
                        // OR
                        //TextInfo textInfo = Thread.CurrentThread.CurrentCulture.TextInfo;

                        if (hv.TextLabel.Text.ToUpper().StartsWith("FIR"))
                            hv.TextLabel.Text = "First Case Sensitive Header";
                        else if (hv.TextLabel.Text.ToUpper().StartsWith("SEC"))
                            hv.TextLabel.Text = "Second Case Sensitive Header";

                        //hv.TextLabel.Font = UIFont.FromName(hv.TextLabel.Font.Name, 5f);
                    }
                }
            }
        }
    }   
}

Final result with small font case sensitive header