Styling Alternating Rows in a List View

Unity Engine
,
1

I’m a beginner when it comes to UI Toolkit - I’ve pretty solidly figured out how to set up binding to change values in my C# classes, mostly for use in custom inspectors. However, when it comes to runtime UI and trying to make things look nice I’m still figuring it out.

In this case, I have an object that when interacted with displays a UI document to customize the buffs on the player’s armor. This UI Document includes two list views, one for currently installed buffs and another for the list of all buffs which can be installed. I have “Show Alternating Row Backgrounds” set to “Content Only” - as a result every odd-numbered item has a default grey-white background which is the unity default. How would I overwrite this with my own style?

Things I’ve Tried:

  • I noticed that the ListView C# Class contains a static property for the appropriate USS class. However, this doesn’t show up as something I can set for any specific list view. Unity - Scripting API: UIElements.BaseVerticalCollectionView.itemAlternativeBackgroundUssClassName

  • I also noticed that unity has a predefined USS variable named --unity-colors-alternated_rows-background, however I’m unsure how to add this as a property to the USS sheet I’m using to style the list views. I did try adding it directly into the appropriate selector like so:

.ListFormatting {
 --unity-colors-alternated_rows-background: rgba(171, 43, 38, 0.55);
    flex-grow: 1;
}

This does add the property under the .ListFormatting selector in the UI Builder, but it doesn’t appear to get used anywhere, nor can I change that rgba value in the UI Builder Inspector.
https://docs.unity3d.com/Manual/UIE-USS-UnityVariables.html[/INDENT]

  • I also tried making a style class trying a few different names, because I saw on the following page that can be used for certain events like when the mouse is hovering over an element. However I couldn’t find one that works in this situation. Unity - Manual: Style UI with UI Builder

I feel like this is one of those things that’ll be very simple once I know how to do it, but I just cannot for the life of me figure out how.

2

Hi, use it like this:

.yourStyleClass
{
    background-color: var(--unity-colors-alternated_rows-background);
}
3

I believe the answer you’re looking for is this:

.unity-collection-view__item--alternative-background {
    background-color: red;
}

This will set the background color / style of alternating / odd numbered rows. Also, ideally you’d have a style on your list and tie it to that style specifically:

.my-list .unity-collection-view__item--alternative-background {
    background-color: red;
}