How to disable scrolling in Xamarin.Forms ListView (SfListView)?
You can disable the SfListView’s scrolling by disabling the Native ScrollView’s scrolling. The use cases for disabling Listview scrolling are as follows:
- Using nested ScrollView is not recommended in Xamarin.Forms. When using nested ListView, you can disable the inner ListView scrolling.
- In Android, to improve the scrolling performance when using nested scrollable content.
XAML
Set the SfListView.IsScrollingEnabled to False to load all the items in the SfListView. By default, the SfListView uses the items recycling concept, in which it only creates the elements that are in view on initial loading and reuses the items on scroll. Also, it loads the SfListView inside the ScrollView to perform scrolling.
<ScrollView>
<StackLayout>
<syncfusion:SfListView x:Name="listView"
ItemSize="60"
IsScrollingEnabled="False"
ItemsSource="{Binding ContactsInfo}">
<syncfusion:SfListView.ItemTemplate >
<DataTemplate>
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/>
<Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
<Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/>
<Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/>
</Grid>
</Grid>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</StackLayout>
</ScrollView>
C#
Define the dependency interface to disable the native scrolling of the ListView.
public interface IDependencyServiceListView
{
void DisableScrolling(SfListView ListView);
}
C#
In the native project, implement the IDependencyServiceListView and the DisableScrolling methods. Get the native ScrollView from the renderer and set the IsEnabled property to False.
#if Android
using Xamarin.Forms.Platform.Android;
#elif __IOS__
using UIKit;
using Xamarin.Forms.Platform.iOS;
#else
using Xamarin.Forms.Platform.UWP;
using Windows.UI.Xaml.Controls;
#endif
using ListViewXamarin.Droid;
using Syncfusion.ListView.XForms;
using Syncfusion.ListView.XForms.Control.Helpers;
using Xamarin.Forms;
[assembly: Dependency(typeof(ListViewDependencyService))]
namespace ListViewXamarin.Droid
{
public class ListViewDependencyService : IDependencyServiceListView
{
ExtendedScrollView ExtendedScrollView;
public void DisableScrolling(SfListView ListView)
{
ExtendedScrollView = ListView.GetScrollView();
var extendedScrollViewRenderer = Platform.GetRenderer(ExtendedScrollView);
#if __IOS__
(extendedScrollViewRenderer.NativeView as UIScrollView).ScrollEnabled = false;
#elif Android
(extendedScrollViewRenderer.Element as ExtendedScrollView).IsEnabled = false;
#else
var nativeView = extendedScrollViewRenderer.GetNativeElement();
extendedScrollViewRenderer.Element.IsTabStop = false;
(nativeView as ScrollViewer).IsEnabled = false;
#endif
}
}
}
C#
In the SfListView.Loaded event, call the DisableScrolling method using the DependencyService.
private void ListView_Loaded(object sender, ListViewLoadedEventArgs e)
{
DependencyService.Get<IDependencyServiceListView>().DisableScrolling(ListView);
}
ListView’s AutoScrolling will be disabled when implementing this solution.
Take a moment to peruse the documentation, to learn more about scrolling in SfListView with code examples.
