A little workaround for a great Plugin: ImageCirclePlugin

At the end of 2014, James Montemagno has presented his ImageCircle Plugin. It’s a “very simple” plugin. It allows to display rounded images instead of standard images. Plugin has its repository on GitHub so you can download it and test using the ImageCircleTest project.

If you run the test project, you have an output like this:

Some monkeys and an empty circle.

If you take a look to the code, the image in the center is from an url:

Source = UriImageSource.FromUri(new Uri("http://upload.wikimedia.org/wikipedia/commons/e/ed/Saguinus_tripartitus_-_Golden-mantled_Tamarin.jpg"))

I like it. Now I would like to change the image because I want to use this Plugin in a project, and I would like to have this image inside a circle:

So:

• I download the image
• Copy the image in Droid.Resource.Drawable
• Add it to the Project in Xamarin Studio (Android Project)
• Rename the image (Xamarin does not like “-“)
• Modify the source

 Source = "shoppingbagicon.png"

This is the result:

Not too bad. I like it. But I would like the bag should be ALL visible. It’s like I have a bigger image that is cut by the circle. Indeed it is! If you set the BackgroundColor to red, you understand where are the boundaries of the image.

Speaking with James on Slack’s channel, he suggests to me to change the “Aspect” property, otherwise the solution should be to take a look to Platform specific implementation.

Changing the “Aspect” has been useless.

Modify the Custom Renderer… too difficult for me.

So, how can I have an image ALL inside a circle, where I can change the circle’s size and color? I have found this workaround:

• create a Grid with 1 row and 1 column
• create an Image
• create an ImageCircle
• add to the Grid the ImageCicle and the Image

this is the code

CircleImage ci = new CircleImage
{
  BorderColor = Color.Pink,
  FillColor = Color.Olive,
  BorderThickness = 3,
  HeightRequest = 150,
  WidthRequest = 150,
  Aspect = Aspect.AspectFill,
  HorizontalOptions = LayoutOptions.Center,
};
 
Image image = new Image()
{ 
  Source = "shoppingbagicon.png", 
  WidthRequest =  ci.WidthRequest - 40, 
  HeightRequest = ci.HeightRequest - 40, 
  HorizontalOptions = LayoutOptions.Center, 
  VerticalOptions = LayoutOptions.Center, 
};
 
Grid grid = new Grid() {HorizontalOptions = LayoutOptions.Center };
grid.Children.Add(ci, 0, 1, 0, 1);
grid.Children.Add(image, 0, 1, 0, 1);

Then you have to add the grid to your StackLayout, and we have this result:

A CircleImage with the image ALL inside the circle (the second in the list). It’s ok for me.

You can find the “updated” source in this fork: https://github.com/acaliaro/ImageCirclePlugin

Pubblicità