Multi select list view using background change

Question

With reference to my previous question I would like to know if there is any way by which I can only change the background color of list item instead of using a switch control?

I have used a switch control to indicate multiple selection, but with switch control I get this ON/OFF text on some of the platforms which is unnecessary so I am looking for option to change the background of the list item instead of switch control.

Answer 1

Just change the Grid BackgroundColor that is the root of the list item ViewCell .

In your code you have:-

public WrappedItemSelectionTemplate()
            : base()
        {

            Grid objGrid = new Grid();
            objGrid.BackgroundColor = Color.Gray;

So your already setting the background to Gray.

Create another property for the Background Color in your view model, and hook into the Switch being toggled. You can then set the view model to the appropriate color you need for a selection / non-selection.

Then create a binding for the objGrid above for the BackgroundColor property binding to this ViewModel property.

If however, your on about removing the Switch control, you will want to do something similar to what is described earlier. However, instead of hooking into the Switch toggled event handler, you will want to create a TapGestureRecognizer and bind this to the Grid , so you can update the ViewModel as appropriate.

Update 1 :-

To handle the Grid background color being a specific color should an item be selected or not you will need to create a IValueConverter that is bound to your IsSelected boolean property to determine the appropriate color to display as the background of the Grid .

public class BackGroundColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is bool)
        {
            if ((bool)value)
            {
                return Color.Green;
            }
            else
            {
                return Color.Gray;
            }
        }
        else
        {
            return Color.Gray;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

}

You will then need to create a Binding that uses this, as so:-

objGrid.SetBinding(Grid.BackgroundColorProperty, "IsSelected", converter: new BackGroundColorConverter());

As a separate thing, to remove the Switch , comment the following three lines:-

Switch mainSwitch = new Switch();
mainSwitch.SetBinding(Switch.IsToggledProperty, new Binding("IsSelected"));
objGrid.Children.Add(mainSwitch, 2, 0);

Answer 2

Yes you can change background of list items by adding selectors in drawables and using android:listSelector="@drawable/list_selector_background" in list view tag of XML.

Example selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_focused="false"
    android:drawable="@drawable/list_item_gradient" />

<!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. -->
<item android:state_focused="true" android:state_enabled="false"
    android:state_pressed="true"
    android:drawable="@drawable/list_selector_background_disabled" />
<item android:state_focused="true" android:state_enabled="false"
    android:drawable="@drawable/list_selector_background_disabled" />

<item android:state_focused="true" android:state_pressed="true"
    android:drawable="@drawable/list_selector_background_transition" />
<item android:state_focused="false" android:state_pressed="true"
    android:drawable="@drawable/list_selector_background_transition" />

<item android:state_focused="true"
    android:drawable="@drawable/list_selector_background_focus" />

Change values accordingly for different states like state pressed,state enabled etc.