Image Aliasing Issue Due to BitmapScalingMode Limitation

[gokcekantarci]

Describe the bug

We are developing an application that extensively uses WinUI 3 for its UI components. We've encountered a significant issue related to image rendering quality, specifically when displaying "BitmapImages". The core of the issue is the apparent lack of aliasing, which degrades the visual quality of images, especially those with sharp details or diagonal lines.

This problem seems rooted in the inability to apply RenderOptions.BitmapScalingMode="HighQuality" within WinUI 3, a limitation that significantly impacts our application's user experience. Our application, part of the Microsoft PowerToys project, requires high-quality image rendering to meet our users' expectations.

Given the current limitations of WinUI 3, is there an alternative method or workaround to achieve high-quality image rendering? We are seeking solutions that would allow us to bypass or mitigate the effects of the current BitmapScalingMode limitations.

Steps to reproduce the bug

1. Load a BitmapImage with sharp details or clean diagonal lines into the application.
2. Observe the rendering quality of the image.

Expected behavior

The image should be rendered with high-quality aliasing, ensuring sharp and clear visual quality, similar to viewing the same image in other high-quality image viewers or applications.

Screenshots

Snapshot from app

Original Image

NuGet package version

WinUI 3 - Windows App SDK 1.5.0: 1.5.240227000

Windows version

Windows 10 (21H2): Build 19044

Additional context

This issue affects the Microsoft PowerToys project, specifically the Peek feature, impacting our ability to deliver the expected level of quality to our users.

For reference, here is the link to the issue in the PowerToys repository where this problem was initially documented:
microsoft/PowerToys#28192

To further illustrate the issue related to image aliasing in WinUI 3 and its impact on our application, here are direct links to the relevant code snippets in the PowerToys repository:

Image Loading in Code: The image is loaded here in ImagePreviewer.cs:
ImagePreviewer.cs#L277-L279

Image Display in XAML: The XAML definition showing how the image is displayed can be found here:
FilePreview.xaml#L28-L34

These snippets highlight the implementation details relevant to the image rendering issue we are facing due to limitations within WinUI 3. Any insights or workarounds to address the high-quality rendering of BitmapImages would be greatly appreciated.

We appreciate your attention to this matter and any guidance or solutions you can provide.

[JohnnyWestlake]

Loading the image directly in XAML will avoid this - XAML will natively decode the Image at the desired display size, applying high quality rescaling - IF the rules from Right Size Image decoding are followed from here https://learn.microsoft.com/en-us/windows/uwp/debug-test-perf/optimize-animations-and-media.

It will also re-decode everytime the display area gets larger. When the display area gets smaller it won't re-decode until the source is changed, but this is less on an issue.

[ranjeshj]

Marking as feature proposal to have WinUI3 support High Quality image scaling. It is missing the RenderOptions - https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.renderoptions?view=windowsdesktop-8.0

[gegao18]

Another potential workaround is to use WIC directly to do Fant scaling.
https://stackoverflow.com/questions/41210819/nearest-neighbor-rendering-in-uwp
https://learn.microsoft.com/en-us/uwp/api/windows.graphics.imaging.bitmapinterpolationmode

Would that work for your scenario?

[gokcekantarci]

Loading the image directly in XAML will avoid this - XAML will natively decode the Image at the desired display size, applying high quality rescaling - IF the rules from Right Size Image decoding are followed from here https://learn.microsoft.com/en-us/windows/uwp/debug-test-perf/optimize-animations-and-media.

It will also re-decode everytime the display area gets larger. When the display area gets smaller it won't re-decode until the source is changed, but this is less on an issue.

Hi,

As suggested under the "Right-sized decoding" heading, I first attached the live tree and then set source. It worked.
Thank you for your recommendations.