Change Background Color of ListView Selected Item in Xamarin

Question

I created a Master-Detail type project in Xamarin. When I selected an item from the Master page the background color is orange by default. How can I change this to a color of my choosing?

Answer 1

For iOS, you can add a new ListViewRender to override the default selectedBackgroundView's backgroundColor value:

public class ListViewRenderer : Xamarin.Forms.Platform.iOS.ListViewRenderer
{
    public ListViewRenderer()
    {
    }

    public override void LayoutSubviews()
    {
        base.LayoutSubviews();

        var controller = this.ViewController as UITableViewController;
        if (controller != null)
        {
            var tableView = controller.TableView;
            if (tableView != null && tableView.Subviews != null)
            {
                tableView.LayoutSubviews();

                var backgroundColor = Color.Red.ToUIColor();
                foreach (var subview in tableView.Subviews)
                {
                    if (subview is UITableViewCell tableViewCell)
                    {
                        tableViewCell.SelectedBackgroundView = new UIView
                        {
                            BackgroundColor = backgroundColor
                        };
                        tableViewCell.MultipleSelectionBackgroundView = new UIView
                        {
                            BackgroundColor = backgroundColor
                        };
                    }
                }
            }
        }
    }
}

Answer 2

This problem is specific to Android. In the Android project add this line to Resources\values\styles.xml inside the <style> tag:

<item name="android:colorActivatedHighlight">#00FFFFFF</item>

Answer 3

You can bind BackgroundColor for ContentView of ViewCell , then use ViewModel and ItemTapped method of ListView to modify the selected item background color .

For example , the xaml code as follow：

<ListView x:Name="ListViewMenu"
            HasUnevenRows="True" ItemTapped="ListViewMenu_ItemTapped">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell >
                <Grid Padding="10"
                        BackgroundColor="{Binding SelectedBackgroundColor}">
                    <Label Text="{Binding Title}" d:Text="{Binding .}" FontSize="20"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Then in HomeMenuItem model add SelectedBackgroundColor property :

public enum MenuItemType
{
    Browse,
    About
}
public class HomeMenuItem : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public MenuItemType Id { get; set; }

    public string Title { get; set; }

    private Color selectedBackgroundColor;
    public Color SelectedBackgroundColor
    {
        set
        {
            if (selectedBackgroundColor != value)
            {
                selectedBackgroundColor = value;
                OnPropertyChanged("SelectedBackgroundColor");
            }
        }
        get
        {
            return selectedBackgroundColor;
        }
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

}

Then in MenuPage modify ItemSource as follow:

public partial class MenuPage : ContentPage
{
    MainPage RootPage { get => Application.Current.MainPage as MainPage; }
    List<HomeMenuItem> menuItems;
    List<HomeMenuItem> tmpItems; // add a tmp list to remove setted backgroud color
    public MenuPage()
    {
        InitializeComponent();

        tmpItems = new List<HomeMenuItem>();
       
        menuItems = new List<HomeMenuItem>
        {
            new HomeMenuItem {Id = MenuItemType.Browse, Title="Browse" },
            new HomeMenuItem {Id = MenuItemType.About, Title="About" }
        };

        menuItems[0].SelectedBackgroundColor = Color.Red; // default set the first item be selected, you can modify as your wants
        tmpItems.Add(menuItems[0]); // add the selected item (default is the first)

        ListViewMenu.ItemsSource = menuItems;

        ListViewMenu.SelectedItem = menuItems[0];
        ListViewMenu.ItemSelected += async (sender, e) =>
        {
            if (e.SelectedItem == null)
                return;

            var id = (int)((HomeMenuItem)e.SelectedItem).Id;
            await RootPage.NavigateFromMenu(id);
        };
    }

    private void ListViewMenu_ItemTapped(object sender, ItemTappedEventArgs e)
    {
        menuItems[e.ItemIndex].SelectedBackgroundColor = Color.Red;
        tmpItems[0].SelectedBackgroundColor = Color.Transparent;
        tmpItems[0] = menuItems[e.ItemIndex];
    }
}

The effect :