Looking for a good WPF solution for a transparent, click-through overlay

Question

I want to try something different, and am attempting to display an overlay on top of my current WPF GUI that allows the user to still interact with the GUI, but provides a layer of annoyance to let them know that something's up.

My question is really two separate questions:

1. How would you do the overlay?

My first attempt was to use a Rectangle, set the Fill to the appropriate color, and then change the Opacity. But it's not transparent to click-throughs. So I think what I want to do, according to search results, is to create a separate window, set its Background to Transparent, and then set AllowsTransparency to True. While this works, if I want to do something like Background="DarkRed" Opacity="0.2", click-throughs no longer work.

And this leads me to the second part:

2. What's the right way to resize this overlay region if I'm using MVVM?

My main window creates the ViewModel, which creates the Model. The Model is the only thing that knows about whether or not the overlay should be displayed. But the main window obviously is the only thing that knows its size, and the Model never knows about anything above it. Is the only way to achieve this to databind the overlay Window's size to properties in the ViewModel, and then have the ViewModel set these values any time the main Window's size changes?

Anyone have clues on how I can achieve all of these things?

Answer 1

To address part 1: set IsHitTestVisible="False" on your overlay, be it a Rectangle, Border or some other element. This will allow you to make it whatever color and transparency level you want without affecting interaction with the underlying controls.

Part 2: you shouldn't use a separate Window. If you keep the overlay in the main Window you can rely on the layout in your view to automatically handle sizing of the overlay.