Xamarin.forms: iOS - Frame.CornerRadius faulty

[Blin4ik91]

Description

The corner radius is faulty on iOS

Steps to Reproduce

Code-Snipped:
<Frame CornerRadius="80" Grid.Row="0" Padding="2.5" BackgroundColor="Transparent" HeightRequest="80" WidthRequest="80" HorizontalOptions="Center" BorderColor="{StaticResource LightBackgroundColor}"> <fontAwesome1:FontAwesomeIcon Text="fas fa-store" TextColor="{StaticResource LightTextColor}" HorizontalOptions="Center" VerticalOptions="Center" FontSize="35" /> </Frame>

Expected Behavior

Round Frame

Actual Behavior

Square Frame with edges

Basic Information

• Version with issue: XF 3.4.0.1009999
• Last known good version: N/A
• IDE: Visual Studio Enterprise 2017
• Platform Target Frameworks:
  
  
  
  • iOS: 12.1
  
  
• Affected Devices: iPhone 7

Screenshots

[mattleibow]

This most probably is a bug, but as a workaround, you should be able to set the radius to _half_ the width or height. This is because the corner is a _radius_, which is half the diameter (or in this case, the length)

[programmation]

This most probably is a bug, but as a workaround, you should be able to set the radius to _half_

I respectfully disagree that this should be classed as a bug in Forms. The definition of the object says CornerRadius=80, HeightRequest=80, WidthRequest=80, so the graphics layer has done _exactly what was requested_. The bug (if it is one) is in the specification of the object. A simple CornerRadius=40 would fix it, with no changes required anywhere else. It is a _radius_, after all.

Please do not "fix" this issue - sometimes we _want_ to have CornerRadius > Height to achieve a particular look.

[mattleibow]

But now I am unsure. What is a square with a corner radius > height? Or even > height/2?
I did some tests with SVGs now and radius is always [0..height/2]

Is iOS right or wrong?

[programmation]

For me this is part of a wider problem in the XF framework, which is that it's not currently possible to apply an arbitrary graphics path to an object using only XF. In both Android and iOS (I presume also UWP) one can set up extra layers in an object, draw into them, and achieve any arbitrary graphic effect with some fairly simple programming. This is not possible in "stock" XF objects and requires instead creating new ones with associated renderers (or using Effects, which amounts to the same thing).
The ability to specify CornerRadius > Height is the thin end of the wedge here. The rounded corners are provided (at least on iOS) by some pre-packaged graphics that make it convenient to produce round-rects, up to and including circles. I guess the iOS philosophy is to do what the programmer requested, while the Android philosophy seems to be attempting to protect them from their own folly. I prefer the former and would strongly suggest we make Android (and other platforms as necessary) do what iOS does and allow CornerRadius of any size. It would also be nice to allow CornerRadius < 0 to "flip" the arc from convex to concave.

[Blin4ik91]

But now I am unsure. What is a square with a corner radius > height? Or even > height/2?
I did some tests with SVGs now and radius is always [0..height/2]

Is iOS right or wrong?

Either Android or iOS is wrong...

[AndreiMisiukevich]

But now I am unsure. What is a square with a corner radius > height? Or even > height/2?
I did some tests with SVGs now and radius is always [0..height/2]

Is iOS right or wrong?

iOS is wrong :)
Android works as expected (like svg)

[haavamoa]

I am so happy to see that the team is working on this issue, because it is very annoying to have to handle this differently for android and ios. :dancer:

58.33% corner radius for iOS.

When I tried the corner radius to be set to half of the height/width request, my OCD totally kicked in.

Below is an picture of me trying to create a circle with a frame, using 50% and 58.33%.
When at 50% I saw that the frame was not round. After fiddling around with difference values, I found that 58.33% of the height/width request is the best.

• I created an repository for this

Workaround

In the above repository, you can navigate to the WorkAroundPage.

I wanted a simple way of getting the correct CornerRadius depeing on the platform, so I created an Behaviour<Frame> called RoundedFrameBehaviour(here).

The usage of the behaviour can be found here.

[haavamoa]

Workaround

In the above repository, you can navigate to the WorkAroundPage.

I wanted a simple way of getting the correct CornerRadius depeing on the platform, so I created an Behaviour<Frame> called RoundedFrameBehaviour(here).

The usage of the behaviour can be found here.

I figured that this workaround did not work when I started to increase the height/width-request. If I change this to 50, the cornerradius percentage has to go down to 56% in order for it to stay perfectly round. This might be interesting for the team when looking at the bug.