Simple but elegant way of display circle images in your Xamarin.Forms projects
- Available on NuGet: https://www.nuget.org/packages/Xam.Plugins.Forms.ImageCircle
- Install into your PCL project and Client projects.
In your iOS, Android, and Windows projects call:
Xamarin.Forms.Init();//platform specific init
ImageCircleRenderer.Init();
You must do this AFTER you call Xamarin.Forms.Init();
Platform Support
Platform | Supported | Version |
---|---|---|
Xamarin.iOS | Yes | iOS 7+ |
Xamarin.Android | Yes | API 14+ |
Windows Phone Silverlight | Yes | 8.0+ |
Windows Phone RT | Yes | 8.1+ |
Windows Store RT | Yes | 8.1+ |
Windows 10 UWP | Yes | 10+ |
Xamarin.Mac | No |
Instead of using an Image simply use a CircleImage instead!
You MUST set the width & height requests to the same value and you will want to use AspectFill. Here is a sample:
new CircleImage
{
BorderColor = Color.White,
BorderThickness = 3,
HeightRequest = 150,
WidthRequest = 150,
Aspect = Aspect.AspectFill,
HorizontalOptions = LayoutOptions.Center,
Source = UriImageSource.FromUri(new Uri("http://upload.wikimedia.org/wikipedia/commons/5/55/Tamarin_portrait.JPG"))
}
XAML:
First add the xmlns namespace:
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
Then add the xaml:
<controls:CircleImage Source="{Binding Image}" Aspect="AspectFill">
<controls:CircleImage.WidthRequest>
<OnPlatform x:TypeArguments="x:Double"
iOS="55"
Android="55"
WinPhone="75"/>
</controls:CircleImage.WidthRequest>
<controls:CircleImage.HeightRequest>
<OnPlatform x:TypeArguments="x:Double"
iOS="55"
Android="55"
WinPhone="75"/>
</controls:CircleImage.HeightRequest>
</controls:CircleImage>
Bindable Properties
You are able to set the BorderColor
to a Forms.Color to display a border around your image and also BorderThickness
for how thick you want it.
You can also set FillColor
to the Forms.Color to fill the circle. DO NOT set BackgroundColor
as that will be the square the entire image takes up.
These are supported in iOS, Android, WinRT, and UWP (not on Windows Phone 8 Silverlight).
For linking you may need to add:
ImageCircle.Forms.Plugin.Abstractions;ImageCircle.Forms.Plugin.Android;
--linkskip=ImageCircle.Forms.Plugin.iOS --linkskip=ImageCircle.Forms.Plugin.Abstractions
Be sure to read through the troubleshooting for UWP with .NET Native for your final package. You should add the package to the Init call of Xamarin.Forms such as:
var rendererAssemblies = new[]
{
typeof(ImageCircleRendererr).GetTypeInfo().Assembly
};
Xamarin.Forms.Forms.Init(e, rendererAssemblies);
Licensed under MIT, see license file