Xamarin Forms: Set Background Color of Item Selected in ListView from ViewModel

Question

I am trying to change the background color of a selected item in a list view when the selection is done in code from the ViewModel. I have found a number of posts associated to changing the background color when the item is selected by user action (i.e., Tapped)

Xamarin.Forms ListView: Set the highlight color of a tapped item

This solution - Using Item Taped works for when the user taps the item in the list but there are cases when an item in the ListView is selected by the user entering data elsewhere in the form.

I tried adding a handler for the ItemSelected on the ListView

    private void ListView_OnItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        if ( e.SelectedItem == null ) return;  //The selection is set to null in some cases
        if ( !(sender is ListView listView) ) return;
        if ( !(listView.TemplatedItems[0] is ViewCell cell) ) return;

        SetCellColor(cell);
    }

    private void SetCellColor(ViewCell cell)
    {
        if ( _selectedCell != null )
        {
            _selectedCell.View.BackgroundColor = Color.Transparent;
        }

        cell.View.BackgroundColor = Color.LightGray;
        _selectedCell = cell;
    }

Which seems like it should work but the TemplatedItems collection is an internal Forms object and does not work as I would expect. I do get a ViewCell returned but it does not change the background color.

Looked into doing something with the OnAppearing event of the CustomViewCell but don't see how one would know what is selected in this case. I have also played around with some approaches using renderers but these also seem to not give a way to know an item is selected.

Thanks in advance -Joe

Junior Jiang Junior Jiang · Accepted Answer · 2020-01-10T02:46:31

This can not work in Xamarin Forms , you need to use Native Method to do .

You can Custom a ViewCellRenderer to implement it .About Customizing a ViewCell , you can refer to this document .

Create a NativeCell inherits from ViewCell in Xamarin Forms .Also can add other properties inside the ViewCell .

public class NativeCell : ViewCell
{
    public static readonly BindableProperty NameProperty =
        BindableProperty.Create("Name", typeof(string), typeof(NativeCell), "");

    public string Name
    {
        get { return (string)GetValue(NameProperty); }
        set { SetValue(NameProperty, value); }
    }
}

Used in Xaml :

<ListView x:Name="listview"
                        MinimumHeightRequest="96"
                        Margin="16,0">
    <ListView.ItemTemplate>
        <DataTemplate>
            <app19:NativeCell Name="{Binding Name}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Adding DataSource for ListView :

listview.ItemsSource = DataSource.GetList();

I will not show the code of DataSource , just contains the Name Property and its default data .

Finally, in iOS, you need to add the NativeViewCellRenderer inherits from ViewCellRenderer :

public class NativeViewCellRenderer : ViewCellRenderer
{
    public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
    {
        var nativeCell = (NativeCell)item;

        UITableViewCell cell = new UITableViewCell();

        cell.TextLabel.Text = nativeCell.Name;
        cell.SelectedBackgroundView = new UIView
        {
            BackgroundColor = UIColor.Blue, //Set the selected color is Blue
        };
        return cell;
    }
}

Now you will see the effect :

And the same with iOS in Android , you need to add the NativeViewCellRenderer inherits from ViewCellRenderer :

class NativeViewCellRenderer : ViewCellRenderer
{
    private Android.Views.View _cellCore;
    private Drawable _unselectedBackground;
    private bool _selected = false;
    protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, ViewGroup parent, Context context)
    {
        _cellCore = (context as Activity).LayoutInflater.Inflate(Resource.Layout.NativeAndroidCell, null);
        TextView nameTextView = _cellCore.FindViewById<TextView>(Resource.Id.NameText);

        var nativeCell = (NativeCell)item;
        nameTextView.Text = nativeCell.Name;

        _selected = false;
        _unselectedBackground = _cellCore.Background;
        return _cellCore;
    }

    protected override void OnCellPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnCellPropertyChanged(sender, e);
        if (e.PropertyName == "IsSelected")
        {
            _selected = !_selected;
            if (_selected)
            {
                //var extendedViewCell = sender as CustomViewCell;
                _cellCore.SetBackgroundColor(Android.Graphics.Color.Red);
            }
            else
            {
                _cellCore.SetBackground(_unselectedBackground);
            }
        }
    }
}

The effect as follow :

Xamarin Forms: Set Background Color of Item Selected in ListView from ViewModel

2 Answers