WPF Grid Panel.ZIndex set to 1 is not working in case of another window

Question

I am building an app in WPF and I want to show a navigation stack panel to appear always on top of every other child window, just like how a menu bar functions.

My MainWindow.xaml has this code in a grid.

<!--// Navigation Panel //-->

<Grid
    x:Name="nav_pnl"
    HorizontalAlignment="Left"
    Width="65"
    Background="#2E333A"
    Panel.ZIndex="1"
    >

    <StackPanel
        x:Name="st_pnl"
        >

        <Grid
            Background="#FF225277"
            Height="100"
            >

            <TextBlock
                Grid.Row="1"
                Grid.Column="0"
                Margin="73,-20,0,0"
                Text="COMPANY"
                Foreground="White"
                FontSize="22"
                Background="Transparent"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Style="{StaticResource styl_tb_font1}"
                >

            </TextBlock>

            <ToggleButton 
                x:Name="Tg_Btn"
                Grid.Column="0"
                VerticalAlignment="Center"
                HorizontalAlignment="Left"
                Margin="18,-20,0,0"
                Height="30"
                Width="30"
                >

                <ToggleButton.Background>

                    <ImageBrush
                        ImageSource="Assets/tgBtn_default.png"
                        Stretch="None"
                    />

                </ToggleButton.Background>


            </ToggleButton>

        </Grid>

        <!--// ListView with menu list items //-->

        <ListView
            x:Name="LV"
            Background="Transparent"
            BorderBrush="Transparent"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            >

            <ListViewItem
                HorizontalAlignment="Left"
                Margin="0,0,0,15"
                PreviewMouseLeftButtonUp="Dashboard__Click"
                IsSelected="True"
                >

                <StackPanel
                    Orientation="Horizontal"
                    Width="230"
                    >

                    <Image
                        Source="Assets/ico_dashbrd.ico"
                        Stretch="Fill"
                        Width="30"
                        Height="30"
                        Margin="12,0,0,0"
                    />

                    <TextBlock
                        Text="Dashboard"
                        Margin="25,0,0,0"
                        Style="{StaticResource styl_tb_font1}"
                    />

                </StackPanel>

            </ListViewItem>

            <ListViewItem
                HorizontalAlignment="Left"
                Margin="0,0,0,15"
                >

                <StackPanel
                    Orientation="Horizontal"
                    Width="230"
                    >

                    <Image
                        Source="Assets/icon2.ico"
                        Stretch="Fill"
                        Width="30"
                        Height="30"
                        Margin="12,0,0,0"
                    />

                    <TextBlock
                        Text="Preference"
                        Margin="25,0,0,0"
                        Style="{StaticResource styl_tb_font1}"
                    />

                </StackPanel>

            </ListViewItem>

            <ListViewItem
                HorizontalAlignment="Left"
                Margin="0,0,0,15"
                >

                <StackPanel
                    Orientation="Horizontal"
                    Width="230"
                    >

                    <Image
                        Source="Assets/icon3.ico"
                        Stretch="Fill"
                        Width="30"
                        Height="30"
                        Margin="12,0,0,0"
                    />

                    <TextBlock
                        Text="Sign Out"
                        Margin="25,0,0,0"
                        Style="{StaticResource styl_tb_font1}"
                    />

                </StackPanel>

            </ListViewItem>

    </StackPanel>

</Grid>

A separate window opens on click of the Dashboard. Here is the cs code:

private void Dashboard__Click(object sender, MouseButtonEventArgs e)
{
    Window1 wndw1 = new Window1();
    wndw1.Owner = this;
    wndw1.Show();
}

The problem here is shown in the screenshot.

While navigating on the panel, it must appear on the topmost of all the child windows so as to easily switch to another window (just like a menu bar). How can I achieve this?

Answer 1

Ok I have found the solution to this.

I just added a parent as <Popup> to the code above and it is working as expected. Now it also works when the child window has a property Topmost=true .

The code now looks like:

<Popup
  IsOpen="True"
  StaysOpen="True"
  Placement="Relative"
  Grid.Row="1"
  >

  <!-- // Grid named st_pnl -->

</Popup>