Use WPF object to 'punch' hole in another?

Question

I've got an ellipse which is just a circle. My problem is I want to cut out a circle-shaped hole from the middle of the bigger circle and nothing seems to work. I've tried opacity masks and those did not work whatsoever.

To further complicate things, the big circle has a DropShadowEffect. But because the circle is slightly transparent, you can see a big shadowy circle behind it. This isn't really what the mockup looks like and I'm wondering if there's a way to get the shadow to only appear around the edges of the circle, no matter how transparent said circle is.

Thanks!

Answer 1

Instead of using an Ellipse, use a Path, and have the Path.Data be a CombinedGeometry consisting of the two ellipses using the Exclude GeometryCombineMode.

Answer 2

Like this for example :

<Canvas>
<Path Stroke="Black">
  <Path.Data>
    <CombinedGeometry GeometryCombineMode="Exclude">
      <CombinedGeometry.Geometry1>
        <EllipseGeometry Center="100,100" RadiusX="100" RadiusY="100"></EllipseGeometry>
      </CombinedGeometry.Geometry1>
      <CombinedGeometry.Geometry2>
        <EllipseGeometry Center="100,100" RadiusX="80" RadiusY="80"></EllipseGeometry>
      </CombinedGeometry.Geometry2>
    </CombinedGeometry>
  </Path.Data>
</Path>
</Canvas>

For the shadow : this should be solved too, since the resulting object is actually a circle with a whole in it, instead of just an opacity- 'trick'