CornerRadius alignment

[MartinZikmund]

Current behavior

On most targets CornerRadius does not adjust based on BorderThickness, inner radius is not applied correctly, and outer radius is not calculated correctly when neighboring corner radii have total size greater than element size.

Expected behavior

Outer corner radius == CornerRadius + BorderThickness / 2
Inner corner radius == CornerRadius - BorderThickness / 2

When two neighboring corners would "overlap", their size is "fairly" distributed along the side of the element.

For accurate implementation that exactly adheres to UWP/WinUI see #10260

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

No response

Workaround

No response

Works on UWP/WinUI

No response

Environment

No response

NuGet package version(s)

No response

Affected platforms

WebAssembly, Android, iOS, macOS (AppKit), Mac Catalyst

Skia targets have the correct rendering since #10260

IDE

No response

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[Youssef1313]

Is this a duplicate of #6891?

[MartinZikmund]

@Youssef1313 this is a superset of that issue - it includes additional edge cases, so I will copy include the info here and close it 👍

[MartinZikmund]

From #6891

Current behavior

Edge case to fix on all platforms where Inner Radius doesn't match UWP when BorderThickness >= CornerRadius

Android

Expected behavior

Inner Radius calculations should match UWP behaviors when BorderThickness >= CornerRadius

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

<StackPanel>
		<toolkit:ElevatedView Height="100"
							  Width="200"
							  Background="Yellow"
							  CornerRadius="15"
							  BorderBrush="#66121212"
							  BorderThickness="15"
							  Margin="30">
			<Grid Background="DeepPink"
				  CornerRadius="25">
				<TextBlock Text="Test with ElevatedView"
						   VerticalAlignment="Center"
						   HorizontalAlignment="Center" />
			</Grid>
		</toolkit:ElevatedView>

		<Grid Height="100"
			  Width="200"
			  Background="Orange"
			  CornerRadius="15"
			  BorderBrush="#66121212"
			  BorderThickness="15"
			  Margin="30">
			<Grid Background="Red"
				  CornerRadius="25">
				<TextBlock Text="Test with a Grid"
						   VerticalAlignment="Center"
						   HorizontalAlignment="Center" />
			</Grid>
		</Grid>
	</StackPanel>

[MartinZikmund]

https://9elements.github.io/fancy-border-radius/#30.24.62.59--575.575

Fancy Border Radius Generator

Generator to build organic shapes with CSS3 border-radius

[MartinZikmund]

Duplicate issue:

Current behavior
Setting a CornerRadius on an element (let's say a ) on Wasm is leading to a too-small corner radius being applied to the element. But it works well on -- probably because it's using a SVG element with a different way to calculate the radius.

Expected behavior
(see playground link below) On Windows, both rectangle is having the same radius for both and and the result is very similar to the one... that would mean the problem is with the Border itself on Wasm.

How to reproduce it (as minimally and precisely as possible)
Playground link: playground.platform.uno/#e78e096c

Workaround
Doubling the value seems to produce the right result. That may be caused by a different way to calculate the radius. On Windows, the radius size seems applied to the outer part of the stroke and on HTML, it seems to be applied to the stroke path itself, so at the middle of it.

[michael-hawker]

This issue effects the RangeSelector control within the Windows Community Toolkit, as reported by Niels in the duplicate #9490.

[Youssef1313]

I think Android is fixed in #10455.

Wasm is being fixed in #13682

[Youssef1313]

@MartinZikmund Handing this back to you for iOS/macOS

[michael-hawker]

We're still seeing this in WASM in the WCT: CommunityToolkit/Windows#386