How to disable highlight on ListView in Xamarin.Forms

Question

I'm working with Xamarin.Forms and XAML, and I'm trying to create an application that stores a list of products. I put my list of products in a ListView. This works fine. Here is my XAML:

<ListView x:Name="listSushi"
        ItemsSource="{x:Static local:myListSushi.All}"
        SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
        RowHeight="{StaticResource rowHeight}"
        >
<ListView.ItemTemplate>
  <DataTemplate>
    <ViewCell>
      <ViewCell.View>
        <StackLayout Padding="5, 5, 0, 5"
                     Orientation="Horizontal"
                     Spacing="15">
          <StackLayout>
            <Image Source="{Binding ImageSource}" />
          </StackLayout>

          <StackLayout Padding="0, 0, 0, 0"
                       VerticalOptions="Center"
                       HorizontalOptions="FillAndExpand">                
                <Label Text="{Binding Name}"
                   Font="Bold, Medium" />
                <Label Text="{Binding Description}" 
                    Font="Small"/>
          </StackLayout>

          <StackLayout Orientation="Horizontal"
                        Padding="0, 0, 10, 0">
            <Button Text=" - " 
                    HorizontalOptions="EndAndExpand"
                    VerticalOptions="FillAndExpand"
                    Command="{Binding DeleteSushiCommand}"
                    CommandParameter="{Binding Name}"
                    />
            <Label VerticalOptions="Center" 
                   Text="{Binding Number,StringFormat='{0}'}"
                   TextColor="Black"/>
            <Button Text=" + " 
                    HorizontalOptions="EndAndExpand"
                    VerticalOptions="FillAndExpand" 
                    Command="{Binding AddSushiCommand}"
                    CommandParameter="{Binding Name}"
                    />
            </StackLayout>
        </StackLayout>
      </ViewCell.View>
    </ViewCell>
  </DataTemplate>
</ListView.ItemTemplate>

I've just the problem that if I click on a cell of my listView, the cell is highlight, and stay highlight. I've try to disable it with this code in the xaml.cs

listSushi.ItemSelected+= (object sender, SelectedItemChangedEventArgs e) => {
    // don't do anything if we just de-selected the row
    if (e.SelectedItem == null) return; 
    // do something with e.SelectedItem
    ((ListView)sender).SelectedItem = null; // de-select the row
};

But when I touch a cell, now my list is scrolling automatically. It's very strange.

Does anyone know if this is a bug, or know a fix, like if there is a property where I can disable the highlight?

Answer 1

You might try using the ItemTapped event instead, i.e.

listSushi.ItemTapped += (object sender, ItemTappedEventArgs e) => {
    // don't do anything if we just de-selected the row.
    if (e.Item == null) return;

    // Optionally pause a bit to allow the preselect hint.
    Task.Delay(500);

    // Deselect the item.
    if (sender is ListView lv) lv.SelectedItem = null;

    // Do something with the selection.
    ...
};

I have tested this on a ListView (on an Android device) that has enough items to bring scrolling into the mix. I see no auto-scroll behavior, and your idea to set SelectedItem null to defeat the highlight works great.

Answer 2

Current we can set ListView.SelectionMode to None to do this. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/interactivity

Answer 3

I just found another method to disable the highlight effect. And i would like to share this with other users.

You can do it directly at xaml. But this method not only disable the highlight effect, it will also disable the click event.

You can set the IsEnabled attribute of ViewCell to false.

<ViewCell IsEnabled="false">
    //Your Item Layout Coding
</ViewCell>

In addition, you can also disable/enable each item highlight effect by binding:

<ViewCell IsEnabled="{Binding IsHighlightEnabled}">
    //Your Item Layout Coding
</ViewCell>

Hope that helps, thanks.

Answer 4

YourList.ItemSelected+=DeselectItem;

 public void DeselectItem(object sender, EventArgs e)
  {
     ((ListView)sender).SelectedItem = null;
  }

This should be helpful for your scenario. @dpfauwadel

Answer 5

I am assuming you are using MVVM. In these cases I assign a null to the property after using it. In your viewmodel you seem to have a SelectedItem property since you are binding it to the SelectedItem property of the ListView. So I would do something like this:

private Product _selectedItem;
public Product SelectedItem
{
  get
  {
    return _selectedItem;
  }
  set
  {
    _selectedItem = value;

    //USE THE VALUE

    _selectedItem = null;
    NotifyPropertyChanged("SelectedItem");
  }
}

Answer 6

On iOS mark's solution didn't solve it for me, I had to create a CustomRenderer for the list view and use that instead.

NonSelectableListView.cs (In your Forms Project)

using System;
using Xamarin.Forms;

namespace YourProject
{
    public class NonSelectableListView : ListView
    {
        public NonSelectableListView()
        {
        }
    }
}

NonSelectableListViewRenderer.cs (CustomRenderer in your iOS project)

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

using YourProject.iOS;
using YourProject;

[assembly: ExportRenderer(typeof(NonSelectableListView), typeof(NonSelectableListViewRenderer))]
namespace YourProject.iOS
{
    public class NonSelectableListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null)
            {
                // Unsubscribe from event handlers and cleanup any resources
            }

            if (e.NewElement != null)
            {
                // Configure the native control and subscribe to event handlers
                Control.AllowsSelection = false;
            }
        }
    }

}