ListView not unselecting

Question

I am working on a Xamarin.Forms project with a ListView.

The XAML for the ListView is

Answer 1

I prefer to use the SelectedItem property to handle simple clicks. This works platform independent and everything can be done in the view model code.

The trick is to set the property null again to deselect the item immediately after evaluating it (in hte sample I use it for initialising another view model).

XAML:

<ListView ItemsSource="{Binding Items}" 
    SelectedItem="{Binding SelectedProduct, Mode=TwoWay}">

ViewModel.cs:

public Command<IProduct> ViewDetailsCommand;
public ViewModel()
{
     ViewDetailsCommand = new Command<IProduct>(async s => await ViewDetails(s));
}

public IProduct SelectedProduct
{
    get { return _selectedProduct; }
    set
    {
        if (value != _selectedProduct)
        {
            SetProperty(ref _selectedProduct, value);
            if (value != null)
            {
                ViewDetailsCommand.Execute(value);
            }
        }
    }
}

private async Task ViewDetails(IProduct product)
{
    var viewModel = AppContainer.Container.Resolve<ProductDetailsViewModel>();
    viewModel.Initialise(this, product as ShoppingListItemViewModel);
    SelectedProduct = null;
    await _pageNavigator.PushModalAsync(viewModel);
}

Answer 2

I had same problem, I was using ItemSelected, but the selected item wasn't getting deselected unless until I select any other item in the ListView. I replace ItemSelected by ItemTapped. It worked for me.

Answer 3

To apply background color to list view selected item follow these steps:

Make custom control:

using Xamarin.Forms;

namespace xamformsdemo.CustomControls
{
  public class ExtendedViewCell : ViewCell
  {
    public static readonly BindableProperty SelectedBackgroundColorProperty =
    BindableProperty.Create("SelectedBackgroundColor", 
                            typeof(Color), 
                            typeof(ExtendedViewCell), 
                            Color.Default);

    public Color SelectedBackgroundColor
    {
       get { return (Color)GetValue(SelectedBackgroundColorProperty); }
       set { SetValue(SelectedBackgroundColorProperty, value); }
    }
  }
}

Android Renderer:

[assembly: ExportRenderer(typeof(ExtendedViewCell), typeof(ExtendedViewCellRenderer))]
namespace xamformsdemo.Droid.CustomRenderers
{
  public class ExtendedViewCellRenderer : ViewCellRenderer
  {

private Android.Views.View _cellCore;
private Drawable _unselectedBackground;
private bool _selected;

protected override Android.Views.View GetCellCore(Cell item, 
                                                  Android.Views.View convertView, 
                                                  ViewGroup parent, 
                                                  Context context)
{
  _cellCore = base.GetCellCore(item, convertView, parent, context);

  _selected = false;
  _unselectedBackground = _cellCore.Background;

  return _cellCore;
}

protected override void OnCellPropertyChanged(object sender, PropertyChangedEventArgs args)
{
  base.OnCellPropertyChanged(sender, args);

  if (args.PropertyName == "IsSelected")
  {
    _selected = !_selected;

    if (_selected)
    {
      var extendedViewCell = sender as ExtendedViewCell;
      _cellCore.SetBackgroundColor(extendedViewCell.SelectedBackgroundColor.ToAndroid());
    }
    else
    {
      _cellCore.SetBackground(_unselectedBackground);
    }
  }
}
  }

}

iOS Renderer:

[assembly: ExportRenderer(typeof(ExtendedViewCell), typeof(ExtendedViewCellRenderer))]
namespace xamformsdemo.iOS.CustomRenderers
{
  public class ExtendedViewCellRenderer : ViewCellRenderer
  {
    public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
   {
      var cell = base.GetCell(item, reusableCell, tv);
      var view = item as ExtendedViewCell;
      cell.SelectedBackgroundView = new UIView
       {
         BackgroundColor = view.SelectedBackgroundColor.ToUIColor(),
       };

      return cell;
    }

  }
}

Use in XAML:

<ListView.ItemTemplate>
  <DataTemplate>
    <customControls:ExtendedViewCell SelectedBackgroundColor="Teal">
      <ViewCell.View>
        <StackLayout HorizontalOptions="FillAndExpand" 
                     VerticalOptions="FillAndExpand" Orientation="Vertical" 
                     Padding="4" Spacing="8">
          <Label TextColor="White" Text="{Binding .ItemName}"/>
          <Label TextColor="Yellow" Text="{Binding .LastUpdated, StringFormat='Last seen: {0:HH:mm:ss}'}"/>
        </StackLayout>
      </ViewCell.View>
    </customControls:ExtendedViewCell>
  </DataTemplate>
</ListView.ItemTemplate>

You can refer this link below to solve problem: https://blog.wislon.io/posts/2017/04/11/xamforms-listview-selected-colour

Answer 4

On Android If you only want to change the color when use clicks the ListView's Item. You can modify the style:

Before Api 21, create a xml file in the drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@color/colorPrimary" android:state_pressed="false"/>  
  <item android:drawable="@color/colorAccent" android:state_pressed="true"/>  
  <item android:drawable="@color/colorPrimary"/>                              
</selector>

On Api 21+, under the drawable-v21 folder create the file with same name:

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorAccent">
  <item android:drawable="@color/colorPrimaryDark"/>
</ripple>

Then change the style in the renderer:

// f_selector is the xml file's name
Control.SetSelector(Resource.Drawable.f_selector);

At last change the color in the resource file colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="colorPrimary">#3F51B5</color> <!--original background color api21- -->
  <color name="colorPrimaryDark">#FFFFFF</color> <!--original background color api21+ -->
  <color name="colorAccent">#FF313030</color> 
</resources>