Use a sharper BitmapScalingMode for previews about simple-icon-file-maker

[TheJoeFin]

I was able to finally solve this issue. I did so with the help of StackOverflow and Composition APIs.

This method removed the sub-pixel rendering or anti-aliasing effect I was seeing when using a standard Image or Viewbox uniform to fill scale option.

To see how:

Simple-Icon-File-Maker/Simple Icon File Maker/Simple Icon File Maker/Controls/PreviewImage.xaml.cs

Lines 114 to 158 in 2f9d675

	private void LoadImageOnToCanvas()
	{
	mainImageCanvas.Children.Clear();
	// from StackOverflow
	// user:
	// https://stackoverflow.com/users/403671/simon-mourier
	// Post: read on 2023/12/28
	// https://stackoverflow.com/a/76760568/7438031
	// get visual layer's compositor
	Compositor compositor = ElementCompositionPreview.GetElementVisual(mainImageCanvas).Compositor;
	// create a surface brush, this is where we can use NearestNeighbor interpolation
	CompositionSurfaceBrush brush = compositor.CreateSurfaceBrush();
	brush.BitmapInterpolationMode = CompositionBitmapInterpolationMode.NearestNeighbor;
	// create a visual
	SpriteVisual imageVisual = compositor.CreateSpriteVisual();
	imageVisual.Brush = brush;
	// load the image
	LoadedImageSurface image = LoadedImageSurface.StartLoadFromUri(new Uri(_imageFile.Path));
	brush.Surface = image;
	int size = isZooming ? ZoomedWidthSpace : _sideLength;
	Width = size;
	Height = size;
	// set the visual size when the image has loaded
	image.LoadCompleted += (s, e) =>
	{
	// choose any size here
	try
	{
	imageVisual.Size = new System.Numerics.Vector2(size, size);
	image.Dispose();
	}
	catch { }
	};
	// add the visual as a child to canvas
	Grid tempGrid = new();
	ElementCompositionPreview.SetElementChildVisual(tempGrid, imageVisual);
	mainImageCanvas.Children.Add(tempGrid);
	}

[michael-hawker]

@TheJoeFin is this what you need? 🦙 https://stackoverflow.com/questions/41210819/nearest-neighbor-rendering-in-uwp

[TheJoeFin]

I am using ImageMagick to scale the source down to the different sizes. The images from that process are good.
The problem I am having is when displaying those small, say 16x16, images on the Image control within the Viewbox control they look blurred when scaling them up.

Is there a better way I should be "zooming in" on the small sizes? Maybe this is an issue with the Viewbox.

[michael-hawker]

I think the suggestion here is to use the BitmapTransform in the UI layer to scale the image back up to the target DPI/size to display in the Image over using Viewbox?

But that does seem a bit excessive.

What happens if you don't put the image in the Viewbox and just resize the Image control with the Uniform stretch - is it the same behavior then?

[TheJoeFin]

I removed the Viewbox and have the same problem.

Here on the left is the preview in Simple Icon File Maker and on the right is the preview of the same file in the photos app. 🤔