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

Vishal · Answer 1 · 2014-04-26T20:30:34.910

10

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).

edited Apr 26 '14 at 20:30

answered Apr 26 '14 at 20:24

Vishal

6,238
10
82
158

2

ZIndex is actually an attached property on Panel in WPF and also used by other overlapping layout panels like Canvas. – John Bowen Apr 26 '14 at 20:39
@JohnBowen thanks for your information. I will keep it in mind. – Vishal Apr 26 '14 at 20:50
@Vishal I can not put the status bar and the notification user control on the same row. The notification user control's height will be greater than than the status bar's height. The notification user control must overlap the bottom row and be partially over the control above. – user1139666 Apr 29 '14 at 06:20

score 6 · Accepted Answer · answered Apr 30 '14 at 06:38

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

score 4 · Answer 3 · edited Jun 08 '22 at 07:14

4

Or, you can make use of Popup (always stays on top of other controls). And toggle it's IsOpen state when you want to show some updates.

<Popup IsOpen="True">
    <TextBlock Text="Important update!!" Background="White" Foreground="Black"/>
</Popup>

There are several ways you can stick popup to bottom-right position - Dockpanel, stackpanel (with right alignment), Grid. The sample for grid is below:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    
    <StackPanel Grid.Row="0" Grid.ColumnSpan="2">
        <!--Place any control here-->
    </StackPanel>
    <StackPanel x:Name="BottomRightPanel" Grid.Row="1" Grid.Column="1">
        <Popup IsOpen="True" Placement="">
            <TextBlock Text="Important update!!" Background="White" Foreground="Black"></TextBlock>
        </Popup>
    </StackPanel>
</Grid>

edited Jun 08 '22 at 07:14

Bruno Bieri

9,724
11
63
92

answered Apr 27 '14 at 16:13

Manish Basantani

16,931
22
71
103

I have read MSDN documentation about Popup placement but I have not found how to place a Popup in the bottom-right corner of the main window. How can I do it ? – user1139666 Apr 28 '14 at 15:27
@user1139666 try to use `HorizontalAlignment="Right"` and `VerticalAlignment="Bottom"` on Popup. – Vishal Apr 29 '14 at 10:32
Updated my answer above. – Manish Basantani Apr 29 '14 at 12:21
2

In my experience, `Popup` creates a separate Win32 window instead of an overlay in the current window, which isn't what I'm after because the Popup doesn't follow the main window around. – Dai Oct 21 '17 at 22:25

score 4 · Answer 4 · answered Jul 09 '16 at 23:05

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>

Displaying a control over other controls in a grid in WPF

4 Answers4

Linked