Question

I have Topmost fullscreen window

AllowsTransparency="True" WindowStyle="None" Topmost="True" WindowState="Maximized" Left="0" Top="0"
OpacityMask="#2B000000" Background="Black" Cursor="Cross"

and I’m drawing rectangle when user holds LMB and moves mouse (it’s selection, like on screenshot in this my question Easiest way to select screen region ).

I want to make rectangle completely transparent, to see content behind window. But I can’t make it more transparent than parent window. What should I do?

Answer 1

Try something like below and dynamically change the size and location of the second RectangleGeometry (selectRect) in some mouse event handler. And perhaps also adjust the size of the first RectangleGeometry to your screen size.

<Window x:Class="TransparentRectangle.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            WindowStyle="None" WindowState="Maximized"
            AllowsTransparency="True" Background="Transparent">
    <Grid>
        <Path Fill="Black" Opacity="0.5">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Exclude">
                    <CombinedGeometry.Geometry1>
                        <RectangleGeometry x:Name="screenRect" Rect="0,0,2000,2000"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry x:Name="selectRect" Rect="100,100,200,100"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

A problem might however be that you won’t get any mouse events in the excluded part of the CombinedGeometry. To avoid that you could attach the mouse handlers to the Window (instead of the Path) and give it a nearly transparent background.

<Window ... Background="#01000000" MouseMove=... etc>
    ...
</Window>

EDIT: An even simpler solution might be a Border. You could independently adjust the four components of the BorderThickness.

<Grid ...>
    <Border BorderBrush="Black" Opacity="0.5" BorderThickness="100,100,200,400"/>
</Grid>