Question

In a WPF User Control, I am trying to mask an Image control with a circle that can vary in position and size. The user left-drags to change the circle radius and right-drags to change the center point of the ellipse. I’m capturing all the needed values correctly and can properly set the radius of the mask. The problem is, that no matter what point I use for the center of the ellipse, it is drawn from the center of the Image control. Any ideas?

Below is the code that sets the mask:

private void SetMask(double _Radius)
{
        EllipseGeometry MaskGeometry = new EllipseGeometry(CenterPos, _Radius, _Radius);
        GeometryDrawing MaskDrawing = new GeometryDrawing(Brushes.Black, null, MaskGeometry);
        DrawingBrush MaskBrush = new DrawingBrush(MaskDrawing);
        MaskBrush.Stretch = Stretch.None;
        Img.OpacityMask = MaskBrush;  //Img is the Image control
}

Answer 1

You also have to set the ViewboxUnits, AlignmentX, and AlignmentY properties:

private void SetMask(double radius)
{
    var maskGeometry = new EllipseGeometry(CenterPos, radius, radius);
    var maskDrawing = new GeometryDrawing(Brushes.Black, null, maskGeometry);
    var maskBrush = new DrawingBrush
    {
        Drawing = maskDrawing,
        Stretch = Stretch.None,
        ViewboxUnits = BrushMappingMode.Absolute,
        AlignmentX = AlignmentX.Left,
        AlignmentY = AlignmentY.Top
    };

    Img.OpacityMask = maskBrush;
}