Images - James Montemagno https://staging.montemagno.com/tag/images/ https://staging.montemagno.com/content/images/2017/08/MonogramIcon_Orange_NoBuffer.png Images - James Montemagno https://staging.montemagno.com/tag/images/ Hugo -- gohugo.io Tue, 13 Oct 2026 23:21:57 GMT 60 Xamarin.Forms: How to Clip Images with Rounded Corners https://staging.montemagno.com/xamarin-forms-how-to-clip-images-with-rounded-corners/ 5d3a79f30ffbc60038e301b1 Fri, 26 Jul 2019 17:00:00 GMT

I love watching trends in mobile design. Currently gradients are all the rage, but two trends that have been around for a while are rounded corners and circular images. A long time ago I created the Circle Image plugin for Xamarin.Forms that many developers know and love, but did you know that you can just use built in controls to get a circle or rounded corners? All you have to do is use a frame and set a few special properties!

Let's start slow and just put a beautiful Red-shanked Douc Langur on our Page:

<StackLayout Padding="40">
    <Image Source="monkey.jpg"
       HorizontalOptions="Center"
       VerticalOptions="Center" />
</StackLayout>

Monkey

Now let's wrap this cutie in a Frame ensuring we set the Padding to 0, as it defaults to a large number, and the CornerRadius to what we would like:

<StackLayout Padding="40">
    <Frame CornerRadius="20"
           Padding="0">
        <Image Source="monkey.jpg"
           HorizontalOptions="Center"
           VerticalOptions="Center" />
    </Frame>
</StackLayout>

Monkey2

Wait a second... where are our rounded corners? Well this is because we need to set the IsClippedToBounds property to ensure that the image gets clipped correctly:

<StackLayout Padding="40">
    <Frame CornerRadius="20"
           Padding="0"
           IsClippedToBounds="True">
        <Image Source="monkey.jpg"
           HorizontalOptions="Center"
           VerticalOptions="Center" />
    </Frame>
</StackLayout>

Monkey3

Circular Images with Frame

One of my favorite features of Frame is that if you set the Width and Height you can create a circle image by setting the CornerRadius to half of the Width/Height:

<StackLayout Padding="40">
    <Frame CornerRadius="100"
           HeightRequest="200"
           WidthRequest="200"
           HorizontalOptions="Center"
           Padding="0"
           IsClippedToBounds="True">
        <Image Source="monkey.jpg"
           HorizontalOptions="Center"
           VerticalOptions="Center" />
    </Frame>
</StackLayout>

Monkey4

Here it is using XAML Hot Reload šŸ”„šŸ”

Circles

This approach is also works if you are using the incredible PancakeView control that also supports gradients!

pancake

Xamarin.Forms 5

If you have upgraded to Xamarin.Forms 5 then you can optionally use the brand new Shapes API. Everything view can be "Clipped". It is one of my new favorite features, and I use it all the time because it doesn't introduce a new view to the heirarcy.

<StackLayout Padding="40">
    <Image Source="monkey.jpg"
       WidthRequest="100"
       HeightRequest="100"
       HorizontalOptions="Center"
       VerticalOptions="Center">
        <Image.Clip>
            <EllipseGeometry
                Center="50,50"
                RadiusX="50"
                RadiusY="50"/>
        </Image.Clip>
    </Image>
</StackLayout>

This will give you the same exact effect :)

]]> Xamarin.Forms Image Caching in XAML https://staging.montemagno.com/xamarinforms-image-caching-in-xaml/ 598df8f2c121b60019bf3008 Sat, 13 Jun 2015 15:39:46 GMT A lot of mobile applications have to deal with Images. There are a lot of awesome libraries for iOS and Android that will automatically download, optimize, and cache your images for you from a single line or two of code. Xamarin.Forms actually handles all of this for you automatically when you give the Imageā€™s Source property an Image URL. You can read through the awesome documentation on the Xamarin developer portal. If you browse through this documentation you will see a section that says ā€œImage Cachingā€ and that is interesting. Xamarin.Forms actually handles image caching for you automatically for 1 day. You can enable or disable or extend this time easily in C#:

However, something that isnā€™t documentated just yet, although I will ping Craig about this, is how to do it in XAML. It is actually extremely simple as you can access all the properties of the Source including the ability to extend image caching. Here is what my image looks like with extending the image cache to 14 days:

Are you using Circle Images? Well you can still do it!

You can always adjust the CacheValidity=ā€œ14ā€ as it just creates a new timespan in days for you.

]]>