Baseline Alignment is offset by lowercase letters with a descender

[Matthew]

The baseline alignment is offset by lowercase letters where a descender letter (g, j, y, p, q) is present. In the image below, you can see some fields are floating a little higher than others. This occurs in the header and body of the grid.

[Didi]

Hi Matthew, 

I have tested on WinUI and cannot reproduced the behavior. Also it seems gird lines in the header are not visible, filter indicator, etc. Do you have any customization in the DataGrid header?

I will need more details on the exact setup you have and on which platform the issue occurs?

Also what are the Telerik .NET MAUI version and .NET version used in the project?

[Matthew]

Hello, I am now using Maui 7.0.49 and latest Telerik 4.0 and can reproduce this issue on both Windows and Mac.

[Lance | Manager Technical Support]

Hi Matthew, can you please reply back to this comment with the code you're using for the DataGrid? This will help Didi replicate the issue.

From your screenshot, it appears as if you've set a custom HeaderTemplate that doesn't have the default Padding. This padding usually accounts for the kerning, descenders and ascenders. You can learn more about column header customization here .NET MAUI DataGrid Documentation - Columns Header.

If you are indeed using your own DataTemplate, I recommend making sure you've added enough Margin or Padding. Here's a very simple example:

<DataTemplate x:Key="MyColumnHeaderTemplate">
    <MyRootElement Padding="4,2,2,4">
        ...
    </MyRootElement>
</DataTemplate>

[Teddy]

This is once again evident in your own SDK Browser sample. Here's a zoomed in screenshot of the Property Aggregates data grid sample, running v4.0.0 on .NET 7. In Windows. Notice Price has no descenders, but Delivery Price does. The baselines are not even:

And to your point, no, we are not setting the Header Template or margins, or messing around with anything in the Style that might be changing this. We are just setting HeaderText, same as this SDK Browser sample is.

[Lance | Manager Technical Support]

Thank you for the excellent explanation, Teddy!

I have created the following Bug Report on your behalf in Matthew's account => [DataGrid] Column header text is offset by char descenders, causing misaligned.  

In the meantime, as a workaround, you might be able to use the HeaderStyle object to set a vertical alignment of center or top, but I think this might require a DataTemplate. I'll need to investigate this a little further to see which option provided the best results. If I do develop a decent solution, I'll post it in the Bug Report thread.

Side Notes

• @Teddy - I've already added yours and Matthews upvote to the Bug Report. However, I cannot subscribe you to it. Go to the page and click the "Follow" button to get updates by email.
• @Matthew - If you are a dev using UI for MAUI, you might want to ask Sridhar or Brendan to add you to the license. This will let you open priority support tickets. If you're QA or design, then you can use a Telerik NuGet Key instead.

[Lance | Manager Technical Support]

Hi Matthew and Teddy,

As promised, I spent some time experimenting with different ways to handle the issue until there's an official resolution with the logged bug report. I have some success to share.

Option 1 (easier): Change Vertical Options

I found that the best-looking one was to use DataGridColumnHeaderStyle TextVerticalOptions="Center" because it cut the visual discrepancy in half.

Here's what it looks like in the ControlsSample demo:

Here's the code change in AggregateSupportView.xaml

Note that there are a ton of other properties in the DataGridColumnHeaderStyle that you can tweak, too. For example, you can also modify the FilterIndicatorMargin or SortIndicatorMargin to shift them a little bit, but I found the best results with the vertical alignment

 

Option 2 (advanced) - Custom HeaderContentTemplate

The only other option I can propose is that you take full control over the Label that renders the header text. This is done by defining your own DataTemplate, then using that DataTemplate for the column's HeaderContentTemplate property. 

The BindingContext is the column instance, so you can bind to the HeaderText property,

<telerik:DataGridNumericalColumn.HeaderContentTemplate>
    <DataTemplate>
          <!-- You have full control over the appearance now. -->
          <Label Text="{Binding HeaderText}" />
    </DataTemplate>
</telerik:DataGridNumericalColumn.HeaderContentTemplate>

Here's what that looks like at runtime:

> Note: You do not need to worry about the sort or filter indicators, the ContentView that is used for the header text lies between them.

Regards,
Lance | Manager Technical Support
Progress Telerik