Microsoft-ui-xaml: CheckBox & RadioButton labels become off-center when text scaling >= ~150%.

[kmgallahan]

Describe the bug
The built-in text labels for both the CheckBox and RadioButton controls gradually gets more and more off center as the system's text scaling % increases.

Steps to reproduce the bug

1. Set text scaling to 150% or higher
2. Open the XAML Controls Gallery
3. View any of the CheckBox or RadioButton controls

Expected behavior
The text labels should remain aligned.

Screenshots

Version Info

XAML Controls Gallery version 1.2.10.0

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (xxxxx) | |
| May 2019 Update (18362) | Yes |
| October 2018 Update (17763) | |
| April 2018 Update (17134) | |
| Fall Creators Update (16299) | |
| Creators Update (15063) | |

| Device form factor | Saw the problem? |
| :-------------------- | :------------------- |
| Desktop | Yes/No? |
| Mobile | |
| Xbox | |
| Surface Hub | |
| IoT | |

Additional context

[jevansaks]

Agree, we should try to make the layout handle the text getting bigger in a more reasonable fashion. We've had this problem across many controls so whoever picks this up don't feel limited to just fixing these two. :)

[shaheedmalik]

Is there a vertical center option in WinUI?
I feel something of the sort would fix stuff like this.

[salmanmkc]

I couldn't replicate the scaling being off, but I changed some values within the project so that there is not any weird rounding

[jevansaks]

Is there a vertical center option in WinUI?

Yup! (VerticalAlignment) Agree it should be easy-ish to fix.

[salmanmkc]

updated the ones that were shown in the image, pending PR, will go through and check for more

[salmanmkc]

Okay, I've fixed all of them in the solution

[kmgallahan]

@jevansaks @salmanmkc

This is a general issue with the CheckBox and RadioButton controls, rather than their specific usage in the XAML Controls Gallery.

As as with most issues, I just noticed that the problem is more complicated than I originally thought. Refer to checkbox usage in the Settings app:

Alignment for single-line labels is straightforward. However, for multi-line labels the 'best case' involves alignment with just the first line of text, as opposed to the entire text block.

Hello rabbit hole...

[shaheedmalik]

First line vertical center probably would be the best solution. Unless there is a way to measure how much the space is taken up by the text and centered off of that.

[jevansaks]

updated the ones that were shown in the image, pending PR, will go through and check for more

Very cool! Should I assign this issue to you @salmanmkc, then? And did you submit a PR yet? I didn't see one come through.

[salmanmkc]

updated the ones that were shown in the image, pending PR, will go through and check for more

Very cool! Should I assign this issue to you @salmanmkc, then? And did you submit a PR yet? I didn't see one come through.

I already submitted a PR for it in XAML-Controls-Gallery, although my PRs are very messy at the moment, watching some videos to improve

[jevansaks]

I already submitted a PR for it in XAML-Controls-Gallery

I see. I was expecting a PR to this repo since I expect the fixes to be in the platform control styles.

[robloo]

Similar to HorizontalContentAlignment/VerticalContentAlignment on other controls, it seems a new property is needed here to cover all cases including multi-line checkbox content. Something like VerticalAlignment, etc.

This would mean it's up to the developer and their specific UI design to fix this. Otherwise, the control would have to make some difficult (and likely not general-purpose) calculations itself about it's overall text height and if the text it multi-line. That would then allow the control to decide if VerticalAlignment.Center or VerticalAlignment.Top with a margin should be used.

[chingucoding]

I would like to try to fix this issue :)

[chingucoding]

As @kmgallahan and @shaheedmalik already pointed out this is quite a difficult issue.
Supporting multi line text is really difficult, since we don't know if the text is multiline or not. For larger font sizes, the checkbox needs to center, for smaller font sizes, the text needs to center. This however is problematic with multiline text.

For text that is single line, finding a solution is quite easy, since we can simply center everything. However with multiline text, centering the checkbox may look weird:

Since CheckBox currently is a winrt component (AFAIK), adding new properties is not an option. However, according to the docs, a checkbox should not have more than two lines of text, which would look okayish:

The same problem also applies to RadioButtons, however we could introduce a custom property in this case.

[kmgallahan]

@chingucoding

Based on the CheckBox_themeresources.xaml -

If the checkbox here had a new inner container, then that container could have:

• VerticalAlignment="Center"
• Logic to set its Height equal to the label's LineHeight property

The Height = LineHeight logic would need to either use a binding or listen for TextScaleFactorChanged events to stay in sync (and anything else that could change the LineHeight?).

This would keep the checkbox centered with the first line, while ignoring any additional lines (since the outer container would still have VerticalAlignment="Top").

I'm not completely sure what the product of this would look like as the center of the LineHeight doesn't necessarily have to be the center of the text (see TextLineBounds), but it would probably produce a decent result.

[chingucoding]

While this is a very good idea, unfortunately, this (currently) does not work for two reasons:

1. The actual logic behind the control is currently not open source. This means we can not subscribe to events or do any calculations.
2. While testing your idea, I found out that, the LineHeight of both the TextBlock and the ContentPresenter are not the values you would exspect. The TextBlock has LineHeight=Auto and the ContentPresenter which renders the TextBlock has LineHeight=0, which are both not achieving the effect we need in this case.

What we could do, is introduce a new ThemeResource which defines the VerticalAlignment of the tickbox/radioindicator with default value set to "Center". If someone has text with multiple lines, they can choose to override it and deal with it the way that works best for them, while the default behavior works fine with text scaling.

[kmgallahan]

The actual logic behind the control is currently not open source.

Is that going to change with WinUI 3 release? If yes and that is the main roadblock to a proper solution, then this issue could just be marked 'Needs WinUI 3' for now.

If someone has text with multiple lines, they can choose to override it and deal with it the way that works best for them

Requiring a reskin isn't particularly optimal, especially considering display scaling, text scaling, and dynamic window/control sizing can all result in labels getting unexpectedly wrapped.

[chingucoding]

@jevansaks , @chigy : Any idea what would be the best solution for this? Should the radiobutton/checkbox center itself among multiple lines? Or would it better to center it with respect to the first line of text?

[kmgallahan]

Being able to get a 'most likely' line height value as mentioned in these issues could help:

• https://github.com/microsoft/microsoft-ui-xaml/issues/1255
• https://github.com/microsoft/microsoft-ui-xaml/issues/1226

[chigy]

@chingucoding , the ideal design is to center it on the first line of text. This is a bit old comp but here's how it may look.

[chingucoding]

@chingucoding , the ideal design is to center it on the first line of text. This is a bit old comp but here's how it may look.

Okay, thank you for the clarification.

The next question is what would be a suitable solution to this. Is it acceptable to do calculations in the code behind for this issue? Would this even be a reliable way to deal with this?

If we need background calculations, this is only something we can completely fix with WinUI 3.0 :/

[mdtauk]

Seems like there needs to be a baseline alignment option, where you can have an object align to the text baseline of a Text Block/Box, with offsets if necessary.

[chingucoding]

Unassigning myself as this is something we should look at when we have WinUI 3 and we can actually fix this.

[michael-hawker]

Does this happen with the ToggleSwitch too? I noticed the text seemed a bit low there too:

[chigy]

@michael-hawker , I expect the same issue to happen when the text has to be aligned with some other UI element.

[chingucoding]

@StephenLPeters I think the "good first issue" label is a bit missleading as this most likely requires WinUI 3 and probably deeper layout changes to center the labels with the first line of text.