VisualElement sort order

Unity Engine
1

Hello, suppose I have UI made in UI Toolkit. How do I bring an element to the front?

Suppose I’m making a FTUE (first-time user experience) and I want to highlight an element and make it clickable while darkening anything else. I would approach this by adding a dark overlay that blocks raycasts and changing some “sort order” of an element to render on top of the overlay. How do I change that “sort order”? Or how would you do that?

2

Some methods in VisualElement may be useful.

public void Sort(Comparison<VisualElement> comp)
public void BringToFront()
public void SendToBack()
public void PlaceBehind(VisualElement sibling)
public void PlaceInFront(VisualElement sibling)
1 Like
3

Thanks for the hint. I looked thru the code briefly and they appear to move the object down/up hierarchy. Does that mean the VisualElement also change its position etc (if controls )?

4

That depends on your layout : if your control is inside a classic flex container, with other UI elements/controls, yes it will change position.

Reminder : the z-order of the UI elements is dictated by the hierarchy.

I had a use case where I needed to display a UI row element on top of all the other rows, while dragging the row.
I eventually added a ghost row, using absolute positioning, on top of all the rows, which would duplicate the state of the row to drag. Maybe this trick will help you find a solution for your use case !

5

Yeah, I thought about that too as a last resort… Doesn’t UIToolkit provide the ability to change z-index? Realy. I looked at UIElements like 2 years ago? And there were no ability to do that at that time. I thought ok it is still raw. It should not be used yet…

And now after 2 years there is still no this basic feature?

6

Here is some information about z-index.

https://discussions.unity.com/t/756449