CODEWITHSUNDEEP
c#iosxamarin.iosuiimageviewxamarin
Prad
Prad

Reputation: 469

Make ImageView Circular

I have an ImageView which I am attempting to make Circular in Xamarin. This would be simple enough and I would have done it with Core Animation, but the images are being downloaded Asynchronously like this:

this.profileImage.InvokeOnMainThread (() => this.profileImage.SetImage (
    url: new NSUrl (datum.user.profile_picture)
    )
);

How would I make these images circular?

Upvotes: 2

Views: 3326

Answers (3)

fred
fred

Reputation: 427

imageView.Layer.CornerRadius = imageView.Frame.Size.Width / 2;
imageView.ClipsToBounds = true;

Upvotes: 0

Jared Kove
Jared Kove

Reputation: 245

Following this - Late to the party but can be helpful

** Using OP's Code to make the application more generic as to make any image - regardless of size, circular **

this.profileImage.InvokeOnMainThread (() => this.profileImage.SetImage (
            url: new NSUrl (datum.user.profile_picture)
        )
    );

// Make Image Profile Image Circular
CALayer profileImageCircle = profileImage.Layer;
profileImageCircle.CornerRadius = profileImageCircle.Frame.Size.Width / 2;
profileImageCircle.MasksToBounds = true;

By Adding "profileImageCircle.Frame.Size.Width / 2;" we will get the radius needed for the image we are using, so that it will always be circular - assuming it is a square image.

Upvotes: 4

Prad
Prad

Reputation: 469

This is How I ended Up fixing my issue:

this.profileImage.InvokeOnMainThread (() => this.profileImage.SetImage (
            url: new NSUrl (datum.user.profile_picture)
        )
    );

// Make Image Profile Image Circular
CALayer profileImageCircle = profileImage.Layer;
profileImageCircle.CornerRadius = 30;
profileImageCircle.MasksToBounds = true;

Upvotes: 7

Related Questions