UWP Magnifier control (tool) that follows cursor

Question

I am working on an assignment right now and was asked to create an app to select an area on image with ability to magnify a part of the image around cursor.

Right now I stuck on the magnifier part. There is a Magnifier control in WPF, but how about UWP? Has anyone had any experience creating magnifier in UWP?

SO far I've found this, but UWP has different API's: http://csharphelper.com/blog/2015/06/zoom-and-crop-a-picture-in-c/

My logic is: 1. Draw circle around the cursor and re-draw it every time the cursor moves. 2. Take a screenshot (render) specified area around it 3. Magnify the are 4. Fill the circle with the magnified image (Bitmap)

Any tips or suggestions would be much appreciated. Thank you

Answer 1

1. Draw circle around the cursor and re-draw it every time the cursor moves.

You could register the PointerMoved event for your panel(e.g, Canvas) and get current pointer by using the following method:

private void Canvas_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    var pointer = e.GetCurrentPoint(sender as UIElement);
}

And then, you could add a Ellipse on it and set its position by current pointer.

2. Take a screenshot (render) specified area around it

You could use RenderTargetBitmap class APIs to render specific area.

3. Magnify the are

You could resize the rendertargetbitmap. Check this thread How to Resize the RenderTargetBitmap.

4. Fill the circle with the magnified image (Bitmap)

After you get the final rendertargetbitmap, you could use it to make a ImageBrush, then you could specify this ImageBrush to the Ellipse's Fill property like the following:

ellipse.Fill = new ImageBrush() { ImageSource = renderTargetBitmap};