VisualElement sort order

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?

 

Some methods in VisualElement may be useful.

Code (CSharp):

1. public void Sort(Comparison<VisualElement> comp)
2. public void BringToFront()
3. public void SendToBack()
4. public void PlaceBehind(VisualElement sibling)
5. public void PlaceInFront(VisualElement sibling)

 

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 )?

 

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 !

 

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?

 

Here is some information about z-index.

https://forum.unity.com/threads/z-index-support.736781/