Implicit `TextBlock` styles incorrectly affect control layout calculations

mikernet commented 3 years ago

Current behavior

Implicit text block styles in scope of some controls mess up layout calculations. For example, this is what comboboxes look like on Uno.IU platforms (iOS, WASM) when a textblock style with a large top margin is present:

Checkbox checkmarks are also offset:

Expected behavior

Looks like this on UWP:

How to reproduce it (as minimally and precisely as possible)

http://playground.platform.uno/#8edc1bb5

Workaround

<ComboBox>
    <ComboBox.Resources>
        <Style TargetType="TextBlock"/>
    </ComboBox.Resources>
</ComboBox>

Environment

Nuget Package:

[ ] Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia
[ ] Uno.WinUI / Uno.WinUI.WebAssembly / Uno.WinUI.Skia
[ ] Uno.SourceGenerationTasks
[ ] Uno.UI.RemoteControl / Uno.WinUI.RemoteControl
[ ] Other:

Nuget Package Version(s): v3.6.0-dev.378, v3.8.6, v3.9.0-dev.54

Affected platform(s):

[X] iOS
[ ] Android
[X] WebAssembly
[ ] WebAssembly renderers for Xamarin.Forms
[ ] macOS
[ ] Skia
- [ ] WPF
- [ ] GTK (Linux)
- [ ] Tizen
[ ] Windows
[ ] Build tasks
[ ] Solution Templates

IDE:

[ ] Visual Studio 2017 (version: )
[ ] Visual Studio 2019 (version: )
[ ] Visual Studio for Mac (version: )
[ ] Rider Windows (version: )
[ ] Rider macOS (version: )
[ ] Visual Studio Code (version: )

Relevant plugins:

[ ] Resharper (version: )

Anything else we need to know?

jeromelaban commented 3 years ago

Thanks for the report.

I'm not seeing the behavior you're reporting: https://playground.platform.uno/#8e26c2fc

Can you create a larger repro case or playground link for your issue?

mikernet commented 3 years ago

I'm trying to copy all my styles over to narrow it down but getting errors like "Implicit content is not supported on SolidColorBrush" and "Implicit content is not supported on Thickness" for some odd reason:

https://playground.platform.uno/#1afad173

mikernet commented 3 years ago

Okay, I think I found the problem: https://playground.platform.uno/#78d184a5

It looks like the combox uses the implicit textblock style margin to do some layout calculations, causing the issues inside the combobox. This does not happen on UWP. Interestingly, it seems to ONLY be the margin that affects the combobox.

mikernet commented 3 years ago

Actually that's not true - the font size makes it do weird layout stuff when it first loads as well: https://playground.platform.uno/#e67ba490

Notice how it is the wrong size on initial layout and fixes itself after an item is selected.

It may be noteworthy to add that making a copy of the default UWP combobox template and using that does not fix the issue.

mikernet commented 3 years ago

I found a workaround for now: add an empty TextBlock style into the ComboBox resources, i.e:

<ComboBox>
    <ComboBox.Resources>
        <Style TargetType="TextBlock"/>
    </ComboBox.Resources>
</ComboBox>

mikernet commented 3 years ago

Note this also affects the checkmark layout in checkboxes: https://playground.platform.uno/#7538a1cc

unoplatform / uno