Disable bounce effect on CollectionView in your Xamarin.Forms iOS app

I noticed a StackOverflow question where the author was interested in disabling the bounce effect for CollectionView. They had a method for ListView, but was now looking on how to do it for CollectionView on iOS. I put together a small sample, let me tell you what I did.

The Bounce Effect #

If you have no idea what the “bounce effect” is, let me explain first. If you’re on iOS and you show a scrolling control in any form or shape, when you scroll past the beginning or the end it will “bounce” back. This is also known as overscroll.

Underneath you can see this happening in a GIF.

Bouncing effect on the Xamarin.Forms CollectionView

Disabling the Bounce #

In native iOS you can simply disable this behavior by setting a property Bounces. This property is not exposed through Xamarin.Forms though. This is why we need a custom renderer to achieve this.

This custom renderer can be seen below. The CollectionViewRenderer actually wraps a UICollectionView object which has the Bounces property.

Just add this custom renderer to your iOS project, make sure that you want to use the NoBounceRenderer name or rename it :) and you should be all set.

Simply set that property to false and the bounce effect will be gone!

Want to learn more about creating custom renderers? Have a look at this video! Don’t forget to subscribe

That’s All Folks! #

Nothing more to it than this. I hope you can use this whenever you need it. This custom renderer is of course very specific to this one use-case. But with custom renderers you can change anything and everything about the way Forms renders your controls.

If you want to learn more about using custom renderers, be sure to check out my video that I recorded on this subject. Or the post about it.

Please reach out to me on Twitter if you liked this, or maybe have some other issue or question that you might need help with.

Header image based on People photo created by teksomolika - www.freepik.com