A cool way of doing Z-index for XNA components?

Question

I am trying to render some elements in my game. First, I render the textures (the textures of the textboxes themselves etc). Then I render the primitives (borders around controls etc). Then I render the text.

However, by doing so, this gives a weird result in my user-interface when showing tooltips (by hovering over a textfield), as seen in the screenshot below.

Due to the order of drawing, borders around the window are drawn after textures, which (for the tooltip that appears when my mouse is over the textfield) makes it look weird.

Answer 1

If these are each separate DrawableGameComponents, you should set the DrawOrder property of each component so that they draw in the correct order.

To make it more manageable as you add more components, the DrawOrder should be an enum:

/* DisplayLayer.cs */
public enum DisplayLayer
{
    Background, //back-layer
    Particles,
    Player,
    MenuBack,
    MenuFront //front-layer
}

public class MyComponent : DrawableGameComponent
{
    public MyComponent(Game game) : base(game)
    {
        this.DrawOrder = (int)DisplayLayer.Background;
    }

    /* etc. */
}

---

If this is all being drawn within a single DrawableGameComponent, then you should take @Andrew's advice and simply draw them in the correct order. If for some reason you can't do that, you can still have the clarity of enums when using layerDepth by simply normalizing the value of the enum to be between 0 and 1:

/* DisplayLayer.cs */
public enum DisplayLayer
{
    MenuFront, //front-layer
    MenuBack,
    Player,
    Particles,
    Background, //back-layer
    MAX_LAYER   //Do not use this as a layer
}

public void Draw()
{
    spriteBatch.Begin(SpriteSortMode.BackToFront);
    foreach(Thingy thingy in thingys)
        spriteBatch.Draw(/* blah blah */, (float)thingy.DisplayLayer/(float)DisplayLayer.MAX_LAYER);
    spriteBatch.End();
}

(The ordering of the enum is reversed because layerDepth uses lower numbers for the front-layer rather than the back-layer)

Answer 2

http://msdn.microsoft.com/en-us/library/ff433989.aspx

public void Draw (
         Texture2D texture,
         Vector2 position,
         Nullable<Rectangle> sourceRectangle,
         Color color,
         float rotation,
         Vector2 origin,
         Vector2 scale,
         SpriteEffects effects,
         float layerDepth
)

layerDepth The depth of a layer. By default, 0 represents the front layer and 1 represents a back layer. Use SpriteSortMode if you want sprites to be sorted during drawing.
For example you have: Form, and in the form labels, buttons
So for children elements you can add to layerDepth some value
For example: Form A have children: Form B and some buttons, Form B have only button
Form A - 1.0
Buttons in form A - 1.5
Form B in Form A - 1.5
Buttons in form B - 2

For Dialogs - you can store some bigger value

Answer 3

I'm going to give the simple and fairly obvious answer, and that is just draw everything in the correct order in the first place.

To mock-up an example of what I mean:

// Assuming you have sorted windowList by Z-order, using one of the many
// existing sorting mechanisms provided by the framework such as List<T>.Sort().
foreach(var window in windowList)
    window.Draw();

// in your Window class:
public void Draw()
{
    this.DrawBackground();
    this.DrawBorders();
    this.DrawText();
}

Is there a particular, compelling reason why you are not already drawing your windows in this way?