How to set color only for the selected frame in collection view using MVVM in Xamarin forms?

Question

I am binding the background color for frame in collection view using RelativeSource binding. But the background color is changing for all the frames inside the collection view. I need to set the background color for only the frame which I am selecting.

This is my xaml code

This is my code in Viewmodel

public bool FrameColorChange=true;
private Color _backgroundTest;
public Color BackgroundTest
{
    get { return _backgroundTest; }       
    set
    {
        if (value == _backgroundTest)
            return;
    
        _backgroundTest = value;
        OnPropertyChanged(nameof(BackgroundTest));
    }
}
private async void TriggerScene(Scene scene)
{

    if (FrameColorChange==true)
    {
        BackgroundTest = Color.Gray;
        FrameColorChange = false;
    }
    else
    {
        BackgroundTest = Color.White;
        FrameColorChange = true;
    }
}

I have gone through some fixes like

how to access child elements in a collection view?

but nothing helped. I also tried SelectionChanged event.But the problem with SelectionChanged is that it doesn't trigger properly because there is TapGestureRecognizer in my frame. I want the color binding for the selected frame in my TriggerScene command of TapGestureRecognizer in my viewmodel. I don't want to use code behind. I have no clue how to fix this any suggestions?

user_7432242 · Answer

I already posted one way to solve your problem in another answer, now i want to provide yet a simpler solution (although i won't claim it is the best).

NOTE that in this solution, contrary to my other Answer, you do not need to add a superfluous Property to the objects in your collection view, but the new property is defined directly in the ViewModel.

One way to solve your problem could be to:

Define a property in your ViewModel called SelectedItem: this will keep track of the currently selected item.
Then you bind the BackgroundColor of your Frame to the new property: SelectedItem and for that you will need a ValueConverter that takes the SelectedItem and a ConverterParameter: the current Frame.
Inside the Frame, in the StackLayout you have the good old TapGestureRecognizer whose handler when called will set the Selected Item.
When SelectedItem is set, OnPropertyChanged is called and ValueConverter is called for each of the items in the CollectionView. The converter then checks if the BindingContext of the Frame (the item to which it is bound!) is the same as the SelectedItem and if so it sets its color to Gray (selected!)

And of course, below i add a complete-minimal-working-sample. Feel free to copy-paste it and play with it.

Page1.xaml

ViewModel.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Globalization;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

namespace App1
{
    public class ViewModel : INotifyPropertyChanged
    {

        public ViewModel()
        {
            samplelist = new List 
            { 
                new item { Text = "Uno", Description = "Uno Description bla bla" },
                new item { Text = "Dos", Description = "Dos Description bla bla" },
                new item { Text = "Tres", Description = "Tres Description bla bla" }
            };

            TriggerSceneCommand = new Command(TriggerScene);
        }

        public List samplelist { get; set; }


        private item _selectedItem;
        public item SelectedItem
        {
            get => _selectedItem;
            set
            {
                _selectedItem = value;
                OnPropertyChanged();
            }
        }



        public Command TriggerSceneCommand { get; set; }
        private void TriggerScene(item newSelectedItem)
        {
           SelectedItem = newSelectedItem;
        }


        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged([CallerMemberName] string name = "")
        {
            var propertyChanged = PropertyChanged;

            propertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }

    }

    public class item
    {

        public String Text { get; set; }

        public String Description { get; set; }

    }


    public class SelectedToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {

            Color result = Color.White;


            if (value != null && parameter != null && ((Frame)parameter).BindingContext != null && (item)value == (item)((Frame)parameter).BindingContext)
            {
                result = Color.Gray;
            }


            return result;

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }
}

And why not, lets drop here a Bonus.

You can add two lines of code to the TapGestureRecognizer's event handler to return the original color back after some time (three seconds, maybe?).

Just change TriggerScene method in ViewModel as follows (see comments on Code):

private void TriggerScene(item newSelectedItem)
{
    // Highlight selection!
    SelectedItem = newSelectedItem;

    // Sit and wait...
    await Task.Delay(3000);

    // Go back to normal!
    SelectedItem = null;
}

user_11850033 · Answer

You could try the code below.

Xaml:

Code behind:

   public Page2()
    {
        InitializeComponent();
        this.BindingContext = new MyViewModel();
    }

    private void list_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        MyModel previous = e.PreviousSelection.FirstOrDefault() as MyModel;
        MyModel current = e.CurrentSelection.FirstOrDefault() as MyModel;

        //Set the current to the color you want
        current.BackgroundTest = "Red";


        if (previous != null)
        {
            //Reset the previous to defaulr color
            previous.BackgroundTest = "Gray";
        }  
    }

ViewModel:

public class MyViewModel
{
    public ObservableCollection samplelist { get; set; }
    public MyViewModel()
    {
        samplelist = new ObservableCollection()
        {
            new MyModel(){ BackgroundTest="Gray", str="hello1"},
            new MyModel(){ BackgroundTest="Gray", str="hello2"},
            new MyModel(){ BackgroundTest="Gray", str="hello3"},
            new MyModel(){ BackgroundTest="Gray", str="hello4"},
            new MyModel(){ BackgroundTest="Gray", str="hello5"},
            new MyModel(){ BackgroundTest="Gray", str="hello6"},
            new MyModel(){ BackgroundTest="Gray", str="hello7"},
            new MyModel(){ BackgroundTest="Gray", str="hello8"},
        };
    }
}

Model:

public class MyModel : INotifyPropertyChanged
{

    public string str { get; set; }
    private string _backgroundTest;
    public string BackgroundTest
    {
        get { return _backgroundTest; }
        set
        {
            _backgroundTest = value;
            OnPropertyChanged("BackgroundTest");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Update:

If you have TapGestureRecognizer in DataTemplate, you could use VisualState instead of SelectionChanged of CollectionView.

Xaml:

Code behind:

    StackLayout lastElementSelected;
    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {

        if (lastElementSelected != null)
            VisualStateManager.GoToState(lastElementSelected, "UnSelected");

        VisualStateManager.GoToState((StackLayout)sender, "Selected");

        lastElementSelected = (StackLayout)sender;

    }

user_7432242 · Answer

There might be lots of ways to solve your problem, and i will not claim to have found the best, but it is still one (simple) way.

I will add a complete-working-minimal-sample for your below, that does exactly what you want, so feel free to copy-paste and adapt it to your need.

One way to achieve your goal would to:

Add a property called Selected or something alike to the Object that is populating the Collection (samplelist) that binds to your CollectionView.
Bind the BackgroundColor property of Frame to that Selected property and set to it a Converter that changes from a boolean value (is selcted?) to a Color (selection color).
Then when an item in the collection is tapped and the TapGestureRecognizer triggers you can pass the selected item as a CommandParameter to the Command
In the Command-handler set the Selected property of the passed item to true.
When the Selected property changes, the Converter is called, and the BackgroundColor property is updated.

The following sample exemplifies this:

Page1.xaml

ViewModel.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Globalization;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

namespace App1
{
    public class ViewModel
    {

        public ViewModel()
        {
            samplelist = new List 
            { 
                new item { Text = "Uno", Description = "Uno Description bla bla" },
                new item { Text = "Dos", Description = "Dos Description bla bla" },
                new item { Text = "Tres", Description = "Tres Description bla bla" }
            };

            TriggerSceneCommand = new Command

How to set color only for the selected frame in collection view using MVVM in Xamarin forms?

3 Answers