Microsoft-ui-xaml: CheckBox has fixed Height/MinWidth in Template

[michael-hawker]

Describe the bug
CheckBox has odd sizing due to fixed values in template (Height, MinWidth, etc...), this means if you just want to use the 'check box' without text as part of another layout/setup then it's difficult to just drop-in place.

I'd expect if I had just a <CheckBox/> element for it's bounding box to just be around the check like so:

(Or maybe with some Padding, but the Padding property is ignored by the check and only effects the inner Content.)

But it's not and currently does this:

Version Info

NuGet package version: 2.4.2

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

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

Additional context

Fixed values in template:

https://github.com/microsoft/microsoft-ui-xaml/blob/6e99a4150772813f9f2303de162e5698164197dc/dev/CheckBox/CheckBox_themeresources.xaml#L293-L294

https://github.com/microsoft/microsoft-ui-xaml/blob/6e99a4150772813f9f2303de162e5698164197dc/dev/CheckBox/CheckBox_themeresources.xaml#L639-L659

[chingucoding]

Hopefully with WinUI 3 we can find a more robust solution for CheckBox and RadioButton. Since those controls are not aware of the line height, essentially the padding for the tick/radio control needs to be hardcoded to correctly align with the text.

See #1520 for more on this.

[StephenLPeters]

This is in part by design. We set default values to 32 x 120 for minimum touch target considerations. We don't want checkbox to have very small touch footprints by default. If you want to change this any value you set should override the setter.

[msft-github-bot]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

[mdtauk]

Hopefully with WinUI 3 we can find a more robust solution for CheckBox and RadioButton. Since those controls are not aware of the line height, essentially the padding for the tick/radio control needs to be hardcoded to correctly align with the text.

See #1520 for more on this.

Hopefully WinUI 3 will allow changes to the text controls to introduce Baseline alignment options, as well as x-height and other typographic metric alignment.

[StephenLPeters]

Hopefully with WinUI 3 we can find a more robust solution for CheckBox and RadioButton. Since those controls are not aware of the line height, essentially the padding for the tick/radio control needs to be hardcoded to correctly align with the text.
See #1520 for more on this.

Hopefully WinUI 3 will allow changes to the text controls to introduce Baseline alignment options, as well as x-height and other typographic metric alignment.

This is a cool idea, do you know if we already have a proposal for it?

[michael-hawker]

@StephenLPeters saw you added needs-author-feedback but then this auto-closed the bug ☹

I didn't see an action back to me? I do understand touch targets can be a consideration, but it does make it harder to customize the default experience without this being called out somewhere, most other things like buttons don't have a minimum size like this.

[StephenLPeters]

@michael-hawker Does setting the minheight/width not resolve your issue? I guess I'm a little confused. Also is it true that button doesn't have a min size? I was pretty sure it did for the same reasons. I guess it expands to fill that space where Checkbox does not.

[michael-hawker]

@StephenLPeters I was able to override the min width/height and work around it I believe, I was just confused at it seemed to behaving differently than the button with blank content vs. content.