Draw rectangles over bitmapimage in WPF

Question

I'm trying to figure out the best way to draw rectangles over a Image in wpf. When the user clicks somewhere in a thumbnail Image the region the user clicks should be marked with a semi-transparent rectangle. This is easy. I just add a rectangle with some opacity on a canvas that is placed over the BitmapImage. The problem is when the user clicks the same region multiple times, then a new rectangle will be added over the previous rectangle and because of the semi-transparency the combined rectangles will the be darker. Please look at the image:

So, my question is: How should I draw the rectangles to prevent this behavior? Not matter how many times the user clicks a region or overlapped region the area will always have the same semi-transparent color.

Thanks

Answer 1

I'm not sure if you want a new rectangle to make the previous one dissapear or prevent darkening when combining multiple rectangles.

If You want to show only a single Rectangle

Instead of creating a new Rectangle each time, use only a single Rectangle element (it can be even defined when the form starts) and hide it. Then, when the user clicks on the thumbnail just show this Rectangle and set the its position and size appropriately.

If You want to combine multiple Rectangles without darkening effect

One possible way to control how overlapping rectangles' colors blend is to use Path and add RectangleGeometry objects to a GeometryGroup with FillRule="NonZero" set. Take a look at this article for more information: http://mark-dot-net.blogspot.com/2008/05/combining-paths-in-xaml-for-silverlight.html.