Nesting WPF Paths

Question

I'm trying to create a Venn diagram control for an application I'm working on in WPF. I just want to create a two way Venn at the moment, so two circles overlapping each other.

There are two features I'm trying to get working:
1. The control must resize the Venn to fill the available space.
2. Each section of the Venn should take mouse input as well as having a different colour.

I can do both of these just not at the same time...

At the moment my code looks like this:

<Grid>  
<Path Stretch="Uniform" Fill="Blue" >
  <Path.Data>
    <GeometryGroup>
      <CombinedGeometry GeometryCombineMode="Exclude" >
        <CombinedGeometry.Geometry1>
          <EllipseGeometry Center="-25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry1>
        <CombinedGeometry.Geometry2>
          <EllipseGeometry Center="25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry2>
      </CombinedGeometry>
      <CombinedGeometry GeometryCombineMode="Exclude" >
        <CombinedGeometry.Geometry1>
          <EllipseGeometry Center="25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry1>
        <CombinedGeometry.Geometry2>
          <EllipseGeometry Center="-25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry2>
      </CombinedGeometry>
      <CombinedGeometry GeometryCombineMode="Intersect">
        <CombinedGeometry.Geometry1>
          <EllipseGeometry Center="-25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry1>
        <CombinedGeometry.Geometry2>
          <EllipseGeometry Center="25, 0" RadiusX="50" RadiusY="50"/>
        </CombinedGeometry.Geometry2>
      </CombinedGeometry>
    </GeometryGroup>
  </Path.Data>
</Path>

As you can see I'm using Geometry objects for my Venn sections but I want to have Path objects so that I can support the interaction and styles. Is this possible? Is there a better way of doing this?

Thanks!

Answer 1

If you use each of your CombinedGeometry objects as the Data for a separate Path, you can get different interaction and colors. In order to get it to resize properly, you can put the Grid in a ViewBox instead of setting Stretch on the path. This won't shift the origin, so you'll want to shift the ellipses to be centered at (50,50) and (100,50).

<Viewbox>
    <Grid>
        <Path Fill="Blue">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Exclude">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry Center="50, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <EllipseGeometry Center="100, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
        <Path Fill="Red">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Exclude" >
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry Center="100, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <EllipseGeometry Center="50, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
        <Path Fill="Purple">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Intersect">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry Center="50, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <EllipseGeometry Center="100, 50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Viewbox>