BackgroundSizing Inner/Outer do not work like Center when CornerRadius is very large (i.e. 999) about avalonia

[robloo]

@dbriard I'm not really interested in following what Fluent design is doing for the web and what you see in Figma. We have discussed this before but there are a few main reasons:

1. XAML corner radius is defined to be the middle of the stroke. I don't think Figma does that and it likely uses the outside of the stroke. So the math is going to be different already.
2. We need to match existing behavior from WinUI in this area. There is existing code that expects it to work the way it does.
3. What it's doing does actually make sense from a different viewpoint: It's giving you the most radius it possibly can towards the 999 target. Radius is not guaranteed to be circular and will be elliptical if there isn't enough width/height.

To double check what I said above here is what is reproduced in WinUI:

<StackPanel Padding="40" Orientation="Vertical" Background="White" Width="200">
        <ContentPresenter Foreground="Black" BorderBrush="Red" Content="OuterBorderEdge" BackgroundSizing="OuterBorderEdge" CornerRadius="9999" BorderThickness="1"/>
        <ContentPresenter Foreground="Black" BorderBrush="Red" Content="InnerBorderEdge" BackgroundSizing="InnerBorderEdge" CornerRadius="9999" BorderThickness="1"/>
    </StackPanel>

It works exactly as intended and we match the algorithm correctly in these cases. Only CenterBorder needs to be fixed.

[robloo]

Can you provide the exact XAML you were using? Anything to save time and ensure precise communication is appreciated.

I also want to know how WPF and WinUI work in this situation.

I agree there is an issue as it should not change like this based on BackgroundSizing. However, I suspect inner and outer are actually correct and its center that needs to be fixed. That was my addition to WinUI code. The algorithm attempts to give you exactly what you request and only clips if it has to. There is no guarantee of circular corner radius -- it will give you the most possible in both X and Y direction if you put in 999.

I suggest a converter for your case if you can't guarantee a constant height of the controls.

[dbriard]

@robloo
Sorry, I thought I had included the code but it seems I deleted it by mistake.
Here is another example:

<ContentPresenter BorderBrush="Red" Content="CenterBorder" BackgroundSizing="CenterBorder" CornerRadius="9999" BorderThickness="1"/>
<ContentPresenter BorderBrush="Red" Content="OuterBorderEdge" BackgroundSizing="OuterBorderEdge" CornerRadius="9999" BorderThickness="1"/>
<ContentPresenter BorderBrush="Red" Content="InnerBorderEdge" BackgroundSizing="InnerBorderEdge" CornerRadius="9999" BorderThickness="1"/>

and result:

I found the idea of using large CornerRadius in Fluent2 design website
They were using a value of 10000 (by the time I copied their styles) for controls such as PersonPicture, PillButton, etc... In their current website, they are now using a special value of 50% but I suppose css support that.

Also, in Design Tools such as Figma, the CornerRadius work like Center in Avalonia:

I am sure there are more use cases for that behavior, and a converter would be overkill to do that. That is really smart, you just set a large value and get the look you want whatever the height or the content of the control. And I cannot name a single control where the corners look like inner/outer in the above picture.

[timunie]

I agree with @robloo here. A converter isn't overkill. It's in fact easy to add. You can pass Bounds, get the Min of Width and Height and devide by 2. Done.

Will leave the ticket open for point 3 to track.

[dbriard]

Ok, I can live with a converter, or I can keep my current Border implementation for rounded control, but that will be a breaking change with the original Avalonia center sizing... my last try ;)

[robloo]

Here is how WPF behaves.

<StackPanel Orientation="Vertical" Background="White" Width="200">
    <Border TextElement.Foreground="Black" BorderBrush="Red" CornerRadius="9999" BorderThickness="1">
        <TextBlock Text="Border Content" />
    </Border>
</StackPanel>

The behavior you are asking for was always a bug if we follow the rendering behavior of existing DirectX/XAML frameworks (and we do most of the time). DirectX likely established this decades ago and is just the standard now. Is it different from other graphical frameworks? Yes. Does it make sense though? Also yes (it's giving you the most it can towards your requested radius and just going elliptical).

The reason we have a problem (a difference) is because we just let Skia handle this case historically and it doesn't work the same as DirectX/XAML should. We will likely have to remove the simple rendering path in this case as well.