Controlling the Z-Order

Thanks to Lorin Catudio for helping to provide this sample.

The ZIndex property determines the order in which child elements that share the same coordinate space appear.  A higher value will appear above a lower value.  For example, an element that has a value of 5 will appear above an element that has a value of 4.  Negative values are allowed.  The default indexing order is determined by the order in which elements appear in the visual tree.  This is also true for members of the same collection that share the same ZIndex value.

The following code results in the default indexing order shown in the figure below.

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

  <Rectangle Height="60" Width="60" Fill="Gold"/>

  <Rectangle Height="50" Width="70" Fill="Coral"/>

  <Rectangle Height="40" Width="80" Fill="Teal"/>

  <Rectangle Height="30" Width="90" Fill="Black"/>

</Canvas>

The following code results in the custom indexing order shown in the figure below.

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

  <Rectangle Canvas.ZIndex="99" Height="60" Width="60" Fill="Gold"/>

  <Rectangle Canvas.ZIndex="98" Height="50" Width="70" Fill="Coral"/>

  <Rectangle Canvas.ZIndex="97" Height="40" Width="80" Fill="Teal"/>

  <Rectangle Canvas.ZIndex="96" Height="30" Width="90" Fill="Black"/>

</Canvas>