Xamarin.forms: [Enhancement] Rounded image

[PureWeen]

Rationale

Images can't be rounded without adding an effect to each platform. Seeing as how this is a popular style it'd be useful to have this behavior built in

Implementation

Add CornerRadiusProperty to Image

 struct CornerRadius
        {
            public double TopLeft { get; set; }
            public double TopRight { get; set; }
            public double BottomLeft { get; set; }
            public double BottomRight { get; set; }

            public static implicit operator CornerRadius(double uniformRadius)
            {
                return new CornerRadius(uniformRadius);
            }
        }


public static readonly BindableProperty CornerRadiusProperty = BindableProperty.Create(nameof(CornerRadius), typeof(CornerRadius), default(CornerRadius));

Additionally add these so the border can be styled

public static readonly BindableProperty BorderThicknessProperty =
     BindableProperty.Create(propertyName: nameof(BorderThickness),
         returnType: typeof(Thickness), declaringType: typeof(Image));

public static readonly BindableProperty BorderColorProperty =
    BindableProperty.Create(propertyName: nameof(BorderColor),
        returnType: typeof(Color), declaringType: typeof(Image));

public static readonly BindableProperty FillColorProperty =
    BindableProperty.Create(propertyName: nameof(FillColor),
        returnType: typeof(Color), declaringType: typeof(Image));

Renderers will frame the image based on the supplied CornerRadiusProperty

Expected Result

Android

• Image.CornerRadius = 10: should frame the image using the given Corner Radius
  

  iOS

See Android

UWP

See Android

Implications for CSS

img {
    border-radius: 50%;
}

Backward Compatibility

This is adding a new set of properties so should be backwards compatible. Need to ensure that if the user doesn't specify any of these properties that the image displays as it did when none of these properties existed

Difficulty : Easy

This is an easy change and great for a first time contributor. All the platforms have fairly straightforward mechanisms for adding things into a rounded frame. The tricky part might be ensuring that they all interpret the CornerRadiusProperty in such a way that's the same across all three platforms

Existing 3rd party implementation for creating circle images
https://github.com/jamesmontemagno/ImageCirclePlugin

[tsjdev-apps]

I will take a look at this issue, if it is ok.

[tsjdev-apps]

I have one question about the CornerRadius property. This is the description above of type CornerRadius, but should it be of this type instead of float? Because in the platforms the control takes only an float. Another option is to have it as type of bool to activate rounded image by calculating the value from Width and Height of the image.

[davidortinau]

@PureWeen @tsjdev-apps is it possible to expand this to take any content, not just an image? Or maybe that is getting into more general "masking" territory and would be a different piece of work?

[hartez]

should it be of this type instead of float

Radiuses (radii?) are doubles on WPF and UWP, at least.

[hartez]

Also, I'm not certain using a set of corner radiuses really captures the intent here - I think what people want is to be able to say "the image should display at this height and width, and it should be shaped as an ellipse which fills that rectangle". @davidortinau does that seem accurate?

[tsjdev-apps]

Are there any news how to implement this feature? In my opinion the bool is the best type and than call it something like ShowAsRoundedImage as property. What do you think?

[hartez]

@tsjdev-apps I think we're still trying to answer some questions on that.

There's @davidortinau's larger question of whether we can extend this to any content; I think the answer will probably be "yes", but even if that turns out to be the case, we'll still need a specific implementation for each renderer.

A more specific question I think we should answer is what "rounded" means; are we looking for rounded corners, a circle, or an ellipse?

Another option is to have it as type of bool to activate rounded image by calculating the value from Width and Height of the image.

So you're assuming it's not rounded corners, and I agree. So is it a circle with radius equal to the lesser of the width and height of the View? Or is it an ellipse with major and minor axes equal to the View dimensions?

[tsjdev-apps]

In my opinion most of the time the users whats an circled image. So the easiest way was to rewrite the renderes and caluclate the radius while taking the smalles side (width or height) and make the image round. Than you can also apply a Color for a border or the border thickness if you want.

[davidortinau]

@tsjdev-apps @hartez @jassmith are we moving forward with this, or going a different direction? I'm not clear from the discussion. Issue is currently marked "In Progress".

[hartez]

@davidortinau First we need an answer on what the original intent was. Is "Rounded Image" an image in a circle, or is it an image with rounded corners? The proposal is written for the latter, but it includes a link to Motz's ImageCirclePlugin, which suggests the former. Do you know which one was intended?

[jassmith]

We need to move this one back to the drawing board, honestly both need to apply. Further there is another F100 bug already in existence that seems to cover this.

[davidortinau]

Moving to the backlog per previous conversation.

[davidortinau]

Closing this in favor of pursuing #1754