The colors in MAUI application are wrong

[AghaSKhan]

Description

Develop an application, and MAUI produces the wrong Colors.

link.txt

Steps to Reproduce

I have just provide you the sample. Please open the link.
https://surprisinggames-my.sharepoint.com/:f:/p/agha_khan/En2U4cUYrcdPjJOIHrZKiM4BUccSQs8XECC3CQ24MxDKEg?e=6bUoWt

Link to public reproduction project repository

https://surprisinggames-my.sharepoint.com/:f:/p/agha_khan/En2U4cUYrcdPjJOIHrZKiM4BUccSQs8XECC3CQ24MxDKEg?e=6bUoWt

Version with bug

8.0.3

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

No response

Did you find any workaround?

No work around

Relevant log output

none

[PureWeen]

@AghaSKhan can you post a screenshot of what you expect and what is actually happening?

[ghost]

Hi @AghaSKhan. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[AghaSKhan]

I have to develop three programs to explain. For some unknown reasons Microsoft removed Transformation with MAUI. First I will upload WorkingWpfClock.zip.
WpfMauiCodeClock.zip
This contains Brush transformation. I removed all the Transformations and build again as WPF it is WpfMauiCodeClock.zip. Same code XAML is almost same
MauiXamlClockApp.zip
I am not sure why they have different look while code is the same.

[AghaSKhan]

WorkingWpfClock.zip
Perhaps that part was missing.

[PureWeen]

@AghaSKhan is this a bug or more of a missing feature? It looks like WPF has transforms for the brush whereas MAUI doesn't have that implemented.

[ghost]

Hi @AghaSKhan. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[AghaSKhan]

You are correct, Microsoft should add the implementation on brush transformation. It is not a bug if like to see ugly user interfaces.

[Redth]

It looks like you are setting the Grid's Scale to 2 and expecting the paths to be scaled in their measurements. Unfortunately this is not how scaling works. The clock looks blurry because you are effectively taking something that has paths calculated and rendered at one size, and then scaling up the result instead of scaling the paths themselves.

It also doesn't look like we take into account the scale value when we render paths/shapes to scale the actual path itself, which kind of makes sense since something like a polygon could be lossy in doing so.

One thing you could do to work around this would be to process the paths yourself and scale them up yourself.

[AghaSKhan]

Hi @Redth:
Did you run WPF application? There is no difference between WPF or SVG, because I am using same code. Both are beautiful. Do you also know it is a vector base application and we can scale to any size. I have to look at it how scale works under MAUI, but ViewBox works like a Charme. You may enlarge any size with WPF, no problem. I can supply endless samples and they work fine under WPF or SVG. There is no difference between polygon or path, because under the hood everything is a path. Infect in my all applications I convert every drawing object to path. I have no misconception that MAUI is an ugly interface. I will look again the scale factor again and reply to you again. Just try ViewBox with WPF and MAUI should do the same. Because there is no option for brush transformation, so you will never be able to build beautiful interface. I have one option to use Skia sharp to build beautiful scalable interface. I do not see any problem. I am graphic guy, and it is no problem for me. Your input is very much appreciated.

[AghaSKhan]

AliaOfficeApp.zip
RedAlia.zip
Enjoy

[AghaSKhan]

Hi @Redth: Run any size. No problem. :-)

[Zhanglirong-Winnie]

Verified this issue with Visual Studio 17.10.0 Preview 3(8.0.3 &8.0.7&8.0.20). Can repro on windows platform with sample project.

[kenlyon]

I see a problem with my border. It's meant to be a 1px black stroke but it renders three pixels wide:

• #BFBFBF
• #7F7F7F
• #BFBFBF

If I set the stroke size to something like 10px, it looks black. There seems to be some scaling and anti-aliasing going on. (My scaling is set at 100%)

[MartyIX]

I think that the following comments might explain the issue (if you are talking about Windows platform):

• [Windows] <Border> on Windows is blurry #21087 (comment)
• [Windows] <Border> on Windows is blurry #21087 (comment)

tl;dr: A workaround would be to implement a custom control based on WinUI's <Border> control¹ (MAUI's <Border> is using <Path>s to draw borders). Then the border would be as expected.

Footnotes

1. See https://github.com/dotnet/maui/issues/21087#issuecomment-2104358056. ↩

[mattleibow]

This is because WPF applies scaling before rendering. MAUI uses the OS scaling feature, which first renders and then scales.

I do not believe that we can fix this via MAUI directly because when you have a view inside another view, we no longer have a way to tell the OS to not scale a view because we already scaled it.

One way is to scale the path data yourself, as Jon mentions. I am not sure of any other ways.