Context: I have a Class Component that contains an Overlay. However, the Overlay is painted under the context that comes above it in the UX markup. I would want the Overlay to take precedence over all the other elements and be painted on top of everything, but <BringToFront /> only works for one level. Is it possible to hijack it?
There are a few options.
The first is to put the element in the overlay layer, Layer="Overlay". This puts it in front of the other elements regardless of child order and it also doesn’t participate in the standard layout. For example, an overlay item in a Grid will not be a cell, just floating above them.
The second is to use BringToFront as you indicated. But note that this, like all other Z-index approaches refers to just the current children; you cannot move something higher than it’s siblings.
The third is to use ZOffset to shift the position. This again only works within the list of children.
IF you’re looking for a global effect than perhaps AlternateRoot is what you desire. It lets you put an element visually outside of its UX parent. Refer to this example of a modal dialog https://github.com/fusetools/fuse-samples/tree/master/Samples/UIStructure/Modal
Well I thought Layer="Overlay" would do the trick but it doesn’t work as documented:
The blue circle is on the “overlay” layer, but still under the logo and text inputs (but in front of the gradient at the bottom, because it’s declared before it in the UX). What am I missing?
OK I think I get it: Layer="Overlay" works just like <BringToFront />: only one level up. In that case, toying with <Grid> looks like the best solution.