Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CircularImage in Xamarin.Forms

I need to have Image control in Xamarin.Forms with rounded corners. But I did not find any property that could make it. How to have circular Image ?

like image 484
Jan Avatar asked Nov 29 '22 06:11

Jan


2 Answers

I use the FFImageLoading libraries CachedImage control with a circle transformation for circle images:

<ffimageloading:CachedImage  
        DownsampleToViewSize="true"
        Aspect="AspectFill"
        Source = "{Binding Image}"
        LoadingPlaceholder = "{Binding DefaultImage}"
        ErrorPlaceholder = "{Binding DefaultImage}">
    <ffimageloading:CachedImage.Transformations>
        <fftransformations:CircleTransformation />
    </ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>

enter image description here

like image 86
matthewrdev Avatar answered Dec 04 '22 21:12

matthewrdev


You can use Image Circle Control Plugin

<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>

enter image description here

Read more at Project github readme

You can also use CircleImage from Xamarin-Forms-Labs project.

like image 28
Giorgi Avatar answered Dec 04 '22 21:12

Giorgi