Circle Images for your Xamarin.Forms Applications
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update ISSUE_TEMPLATE.md Mar 26, 2018
art Initial Commit Jun 20, 2016
src Add DesignTimeVisibleFlag Jan 25, 2019
.editorconfig Multi-Target! Mar 27, 2018
.gitattributes 🎊 Added .gitattributes & .gitignore files Jun 20, 2016
.gitignore Update Nugets, convert to .NET Standard Oct 2, 2017
CHANGELOG.md Update nugets and UWP scale: Fixes #47 Jan 16, 2019
LICENSE Initial Commit Jun 20, 2016
README.md Update README.md (#82) Jan 13, 2019

README.md

Circle Image Control Plugin for Xamarin.Forms

A simple and elegant way of displaying circle images in your Xamarin.Forms projects.

When upgrading to 3.0

Be sure to change the DLL name to:

xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"

If using 2.0 it is:

 xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"

Setup

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 Version
Xamarin.iOS iOS 7+
Xamarin.Android API 14+
Windows 10 UWP 10+

Usage

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 Aspect.AspectFill for the value of the Aspect property. 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"

If using 2.0 it is:

 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">
      <On Platform="Android, iOS">55</On>
      <On Platform="WinPhone">75</On>
    </OnPlatform>
  </controls:CircleImage.WidthRequest>
  <controls:CircleImage.HeightRequest>
    <OnPlatform x:TypeArguments="x:Double">
      <On Platform="Android, iOS">55</On>
      <On Platform="WinPhone">75</On>
    </OnPlatform>
  </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).

Final Builds

For linking you may need to add:

Android:

ImageCircle.Forms.Plugin.Abstractions;ImageCircle.Forms.Plugin.Android;

iOS:

--linkskip=ImageCircle.Forms.Plugin.iOS --linkskip=ImageCircle.Forms.Plugin.Abstractions

UWP:

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(ImageCircleRenderer).GetTypeInfo().Assembly
};
Xamarin.Forms.Forms.Init(e, rendererAssemblies);

License

Licensed under MIT, see license file

Want To Support This Project?

All I have ever asked is to be active by submitting bugs, features, and sending those pull requests down! Want to go further? Make sure to subscribe to my weekly development podcast Merge Conflict, where I talk all about awesome Xamarin goodies and you can optionally support the show by becoming a supporter on Patreon.