Blurry image with CanvasVirtualControl

[AndrewKeepCoding]

Hi, and thanks in advance!
If there's a better place to ask Win2d-related questions, please let me know.

On the right side is the blurry image rendered using CanvasVirtualControl.
On the left side is the same BMP file opened on the Paint app.

Image size: 128 x 250
File type: BMP

How can I render the image with the same clarity as the Paint app?

Here's the code for this demo app:

MainWindow.xaml

<Grid x:Name="RootGrid">
    <ScrollViewer x:Name="ScrollViewer" ZoomMode="Enabled">
        <win2d:CanvasVirtualControl
            x:Name="CanvasVirtualControl"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch" />
    </ScrollViewer>
</Grid>

MainWindow.xaml.cs

public MainWindow()
{
    InitializeComponent();
    this.RootGrid.Loaded += RootGrid_Loaded;
    CanvasVirtualControl.RegionsInvalidated += CanvasVirtualControl_RegionsInvalidated;
}

private CanvasVirtualBitmap? CanvasVirtualBitmap { get; set; }

private async void RootGrid_Loaded(object sender, RoutedEventArgs e)
{
    await LoadImage();
}

private async Task LoadImage()
{
    string fileName = "128x250.bmp";
    //string fileName = "2048x4000.bmp";
    string filePath = Path.Combine(AppContext.BaseDirectory, "Assets", fileName);

    if ((await StorageFile.GetFileFromPathAsync(filePath)) is not { IsAvailable: true } storageFile)
        return;

    using var fileStream = await storageFile.OpenAsync(FileAccessMode.Read);
    IRandomAccessStream streamForCanvas = fileStream.CloneStream();
    BitmapDecoder bitmapDecoder = await BitmapDecoder.CreateAsync(streamForCanvas);
    PixelDataProvider pixelDataProvider = await bitmapDecoder.GetPixelDataAsync();
    var pixelBuffer = pixelDataProvider.DetachPixelData();
    CanvasVirtualBitmap = await CanvasVirtualBitmap.LoadAsync(CanvasVirtualControl.Device, streamForCanvas);
    CanvasVirtualControl.Width = CanvasVirtualBitmap.SizeInPixels.Width;
    CanvasVirtualControl.Height = CanvasVirtualBitmap.SizeInPixels.Height;

}

private void CanvasVirtualControl_RegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{
    if (CanvasVirtualBitmap is null)
        return;

    foreach (Rect region in args.InvalidatedRegions)
    {
        using var session = sender.CreateDrawingSession(region);
        session.DrawImage(
            image: CanvasVirtualBitmap,
            destinationRectangle: region,
            sourceRectangle: region);
    }
}

Demo app repo:
AndrewKeepCoding/Win2dDemoApp

[getrou]

Hello! I'm not working on Win2D anymore these days, so forgive me if I get this wrong.

But it looks to me like you need to pass a CanvasInterpolationMode to your DrawImage call. You want Nearest, which I believe is not the default. I think this will solve your issue. Interpolation modes describe how to sample the source image when drawing it bigger/smaller than its actual size.

Let me know if that solves your issue! If it doesn't, we might need to dig into XAML interpolation modes and see if Xaml is applying some kind of interpolation mode.

[AndrewKeepCoding]

Thank you for the quick reponse @getrou!

But it looks to me like you need to pass a CanvasInterpolationMode to your DrawImage call. You want Nearest, which I believe is not the default.

I tried the following as suggested but didn't notice any improvement in image clarity:

using var session = sender.CreateDrawingSession(region);
session.DrawImage(
    image: CanvasVirtualBitmap,
    destinationRectangle: region,
    sourceRectangle: region,
    opacity: 1.0f,
    CanvasImageInterpolation.NearestNeighbor);

we might need to dig into XAML interpolation modes and see if Xaml is applying some kind of interpolation mode.

Would appreciate your thoughts on the next steps!

[Gavin-Williams]

This worked for me...

      session.DrawImage(
          image: CanvasVirtualBitmap,
          destinationRectangle: region,
          sourceRectangle: sourceRegion,
          1.0f,
          CanvasImageInterpolation.NearestNeighbor);

Notice that I changed the source region to match the texture. Don't know if that could help. I also used my own texture (24x26 pixels). You can see here that its working. I don't know the virtual control at all, and so I couldn't reproduce your issue. At first the texture was very small, then I set the virtual-canvas size to 2000x2000 to make it big, and used the NearestNeighbor argument and it was working. I don't know if this helps, but at least it's a check for the interpolation mode.

[AndrewKeepCoding]

@Gavin-Williams Thanks for chiming in!

Notice that I changed the source region to match the texture.

I tried passing the entire image size (region with 0 offsets) but got the same result.

var sourceRegion = new Rect(
    0,
    0,
    128,
    250);

I don't know the virtual control at all, and so I couldn't reproduce your issue.

I just found out that the link above to a reproducible project was not correct. Here's the correct link.

AndrewKeepCoding/Win2dDemoApp

Could you please try with this project?