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.

Upcoming Events

July 9:
Coloring Party with Flint Handmade at Tenacity Brewing

July 12:
Concerts at The Valley

July 12:
Fenton Concerts in the Park

July 12:
Flint Art Walk

July 12:
Ribbon Cutting & Grand Opening: Boys & Girls Club of Greater Flint

July 12:
Ice Cream Social at Ferris Wheel

July 12:
Food Truck Festival

July 12:
Flint Art Walk

July 13:
Fenton ArtWalk

July 13:
Flint Alley Fest

July 13:
Flint City Bucks vs. Dayton Dutch Lions

July 14:
Christmas in July Open Garden at Felty Farm

Call Now Button(810) 771-2102