Xamarin Forms ListView Hide Scrollbars

  • by
xamarin-forms-listview-hide-scrollbar

Often times we need to hide Scrollbar displayed on ListView control. Starting from Xamarin Forms 3.5.0, we have the option of hiding Scrollbar on ListView control inbuilt. To hide it use-
To hide Vertical Scrollbar: VerticalScrollBarVisibility="Never"
To hide Horizontal Scrollbar: HorizontalScrollBarVisibility="Never"

DOWNLOAD EXAMPLE

Xamarin Forms ListView Hide Scrollbars Example:

We will create a simple Xamarin forms app with ListView control. We will display product information with product name and product price on our Listview control and hide the scrollbars on it. Create a Model class with name Products.cs and edit it as below:

Models > Products.cs:

public class Products
{
public string product { get; set; }
public string price { get; set; }
}

Create a Listview control on your MainPage.xaml form like below:

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XamSample"
x:Class="XamSample.MainPage"
Title="Xamarin ListView">

<StackLayout Orientation="Vertical" Padding="5">

<ListView x:Name="lstProducts" BackgroundColor="White" SeparatorColor="#000" CachingStrategy="RecycleElement"
RowHeight="70" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>

<StackLayout Orientation="Vertical" Padding="5">
<StackLayout Orientation="Horizontal">
<Label Text="Product:" TextColor="#000" Margin="2"/>
<Label Text="{Binding product}" TextColor="#000" Margin="2" FontAttributes="Bold" />
</StackLayout>

<StackLayout Orientation="Horizontal">
<Label Text="Price:" TextColor="#000" Margin="2"/>
<Label Text="{Binding price}" TextColor="#000" Margin="2" FontAttributes="Bold" />
</StackLayout>

</StackLayout>

</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

</StackLayout>

</ContentPage>

And edit its code-behind like below. We will bind the Listview control using ObservableCollection of type Products class.

MainPage.xaml.cs:

using System;
using System.Collections.ObjectModel;
using Xamarin.Forms;
using XamSample.Models;

namespace XamSample
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindList();
}

public void BindList()
{
try
{
ObservableCollection<Products> ob = new ObservableCollection<Products>();
Random r = new Random(1);
for (int i = 0; i < 100; i++)
{
ob.Add(new Products { price = r.Next(1, 100000).ToString(), product = "A" + i });
}
lstProducts.ItemsSource = ob;

}
catch (Exception ex)
{

}
}
}
}

The BindList() method will bind our ListView control. Now run your App.

Result:Xamarin Forms ListView Hide Scrollbars-example

To hide Scrollbars of this ListView control using code-behind, you can use:

lstProducts.VerticalScrollBarVisibility = ScrollBarVisibility.Never;
lstProducts.HorizontalScrollBarVisibility = ScrollBarVisibility.Never;

DOWNLOAD SOURCE CODE

Also see:
Xamarin Forms Button Press CommandParameter

Xamarin forms SQLite DB – Perform CRUD operation.

Xamarin forms SkiaSharp – Creating different shapes

Xamarin forms Creating SQLite Database

Xamarin forms Creating Custom Button control