如何在 Xamarin.UWP 中更改 TableView TableSection 中的 TextSize 和大小写

Question

I have a CustomTableView control which I made from the Xamarin TableView . I used custom renderers to change the TextSize and Boldness for Android and iOS with code inspired by this post .

I want to do the same for UWP, but I have no idea how to achieve this. Specifically I want to make the Text in the TableSections bigger and Make this text start with Uppercase letters as well. Any ideas on how I could achieve this would be highly appreciated.

Answer 1

How to change the TextSize and Casing in TableView TableSection in Xamarin.UWP

Please check this code line , Xamarin places TextBlock in the TableSection DataTemplate . If you want to edit the properties you can do that by adding a DataTemplate to your App.Xaml file in the UWP project. If you want to edit FontSize , you can use the code below. (Note the FontSize property) .

<Application.Resources>
    <DataTemplate x:Key="TableSectionOne">
        <TextBlock
            Margin="0,20,0,0"
            FontSize="55"
            Foreground="{Binding TextColor, Converter={StaticResource ColorConverter}, ConverterParameter=DefaultTextForegroundThemeBrush}"
            Style="{ThemeResource SubtitleTextBlockStyle}"
            Text="{Binding Title, Converter={StaticResource LowerConverter}}"
            Visibility="{Binding Text, RelativeSource={RelativeSource Mode=Self}, Converter={StaticResource CollapseWhenEmpty}}" />
    </DataTemplate>
</Application.Resources>

In the UWP Renderer for your customTableView you can set listview.GroupStyle.FirstOrDefault().HeaderTemplate manually like below.

class CustomTableViewRender : TableViewRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<TableView> e)
    {
        base.OnElementChanged(e);

        if(Control != null)
        {
            var listview = Control as Windows.UI.Xaml.Controls.ListView;
            listview.GroupStyle.FirstOrDefault().HeaderTemplate = (Windows.UI.Xaml.DataTemplate)Windows.UI.Xaml.Application.Current.Resources["TableSectionOne"];
           
        }
    }   
}

Unfortunately, TableSection does not support inherit, so we can't extend dependency property for it.

As for the casing of the Title , you can simply remove the Converter={StaticResource LowerConverter} from the Text , and set the Title for the TableView to a string with with whatever casing you like and it will not be converted to lowercase. So it would end up looking like this:

<Application.Resources>
    <DataTemplate x:Key="TableSectionOne">
        <TextBlock
            Margin="0,20,0,0"
            FontSize="55"
            Foreground="{Binding TextColor, Converter={StaticResource ColorConverter}, ConverterParameter=DefaultTextForegroundThemeBrush}"
            Style="{ThemeResource SubtitleTextBlockStyle}"
            Text="{Binding Title}"
            Visibility="{Binding Text, RelativeSource={RelativeSource Mode=Self}, Converter={StaticResource CollapseWhenEmpty}}" />
    </DataTemplate>
</Application.Resources>