How can I overlay a control on a window?

Question

Right now I have a normal window with a bunch of controls.

When the user hits a certain button I want to dim the entire window and then display a popup on top of it. Not a true dialog box, just something that is inside the window.

So this is my theory...

1. Every control is on layer 0.
2. There is a rectangle the same size as the form in layer 1. This has 50% transparency.
3. My popup is loaded into layer 2.
4. Clicking anywhere on the rectangle will do the same thing as pressing close on the pop-up.

Is this possible?

Answer 1

This is perfectly possible.

Put your entire UI in any panel inside of a <Grid>.

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

Handle the rectangle's click event and hide the popup.