Painting a different brush over the intesection of two separate shape objects

Question

Is there a way in WPF when two shape objects overlap each other that the overlapping portions of the object get painted in a different brush?

Thank you,

Adam

Answer 1

Worked it out.

You can use a geometry drawing containing a GeometryGroup with a fill rule of EvenOdd. This paints any overlapping items in white. Then just put another image over the top with CombinedGeometry containing the same objects as the Geometry group with a GeometryCombineMode of Intersect and that will highlight the intersect in your custom brush. The sample code is below:

    <Grid>
    <Image Stretch="None">
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <GeometryDrawing Brush="Red">
                        <GeometryDrawing.Pen>
                            <Pen Brush="Black" Thickness="3" />
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <GeometryGroup FillRule="EvenOdd">
                                <EllipseGeometry RadiusX="80" RadiusY="80" Center="0,0" />
                                <EllipseGeometry RadiusX="80" RadiusY="80" Center="40,0" />
                            </GeometryGroup>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>
    <Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="None">
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <GeometryDrawing Brush="LightBlue">
                        <GeometryDrawing.Geometry>
                            <CombinedGeometry GeometryCombineMode="Intersect">
                                <CombinedGeometry.Geometry1>
                                    <EllipseGeometry RadiusX="80" RadiusY="80" Center="0,0" />
                                </CombinedGeometry.Geometry1>
                                <CombinedGeometry.Geometry2>
                                    <EllipseGeometry RadiusX="80" RadiusY="80" Center="40,0" />
                                </CombinedGeometry.Geometry2>
                            </CombinedGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>
</Grid>

Thanks!