#1,045 – Control Layering of Elements in a Grid Using ZIndex

If you have more than one user interface element in a particular grid cell, the elements are layered on top of each other.  Elements added earlier in XAML appear below (lower layer) than elements added later.

You can change the layering of the elements by changing the order in which they are added to the Grid.  You can also control the layering by giving each element a value for Panel.ZIndex.  Elements with higher values for ZIndex will appear to be on top of elements with lower values, regardless of the order in which they were added to the Grid.

In the example below, the Label appears on top of the Button because it has a higher value for ZIndex.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Label Content="Oops I'm in the same cell with a button !"
               Panel.ZIndex="2"/>
        <Button Content="Push Me" Width="100"
                Panel.ZIndex="1"/>
    </Grid>