How can I overlay a control on a window?

Question

Now I have a normal window with a bunch of controls.

When the user clicks a specific button, I want to extinguish the entire window, and then display the popup at the top. Not a real dialog box, just something that is inside the window.

So this is my theory ...

• Each control is at level 0.
• There is a rectangle of the same size as the shape in layer 1. This has a transparency of 50%.
• My popup is loading in layer 2.
• Clicking anywhere in the rectangle will do the same thing as clicking to close the popup.

Is it possible?

Answer 1

It is quite possible.

Place the entire user interface on any panel inside the <Grid> .

Then in the same grid, put <Rectangle Opacity=".5" Visibility="Collapsed" /> for the overlay and a centered panel for the popup.

Handle the click event of the rectangle and hide the popup.