Question: How to Disable Anti-Aliasing When Drawing Images on CanvasVirtualControl for Sharp Pixel Display?

[bj-gegf]

I'm developing a graphic processing tool that needs to display images with zoom functionality. My goal is to ensure that when an image is enlarged, the pixels are clearly visible, similar to Windows Paint, rather than appearing blurry due to anti-aliasing.

I tried this using the Win2D-Samples VirtualBitmapExample by placing a CanvasVirtualControl in a ScrollView and utilizing the DrawImage method of the CanvasDrawingSession to render the image. However, the result is still a blurry image.

Any advice on how to achieve sharp pixel display without anti-aliasing would be greatly appreciated!

private void ImageVirtualControl_RegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{
    foreach (var region in args.InvalidatedRegions)
    {
        using (var ds = ImageVirtualControl.CreateDrawingSession(region))
        {
            if (virtualBitmap != null)
            {
                ds.Units = CanvasUnits.Pixels;
                ds.Antialiasing = CanvasAntialiasing.Aliased;                
                ds.DrawImage(virtualBitmap, region, region, 1, CanvasImageInterpolation.NearestNeighbor);
            }
        }
    }
}

Expect Result:

Actual Result:

[getrou]

Hm, good question! I haven't had time to investigate yet, but I have some ideas. CanvasControl and CanvasVirtualControl are offscreen render targets, so the NearestNeighbor that you are using here is just for rendering your image to your off-screen render target. That then gets scaled up in the ScrollView, so now you need to tell either the ScrollViewer or the CanvasVirtualControl how to filter when drawing that scaled up render target to the screen.

[bj-gegf]

@getrou thank you for response. I think in WPF we can set RenderOptions.BitmapScalingMode to resovle the issue, but cannot found similar options in WinUI.