How do I set the ZOrder of UI Elements?

There is no SendToBack() or BringToFront() method for WPF elements. Instead, you can assign a ZIndex value to a control at design time, or programmatically at run time to change its ZOrder. The ZIndex property belongs to all classes derived from Panel.

The ZIndex value is a relative number that you can set to any positive or negative integer. The actual value is unimportant--how that value compares to other controls dictates the ZOrder. Controls with a higher ZINdex value always appear on top of controls with a lower ZIndex value.

You can set the ZIndex value of an element at design time like this:

<Canvas>
      <Button Canvas.ZIndex="1" Canvas.Left="10" Canvas.Top="10" >(10,10)</Button>
      <Button Canvas.ZIndex="2" Canvas.Left="120" Canvas.Top="30">(120,30)</Button>
      <Button Canvas.ZIndex="3" Canvas.Left="60" Canvas.Top="80" Width="50" Height="50" >(60,80)</Button>
      <Button Canvas.ZIndex="4" Canvas.Left="70" Canvas.Top="120" Width="100" Height="50">(70,120)</Button>
</Canvas>

To programmatically retrieve the value of the ZIndex property, use the GetZIndex() method of the Panel-derived container:

int zOrder = Canvas.GetZIndex(object);

To programmatically change the ZOrder of an element you can call the SetZIndex() method and pass a reference to the element you want to change and the value you want to set its ZIndex to.

Canvas.SetZIndex(object, (int)99);