Making a transparent hole in an overlay WPF

Question

I am trying to replicate the effect below in WPF. I have a Grid control, within it a border background color of #000000, with opacity of 0.7 and a content presenter like so...

<Grid>
    <Border Background="#000000" Opacity="0.7" />
    <ContentPresenter ... />
</Grid>

I put an ellipse for content of my control to try to get the effect but I have reached a road block from there.

<Control:SomeControl>
    <Ellipse Fill="Transparent" />
</Control:SomeControl>

Any help is appreciated.

Answer 1

You could set the Clip property of the overlay element (like the Rectangle below). Note that the overlay must be on top of other elements.

<Grid>
    <TextBlock Margin="80,80" Text="Some Text" FontSize="32"/> 
    <Rectangle Fill="Black" Opacity="0.7">
        <Rectangle.Clip>
            <CombinedGeometry GeometryCombineMode="Exclude">
                <CombinedGeometry.Geometry1>
                    <RectangleGeometry Rect="0,0,10000,10000"/>
                </CombinedGeometry.Geometry1>
                <CombinedGeometry.Geometry2>
                    <EllipseGeometry Center="100,100" RadiusX="50" RadiusY="50"/>
                </CombinedGeometry.Geometry2>
            </CombinedGeometry>
        </Rectangle.Clip>
    </Rectangle>
</Grid>