How can we add rounded corners to images?

[Wind-Explorer]

In Avalonia, we can use the CornerRadius markup tag to round several elements, including Border, Button, ListBox and more. Now I have a UI layout in which I think adding the same rounded corners to Image would look nice. However I see that CornerRadius is not an option under <Image/>.

Even after wrapping the Image inside a Border with CornerRadius, the Image still appears to have no rounded corners.

There are somehow no relevant information I can find regarding this. Am I not doing it the right way, or is this not possible in the current version of Avalonia?

[maxkatz6]

Set Border ClipToBounds to true, so it can clip its children.

[Wind-Explorer]

Thank you for the solution, works great! Though it would be nice if one day CornerRadius can be available for Image in Avalonia.

[ghost]

@Wind-Explorer Yeah that would be very helpful!

[Yukikaze924]

My problem solved! thank you for the solution*^____^*

[stany24]

You can easily add the CornerRadius property to image like this:

using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;

namespace DesktopClient.Controls;

public class RoundedImage:Image
{
    public static readonly AttachedProperty<double> CornerRadiusProperty =
        AvaloniaProperty.RegisterAttached<RoundedImage, double>(
            "CornerRadius", typeof(RoundedImage), 5);
    
    public static void SetCornerRadius(AvaloniaObject element, double parameter)
    {
        element.SetValue(CornerRadiusProperty, parameter);
    }

    public static double GetCornerRadius(AvaloniaObject element)
    {
        return element.GetValue(CornerRadiusProperty);
    }
    
    protected override Size MeasureOverride(Size availableSize)
    {
        IImage? source = Source;
        Size result = new();

        if (source != null)
        {
            result = Stretch.CalculateSize(availableSize, source.Size, StretchDirection);
        }
        Clip = new RectangleGeometry(new Rect(0, 0, result.Width, result.Height), GetCornerRadius(this),GetCornerRadius(this));
        return result;
    }
}