Xamarin List View Selected Item Change Icon Color

Question

I have implemented a slider menu as ListView and can easily assign the color to any icon in the menu. However, I am trying to change the color of the ListView row that was selected (specifically the icon). I have tried using converter, but the value never changes.

Here is my xaml:



    

        
        

        

        
            
                Записаться
                Акции
                Уведомления
                Личный кабинет
                Контакты
                Отзывы
                Галерея
                Поделиться

Here is the model:

    public class MainMenuItem
{
    public MainMenuItem()
    {
        TargetType = typeof(MainMenuItem);
    }
    public int Id { get; set; }
    public string ImgSource { get; set; }
    public string Title { get; set; }
    public Type TargetType { get; set; }
    public Action ItemSelected { get; set; }
    public string PushCount { get; set; }
    public bool PushUnread { get; set; }
    public Color ForegroundColor { get; set; }
}

And here is cs:

public partial class MainMenuMaster : ContentPage
{
    public ListView ListView;
    public AppContext Context { get; set; }

    private float rowHeight;

    public MainMenuMaster()
    {
        InitializeComponent();
        BindingContext = new ViewModel();
        ListView = MenuItemsListView;
        ListView.SizeChanged += ListView_SizeChanged;
    }


    private void ListView_SizeChanged(object sender, EventArgs e)
    {
        var h = ListView.Height;
        rowHeight = (float)(h / 8);
        ListView.RowHeight = (int)rowHeight;
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        (BindingContext as ViewModel).UpdatePushCount(Context.UnreadPushCount);
    }

    public class ViewModel : INotifyPropertyChanged
    { 
        public ObservableCollection MenuItems { get; set; }
        public AppContext Context { get; set; }
        public ViewModel()
        {
            MenuItems = new ObservableCollection(new[]
            {
                new MainMenuItem {
                    Id = 0,
                    ImgSource = "images/signup.png",
                    Title = "Записаться",
                    TargetType = typeof(OnlineSignupScreen),
                    ItemSelected = () => {
                        Context.SelectSalonStart(typeof(OnlineSignupScreen));
                    },
                    ForegroundColor = Color.Gray
                },
                new MainMenuItem {
                    Id = 1,
                    ImgSource = "images/promos",
                    Title = "Акции",
                    TargetType = typeof(PromosScreen),
                    ForegroundColor = Color.Gray,
                },
                new MainMenuItem {
                    Id = 2,
                    ImgSource = "images/notify",
                    Title = "Уведомления",
                    TargetType = typeof(NotificationsScreen),
                    ForegroundColor = Color.Gray
                },
                new MainMenuItem {
                    Id = 3,
                    ImgSource = "images/personal",
                    Title = "Личный кабинет",
                    TargetType = typeof(PersonalInfoScreen),
                    ForegroundColor = Color.Gray
                },
                new MainMenuItem {
                    Id = 4,
                    ImgSource = "images/contacts",
                    Title = "Контакты",
                    TargetType = typeof(ContactsScreen),
                    ItemSelected = () => {
                        Context.SelectSalonStart(typeof(ContactsScreen));
                    },
                    ForegroundColor = Color.Gray
                },
                new MainMenuItem {
                    Id = 5,
                    ImgSource = "images/feedback.png",
                    Title = "Отзывы",
                    TargetType = typeof(FeedbackScreen),
                    ItemSelected = () => {
                        Context.SelectSalonStart(typeof(FeedbackScreen));
                    },
                    ForegroundColor = Color.Gray
                },
                new MainMenuItem {
                    Id = 6,
                    ImgSource = "images/gallery.png",
                    Title = "Галерея",
                    TargetType = typeof(GalleryScreen),
                    ItemSelected = () => {
                        Context.SelectSalonStart(typeof(GalleryScreen));
                    },
                    ForegroundColor = Color.Gray
                },
                new MainMenuItem {
                    Id = 7,
                    ImgSource = "images/share",
                    Title = "Поделиться",
                    TargetType = typeof(ShareWithFriendScreen),
                    ForegroundColor = Color.Gray
                }
            });

        }

        public void UpdatePushCount(int count)
        {
            MenuItems[2].ImgSource = count > 0 ? "images/badge" : "images/notify";
            MenuItems[2].PushCount = count.ToString();
            MenuItems[2].PushUnread = count > 0;
        }

        #region INotifyPropertyChanged Implementation
        public event PropertyChangedEventHandler PropertyChanged;
        void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            if (PropertyChanged == null)
                return;

            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}

I also have MainMenu where I control the navigation and have ListView_onSelected method, but even there I can't change the color of the icon.

user10627299 · Accepted Answer

Please achieve INotifyPropertyChanged interface for MainMenuItem.cs

Then change the ForegroundColor attribute like following code.

 public class MainMenuItem: INotifyPropertyChanged
    {
        public MainMenuItem()
        {
            TargetType = typeof(MainMenuItem);
        }
        public int Id { get; set; }
        public string ImgSource { get; set; }
        public string Title { get; set; }
        public Type TargetType { get; set; }
        public Action ItemSelected { get; set; }
        public string PushCount { get; set; }
        public bool PushUnread { get; set; }
      


        private Color _foregroundColor;

        public Color ForegroundColor
        {
            get { return _foregroundColor; }
            set
            {
                _foregroundColor = value;

                OnPropertyChanged("ForegroundColor");

            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

I do not what is achievement about controls:SuperListView and controls:IconView, I used listview and ImageButton to replace it, If item was selected. We can change the ImageButton's background color for testing.

  
  

 private void MenuItemsListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            // MainMenuItem mainMenuItem = sender as MainMenuItem;

            MainMenuItem mainMenuItem = viewModel.MenuItems[e.SelectedItemIndex];
            mainMenuItem.ForegroundColor = Color.Red;
        }

Here is running GIF.

Xamarin List View Selected Item Change Icon Color

Answers (1)

Related Questions