Stop Bounce Effect in ScrollView — Xamarin Forms

Stop Bounce Effect in Scroll View — Xamarin Life

Hi guys back to track, There were scenarios according to designer perspective to stop default bounce effect of scrollview. Have you ever wondered how to achieve this ? Well don’t be worried, its not that much hard, ill guide you to achieve it.

Custom ScrollView

In order to stop bounce effect we need to create custom Scroll view and renderer classes respectively in Android and iOS projects. Before we start you need to know that only iOS has this bouncing effect in scroll view and Android doesn’t. By default Android doesn’t have any bouncing effect so we no need to worry about the android renderer class. Moreover we are not going to create such a renderer class for Android.

public class CustomScrollView : ScrollView
 {
 public CustomScrollView()
 {
 }
 }

CustomScrollViewRenderer

We need to create a CustomScrollViewRenderer.cs class in iOS project where this will be referred in runtime and work according to the new changes we have done here for specific platform.

[assembly: ExportRenderer(typeof(CustomScrollView), typeof(CustomScrollViewRenderer))]
namespace BounceEffect.iOS
{
 public class CustomScrollViewRenderer : ScrollViewRenderer
 {
 public CustomScrollViewRenderer()
 {
 }
protected override void OnElementChanged(VisualElementChangedEventArgs e)
 {
 base.OnElementChanged(e);
 Bounces = false;
 }
 }
}

Here we have an override method called OnElementChanged. Inside that we mention Bounce property of scrollview to false. Thats is guys all done. now we consume this custom scroll view in the xml page.

XML

In order to consume this we need to declare namespace in the parent element tag like below,

xmlns:local=”clr-namespace:BounceEffect”

namespace differ according to where you place the customscorllview.cs in the directory structure of the project. After adding the namespace now you can use like below to use the created CustomScrollView.

<local:CustomScrollView >
<! — your content goes here — >
</local:CustomScrollView/>

Okay guys thats it, now whatever content you place here will not have any bouncing effect. Check how this works with below example app.

Stop Bouncing effect in Xamarin Forms Scroll View — Xamarin Life

You can find the source code here in GitHub. Xamarin Forms never been easier. cheers guys.