Combining two semi-transparent ellipses

Question

Hi everyone,

Have a strange one. I have two ellipses that have an opacity of 0.7. What I'd like to do, is where the two ellipses cross, show a different color. In an old WF image I'd have run through each pixel and swapped colours, but I'm not sure how to do this with a layer in Silverlight. Anyone have any ideas?

Thanks!

Answer 1

edit: Sorry, there were a few errors with the properties of the various elements. This is tested:

Create a Path and put as Path.Data a GeometryGroup that has the two EllipseGeometries as child elements. Set GeometryGroup.FillRule to "EvenOdd" so that the area that both ellipses cover is not filled, and set "Fill" to the color you want the ellipses to have (here: AliceBlue).

Put that Path into a Control with "Background" property, like Border, and set that Background to the color you want the area both ellipses are covering to be (here: yellow).

Then you set Clip to the same GeometryGroup with FillRule set to "Nonzero" to prevent the area around the ellipses to also be painted with the background color.

        <Border Background="Yellow">
            <Path Fill="AliceBlue" Stroke="Black" StrokeThickness="4">
                <Path.Data>
                    <GeometryGroup FillRule="EvenOdd">
                        <EllipseGeometry Center="100,100" RadiusX="40" RadiusY="80" />
                        <EllipseGeometry Center="100,100" RadiusX="80" RadiusY="40" />
                    </GeometryGroup>
                </Path.Data>
            </Path>
            <Border.Clip>
                <GeometryGroup FillRule="Nonzero">
                    <EllipseGeometry Center="100,100" RadiusX="40" RadiusY="80" />
                    <EllipseGeometry Center="100,100" RadiusX="80" RadiusY="40" />
                </GeometryGroup>
            </Border.Clip>
       </Border>

If you need both ellipses to be painted in different colors use two Border and Path objects, use the same GeometryGroup with "EvenOdd" and set each of Border.Clip to one EllipseGeometry object.

If you need a more detailed definition use a PathGeometry instead of GeometryGroup and define the area with ArcSegments.