Xamarin.Forms Circle Image for iOS

(If U Want Full http://www.codeproject.com/Tips/832752/Xamarin-Forms-Circle-Image-for-iOS

Using the Code

Just put the class in the shared project, and the renderer in the iOS project.

The Renderer

Hide   Shrink    Copy Code

using System;
using Xamarin.Forms;
using MonoTouch.UIKit;
using Xamarin.Forms.Platform.iOS;
using System.Drawing;
using RBVRenderer;
using RBVRenderer.iOS;

[assembly: ExportRendererAttribute(typeof(CircleImage), typeof(CircleImageRenderer))]
namespace RBVRenderer.iOS
{

    public class CircleImageRenderer : ViewRenderer<CircleImage,UIView>
    {
        UIImageView imageView;
        protected override void OnElementChanged(ElementChangedEventArgs<CircleImage> e)
        {
            base.OnElementChanged(e);

            var rbv = e.NewElement;
            if (rbv != null) {

                var mainView = new UIView();

                imageView = new UIImageView (UIImage.FromBundle(rbv.FileSource));
                imageView.Frame = new RectangleF 
                (0, 0, (float)rbv.WidthRequest, (float)rbv.HeightRequest);
                imageView.Layer.CornerRadius = imageView.Frame.Size.Width / 2;
                if (rbv.HasBorder) {
                    imageView.Layer.BorderColor = rbv.BorderColor.ToCGColor();
                    imageView.Layer.BorderWidth = 2;
                }
                imageView.ClipsToBounds = true;

                mainView.Add (imageView);

                SetNativeControl(mainView);
            }
        }

        protected override void OnElementPropertyChanged
        (object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == CircleImage.HasBorderProperty.PropertyName) {
                if (Element.HasBorder) {
                    imageView.Layer.BorderWidth = 2;
                    imageView.Layer.BorderColor = this.Element.BorderColor.ToCGColor ();
                } else {
                    imageView.Layer.BorderWidth = 0;
                }
            }
        }
    }
}

The Class

Hide   Shrink    Copy Code

using System;
using Xamarin.Forms;

namespace RBVRenderer
{
    public class CircleImage : Image
    {
        public static readonly BindableProperty FileSourceProperty =
            BindableProperty.Create<CircleImage, string>(p => p.FileSource, "");

        /// <summary>
        /// string filename
        /// </summary>
        /// <value>The source.</value>
        public string FileSource
        {
            get { return (string)base.GetValue(FileSourceProperty);}
            set { base.SetValue(FileSourceProperty, value);}
        }

        public static readonly BindableProperty BorderColorProperty =
            BindableProperty.Create<CircleImage, Color>(p => p.BorderColor, Color.White);

        public Color BorderColor
        {
            get { return (Color)base.GetValue(BorderColorProperty);}
            set { base.SetValue(BorderColorProperty, value);}
        }

        public static readonly BindableProperty HasBorderProperty =
            BindableProperty.Create<CircleImage, bool>(p => p.HasBorder, false);

        public bool HasBorder
        {
            get { return (bool)base.GetValue(HasBorderProperty);}
            set { base.SetValue(HasBorderProperty, value);}
        }
    }
}

Usage

Hide   Copy Code

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:me="clr-namespace:RBVRenderer;assembly=RBVRenderer"
    x:Class="RBVRenderer.MainPage">
    <ContentPage.Content>
        <StackLayout Padding="20" 
        Spacing="20" BackgroundColor="Blue">

            <me:CircleImage  
                    x:Name="rbi" 
                    WidthRequest="50" 
                    HeightRequest="50"  
                    BorderColor="White"
                    FileSource="cyansquare.png">
            </me:CircleImage>

            <Label Text="Has Border" />
            <Switch BindingContext="{x:Reference rbi}"
                IsToggled="{Binding HasBorder, Mode=OneWayToSource}" />

        </StackLayout>
    </ContentPage.Content>
</ContentPage>