How to add a semi-transparent shade over elements in WPF?

Question

I would like to add a semi-transparent colour over the contents of a WPF window (to indicate the state of the window). Currently I am using a UserControl that fills the Window, and I change the Background colour and Visibility as required.

The problem with this method is when the UserControl is visible, I cannot click any controls (Buttons, CheckBoxes) in the Window behind the UserControl. I guess I need to make the UserControl transparent to clicks somehow. Is this possible, or is there a better way to add the colour over the Window?

Answer 1

You could set IsHitTestVisible to False on your masking element.

<Grid>
   <Button>Background Button</Button>
   <Rectangle Fill="Blue" Opacity="0.25" IsHitTestVisible="False"/>
</Grid>

Try that XAML out in something like Kaxaml. You will still be able to click the button, yet the blue rectangle will be presented over the top. It is semi-transparent due to the low opacity setting.