Displaying a control over other controls in a grid in WPF

Question

I am developing a WPF application.
Main window's child controls are contained in a grid.
The bottom row contains a status bar.

The application must notify the user.
I want to programmatically display a notification in a user control in the bottom right corner of the main window.
I want the notification user control to be displayed over the status bar and the control in the above row.

How can I display a control over other controls contained in a grid ?
Any help will be greatly appreciated

Answer 1

Grid has a property called ZIndex. Have a look at this example:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="ZIndex Sample">
  <Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Rectangle Grid.Row="0" Grid.ZIndex="3" Fill="blue"/>
    <Rectangle Grid.Row="0" Grid.ZIndex="1" Fill="yellow"/>
    <Rectangle Grid.Row="0" Grid.ZIndex="2" Fill="green"/>

    <!-- Reverse the order to illustrate z-index property -->

    <Rectangle Grid.Row="1" Grid.ZIndex="1" Fill="green"/>
    <Rectangle Grid.Row="1" Grid.ZIndex="3" Fill="yellow"/>
    <Rectangle Grid.Row="1" Grid.ZIndex="2" Fill="blue"/>

  </Grid>

If you don't specify ZIndex, the the children of a panel are rendered in the order they are specified (i.e. last one on top).

Answer 2

I have solved my problem.
I have modified the main window's XAML markup.
I have declared the notification user control and the grid containing main window's child controls in the same cell of a new grid.

I have set some properties in the notification user control's opening tag :

• Grid.ZIndex="1"
• HorizontalAlignment="Right"
• VerticalAlignment="Bottom"
• Margin="0 0 20 20"

When the notification user control is visible :

• The notification user control is over the grid containing main window's child controls
• The notification user control is in the bottom right corner of the main window

Answer 3

Try this,

using Panel.ZIndex you can achieve this.

<Expander Name="expander_options" Header="Options"  Margin="330,10,0,182" Panel.ZIndex="1">
            <StackPanel Margin="10,4,0,0" Panel.ZIndex="2" Background="Aqua">
                <CheckBox Margin="4" Content="Option 1" />
                <CheckBox Margin="4" Content="Option 2" />
                <CheckBox Margin="4" Content="Option 3" />
            </StackPanel>
        </Expander>