Image smoothing in UWP app

0
votes

I have a small UWP application that load same image in two ways:

        var folder = Package.Current.InstalledLocation;
        var file = await folder.GetFileAsync("TestImage.png");

        var bitmapImage1 = new BitmapImage();
        using (var stream = await file.OpenAsync(FileAccessMode.Read))
        {
            await bitmapImage1.SetSourceAsync(stream);
        }

        var bitmapImage2 = new BitmapImage(new Uri(BaseUri, "TestImage.png"));

        _image.Source = bitmapImage1;
        //_image.Source = bitmapImage2;

The problem is that Image control shows the same image in different ways. For bitmapImage1 image is not smoothed, but for bitmapImage2 it's ok. How it looks like. I need to do some manipulation with image before show (change some pixels) but I also need to have smoothed image after that. Could you please help me with it?

I also used WriteableBitmap to change some pixels and have same result (not smoothed). Looks like I need to tell to Image control how to draw this.

Here is link to project for more information

2
c#imageuwpuwp-xaml

2 Answers

0
votes

I tested your code on my side. And you will found if you don't set the Height and Width properties for the image control, the pictures will looks all the same. So the reason for one looks smooth but another looks not is the image control scaling the picture. Without scaling the picture will not looks different. I guess this may be leaded but difference between vector and bitmap image.

You should be able to resolve it by create a smooth picture with the size you just want to show in the app, and set the image control to the same size with the picture or without setting the Height and Width properties, this may resolved.

My result:

enter image description here

0
votes

I've got solution on another thread. If change order of code lines it helps:

    var folder = Package.Current.InstalledLocation;
    var file = await folder.GetFileAsync("TestImage.png");

    var bitmapImage1 = new BitmapImage();
    _image.Source = bitmapImage1;

    using (var stream = await file.OpenAsync(FileAccessMode.Read))
    {
        await bitmapImage1.SetSourceAsync(stream);
    }

So we should assign Image source and than set source stream to Bitmap.

It seems, Image control decodes the picture quite flexibly so that it can suit for acutal UI size. If you set the BitmapImage to Image.Source first, the picture is to be smoothed properly like the second one.