By: David Marchbanks
www.ptdave.com

Circle Image in Xamarin

So James Montemagno has written a plugin a long while back that provides an easy method for writing images to XAML. The only down side to this is that you have to add a namespace and nuget package.

So while watching Kym Phillpots on Twitch, I learned a new way of providing circular images without a plugin. It’s super easy!

So to start out we are going to wrap an image in a frame. Then adjust our corner radius to the appropriate radius ( half of your expected image size ). By default, the image is likely to bleed off the frame or some other unwarranted result.

        <Frame
            Padding="0"
            CornerRadius="60"
            HeightRequest="120"
            HorizontalOptions="CenterAndExpand"
            IsClippedToBounds="True"
            VerticalOptions="CenterAndExpand"
            WidthRequest="120">
            <Image Aspect="Fill">
                <Image.Source>
                    <UriImageSource Uri="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTxv6KzSo-T89N0xfuVNpO--yIlXba83JFrxUcJ0SuocPbbjpK" />
                </Image.Source>
            </Image>
        </Frame>

So in the above code, you’ll notice an attribute that you probably don’t know about, I didn’t. The IsClippedToBounds is the magic tool for our expected result. Setting this to true causes the children to be clipped by the parent container.

Assuming there is no other issue, you should get the following result:

It was too good to not share, and hopefully you learned a new trick.

Call Now Button(810) 771-2102