How to change color of item in a list on Mouse hover.?

Question

I'm having a list of item, Whenever any item is selected in that particular list changing the particular color of the item using a trigger. please find the below code.

I want to change color stack on mouse hover as well, I had tried with the visual state manager as well but not working as expected.

Please let me know how to achieve this functionality.

Thanks,
Vaibhav Methuku.

Accepted Answer

Hello,

You could use the following xaml code to implement the function of changing the background color when the mouse hover Collection View item.

Update:

This is expected for the issue of VisualState invalidating when Datatrigger and VisualState are mixed.

The DataTrigger overrides the value of the VisualState. If you want VisualState to be triggered under certain circumstances. You could use the state triggers API.

State trigger.

Upon further investigation, it was found that the PinterOver in the CollectionView overrides the Selected state, causing this requirement to not be completed using the Visual State.

Selected Visual States no longer work correctly #11238.

For items in the CollectionView that have different colors in the selected and normal state, without affecting the color modification when the pointer enters, you can use MVVM to achieve this.

Please refer to the key code below:

Model code:

public class DotMenuItem : INotifyPropertyChanged // Since modifying the properties in an item requires notifying the xaml page, the model class also needs to inherit this interface.
    {
        public string MenuTitle { get; set; }
        private bool _selected = false;
        public bool IsSelected
        {
            get
            {
                return _selected;
            }
            set
            {
                _selected = value;
                OnPropertyChanged();
            }
        }
        public void OnPropertyChanged([CallerMemberName] string name = "") =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        public event PropertyChangedEventHandler? PropertyChanged;
    }

ViewModel class:

public class MyViewModel : INotifyPropertyChanged
    {
       
        private ObservableCollection _message = new ObservableCollection();
        public event PropertyChangedEventHandler? PropertyChanged;

       public ObservableCollection Messages
        {
            get
            {
                return _message;
            }
            set
            {
                _message = value;
                OnPropertyChanged();
            }
        }
        public void OnPropertyChanged([CallerMemberName] string name = "") =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        public MyViewModel()
        {
            Messages.Add(new DotMenuItem { MenuTitle = "test1", IsSelected = false });
            Messages.Add(new DotMenuItem { MenuTitle = "test2", IsSelected = false });
        }
   }
}

Customize a container layout class so that he can bind the Pledged state and change the background color with Pointer gestures.

public class MyVerticalLayout: VerticalStackLayout
  {
      public static readonly BindableProperty IsSelectedProperty =
BindableProperty.Create("IsSelected", typeof(bool), typeof(MyVerticalLayout), false);
      public bool IsSelected
      {
          get => (bool)GetValue(IsSelectedProperty);
          set => SetValue(IsSelectedProperty, value);
      }

     public MyVerticalLayout()
      {
          PointerGestureRecognizer pointerGestureRecognizer = new PointerGestureRecognizer();
          pointerGestureRecognizer.PointerEntered += PointerGestureRecognizer_PointerEntered;
          pointerGestureRecognizer.PointerExited += PointerGestureRecognizer_PointerExited;
          this.GestureRecognizers.Add(pointerGestureRecognizer);
      }
      private void PointerGestureRecognizer_PointerEntered(object sender, PointerEventArgs e)
      {this.BackgroundColor = Colors.Gold;
      }

     private void PointerGestureRecognizer_PointerExited(object sender, PointerEventArgs e)
      {
          if (this.IsSelected)
          {
              this.BackgroundColor = Colors.AliceBlue;
          }
          else
          {
              this.BackgroundColor = Colors.Red;
          }
      }
 }

You can do this via the SelectionChanged method in the CollectionView.

SelectionChanged method:

private void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.CurrentSelection.Count > e.PreviousSelection.Count) {
        DotMenuItem item = e.CurrentSelection.Last() as DotMenuItem;
        item.IsSelected = true;
    }
    else
    {
        DotMenuItem item = e.PreviousSelection.First() as DotMenuItem;
        item.IsSelected = false;
    }
}

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

How to change color of item in a list on Mouse hover.?

0 additional answers