WPF Rub out top image to reveal image underneath - wpf

Question

As the title suggests, using WPF I want to have a scenario where I have a bitmap image with another bitmap overlayed on top of it and, using the mouse, "paint" over the top bitmap so that it reveals the bitmap underneath. Is this just as simple as painting with a transparent brush? I have tried this to no avail but maybe I am missing something.

Answer 1

You can use a VisualBrush to create an OpacityMask. Here is a code example of a dark green rectangle being replaced by a light green one. Using this approach the two rectangles could be any elements including images.
<Grid MouseMove="Grid_MouseMove">
<Rectangle Fill="DarkGreen"/>
<Rectangle Fill="LightGreen">
<Rectangle.OpacityMask>
<VisualBrush Stretch="None" AlignmentX="Left" AlignmentY="Top">
<VisualBrush.Visual>
<Path Name="path" Stroke="Black" StrokeThickness="10"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
and here is the code-behind:
private void Grid_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
var point = e.GetPosition(sender as Grid);
if (lastPoint != nullPoint)
AddSegment(lastPoint, point);
lastPoint = point;
}
else
{
lastPoint = nullPoint;
}
}
private void AddSegment(Point point1, Point point2)
{
if (segments.Count == 0 || segments[segments.Count - 1].Point != point1)
segments.Add(new LineSegment(point1, false));
segments.Add(new LineSegment(point2, true));
var figures = new PathFigureCollection();
figures.Add(new PathFigure(new Point(), segments, false));
var geometry = new PathGeometry();
geometry.Figures = figures;
path.Data = geometry;
}
List<LineSegment> segments = new List<LineSegment>();
private static readonly Point nullPoint = new Point(-1, -1);
Point lastPoint = nullPoint;