Question How to highlight child items in a list-item container

I'd like the child visual elements I have in my list-items to change color when the item is selected to contrast the blue background.

This is how my list items look. Notice the label text and the image are not white to contrast the blue background:


This is how the list items look in the unity windows. Notice how both the text and icon of the Visual Element are changed to an off-white to contrast the blue background:


When I make my List-item just a single Label, the font color changes appropriately; I'm only running into this issue with the child elements. How can I make my visual elements in my list item container respect the highlighting contrast?

 

You can just create a class in your USS file that sets the highlight color. And when you want to highlight an element you can enable the class on the selected item and disable it for all non selected items.

 

Yep... Looking through the source code, I think the best way for me to do that is plug into the onselect callback API. It would be easier for me to override

ListView

and add a new

RecycledItem

class; however, I'm not sure how the official version of that class will change over time.

This would be even easier to implement if there were

OnAddToClassList

and

OnRemoveFromClassList

events that I could register callbacks for. Then I could just tell my child elements to add/remove those classes when their parent does.

 

I am interested on how do to this. How do you enable class / disable class by code? I haven't seen anything in the documentation ( Maybe I missed it)

 

There are a number of methods on the base VisualElement object that allows you to add and remove classes from the class list quite easily. These are:

Code (CSharp):

1. AddToClassList(string className)
2. RemoveFromClassList(string className)
3. ToggleInClassList(string className)
4. ClearClassList() //Removes all classes from the element
5. ClassListContains(string className) //Returns true if the class exists on the element

For whatever reason, the documentation only has details for EnableInClassList (Which seems to pull double duty for Add and Remove, using the enable bool to state whether you actually want to add it) and ToggleInClassList, but the other methods do exist and work as you expect.

 

I recently had a reply from @uDamian that discusses how to change the style of elements from a parent:

https://forum.unity.com/threads/notify-events-when-style-class-changes.931119/#post-6091056

Going to implement it tonight and be back with more details on how I got it to work

 

So I could get the label to work pretty well with the following USS:


I add the

type-list__item__label

class to the labels in my list item, and it will change the color to a white when the parent element is selected.

I tried doing the same thing with my icon by setting the background image tint, but it wasn't working. Oh well, I think this is good enough for me.

You can find out more about more complex USS selection here: https://docs.unity3d.com/Manual/UIE-USS-Selectors.html