unity-game-engineunity-ui

Change the column header style in Unity's UI Toolkit MultiColumnListView

I am using a MultiColumnListView in Unity's UI Toolkit.

I would like to change the appearance of the colum header cells.

Right now this is how they look like.

standard multicolumnlistview header style

I would like to remove the grey background, set their height to a certain fixed pixel value and give them a white border.

How can I do that?

Using the makeHeaderCell function I can create custom header cells with all kinds of elements which have their own style. But it just overlays them over that gray background with the default height.

Solution

  • For the grey header I found there are actually two elements involved. You can use the UIToolkit-Debugger (Window > UI Toolkit > Debugger) to investigate which of the elements holds the background. And also which style-selectors and stylesheets are currently influencing them.

    It are basically these two for a default MultiColumnListView:

    enter image description here

    With that information you can overwrite the bakground-color using your own custom class additionally.

    E.g. like

    MultiColumnListView yourListView;

yourListView.AddToClassList("CustomMultiColumnListView");

    and then have according USS file like e.g.

    .CustomMultiColumnListView #unity-multi-column-view__header-container, .CustomMultiColumnListView .unity-multi-column-header__column {
    background-color: rgba(0, 0, 0, 0);
    height: 50px;
    border-left-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    border-top-color: rgb(255, 255, 255);
    border-bottom-color: rgb(255, 255, 255);
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
}

    Alternatively you could of course also go by the list name or use any other selector you desire to fulfill the same - depending on your exact requirements.