Изменить цвет фона выбранного элемента ListView в Xamarin

Question

Я создал проект типа Master-Detail в Xamarin. Когда я выбрал элемент на главной странице, цвет фона по умолчанию оранжевый. Как я могу изменить это на цвет по своему выбору?

Answer 1

Вы можете привязать BackgroundColor для ContentView из ViewCell, а затем использовать ViewModel и ItemTapped метод ListView, чтобы изменить цвет фона выбранного элемента.

Например, код xaml выглядит следующим образом:

<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>

Затем в 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));
    }

}

Затем в MenuPage измените ItemSource следующим образом:

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];
    }
}

Эффект:

введите описание изображения здесь