t1m0thyj / WinDynamicDesktop

Port of macOS Mojave Dynamic Desktop feature to Windows
https://windd.info
Mozilla Public License 2.0
4.4k stars 293 forks source link

Support for High DPI Displays #73

Closed ghost closed 5 years ago

ghost commented 6 years ago

Fonts and graphical interface elements are blurred on High DPI Screens.

Please make the user interface DPI Aware and support High DPI Screens.

Thank you.

screenclip

Screenshot in Windows 10 with Scale and layout at 150% (27" screen, 3840 x 2160).

t1m0thyj commented 6 years ago

I don't see any blurriness in the screenshot, the clarity of the font and images looks good. I also use the app on a laptop with higher DPI than normal (125% scale), and haven't noticed any problems with blurriness there. The app should support high DPI out of the box, unfortunately I'm not sure what I can do to fix the issue unless it can be reproduced with a different screenshot.

luandersonn commented 5 years ago

He's right, there's an DPI problem. But it's a little hard to see in the screenshot, but it is quite visible on the monitor.

100% vs 125%. 100 125

t1m0thyj commented 5 years ago

@luandersonn Do you have multiple monitors with different DPI settings?

Edit: Also are you using the desktop version of the app or the Windows Store version?

luandersonn commented 5 years ago

No. Windows Store version.

t1m0thyj commented 5 years ago

On my 1080p monitor I can't seem to reproduce this when I change my DPI to 150%, my guess is its only a problem on larger resolutions. Because of this I can't test a fix myself, but I've added some code that should hopefully make the app DPI aware.

Could you try this EXE that I've uploaded and let me know if it fixes the blurriness: https://drive.google.com/open?id=16iYKtrRmG7-X4LuHHLLcRqRASNMZ0m8X

EDIT: Just updated the EXE, there was a bug in the DPI code

herb-duan commented 5 years ago

There problem only appears in the UWP version, the EXE version performs seems well.

t1m0thyj commented 5 years ago

@HerbertDuan15 Which EXE version did you test, the one I uploaded in the comment above, or the version on the GitHub releases page?

ghost commented 5 years ago

I'm still experiencing this issue, both in EXE and Windows Store 2.2.0.0 version.

Here are two screenshots of the EXE version (please, click on these images to view them in full size):

Image 1: "About" Screen in EXE version. Image 2: "About" Screen opened in Override high DPI scaling behavior by Application mode.

There is a clear difference in sharpness of fonts between these two images.

I think it could be solved by implementing High DPI Awareness.

t1m0thyj commented 5 years ago

@alpyn Thanks for the screenshots that clearly show the difference. Which EXE version did you test, the one I uploaded in the comment above, or the version on the GitHub releases page? The version that I uploaded for testing contains code that should implement high DPI awareness as described on the page you linked to.

ghost commented 5 years ago

@t1m0thyj Here is the screenshot of the uploaded version 2.2.1 (I downloaded it from the comment above):

Fonts are fine now, but interface elements are misplaced.

t1m0thyj commented 5 years ago

@alpyn I think I've fixed the font getting cut off, could you please test with this version: https://drive.google.com/open?id=1TJfMcLbuKxZzF74wcqLg6KsmDLxL08oC

(The message boxes likely still have the problem in this version, but the rest of the dialogs should be OK.)

herb-duan commented 5 years ago

this is the software interface in my computer(this test version: https://drive.google.com/open?id=1TJfMcLbuKxZzF74wcqLg6KsmDLxL08oC): feedback feedback2

ghost commented 5 years ago

@alpyn I think I've fixed the font getting cut off, could you please test with this version: https://drive.google.com/open?id=1TJfMcLbuKxZzF74wcqLg6KsmDLxL08oC

(The message boxes likely still have the problem in this version, but the rest of the dialogs should be OK.)

Yes, it's significantly better now :-)

As you mentioned, message boxes (like "About" screen) are not displayed correctly, but beside of that, it looks fine.

There is just one minor issue: Label "Image x of y" in the Select theme window overlaps next button (look at the red rectangle):

screenclip
t1m0thyj commented 5 years ago

Added the help wanted label because I haven't been able to figure out the correct fix for this. I've researched high DPI for Windows Forms and everything I've tried has had a different problem:

I'm also hindered in my ability to test this by the fact that I don't have an extremely high DPI display, and temporarily changing my DPI in Windows didn't seem to work as expected. If someone knows how to fix this issue in a way that takes care of all the points mentioned above, I'll be happy to accept a PR for it.

t1m0thyj commented 5 years ago

Apparently .NET Framework 4.8 (not yet released) contains a fix for the blurriness at high DPIs (source):

Fixed Winforms application and controls, when enable for ""per-Monitor"" Dpi aware, they are not scaled according to the dpi of the monitor ( or device). Winforms app by default behave like ""System"" Dpi aware. This is causing Winforms applications/controls to be displayed ""blur"" as a result of windows scaling them and in some cases, controls are either not scaled or scaled out of proportionate. Made changes on control level to respond to DPI change event (assuming windows raise this event whenever there is a DPI change) and rescale controls according to the new DPI. [597091, System.Windows.Forms.dll, Bug, Build:3621]

I'll investigate whether I can backport this fix to the current version in the meantime.

ddasutein commented 5 years ago

Hi @t1m0thyj I tried implementing DPI awareness to my fork and I was wondering if you've already done this before? Here is the commit.

I also downloaded the EXE that you provided above and this is what the UI looks like on 125% scaling: https://imgur.com/7UwhShP

And here is the added DPI awareness: 125% - https://imgur.com/xtwgUxI & https://imgur.com/toiKTPu 175% - https://imgur.com/SaYX6aP

With the added code, the user interface can scale up with no blurring issue. However, there is a problem where the Message Boxes aren't scaling properly. The workaround to this is to set the 'High DPI scaling override' to 'System (Enhanced)' but there is a weird bug happening where the font looks different and the context menu on the monitor (set at 100%) is blurred. https://imgur.com/I7AZX08

t1m0thyj commented 5 years ago

@ddasutein Thanks for looking into this. I noticed that in your commit you changed the AutoScaleMode from Font to DPI. Doesn't this result in the problem I mentioned above?

If someone has a custom font size set on Windows, then the interface will look bad for them because it is scaled based on DPI and ignores font size.

ddasutein commented 5 years ago

@t1m0thyj Is the custom font size options in Ease of Access or in Display settings? The option in Ease of Access that makes text bigger increases the size of the window controls, but not the UI elements. In Display settings, I have only have options to increase by percentage or set a custom scaling size. Or I assume this is a problem in Windows 8.1 and 7?

t1m0thyj commented 5 years ago

image @ddasutein If your code works fine with the "Make text bigger" option then I would say it looks good and you're welcome to make a PR for it. TBH I haven't really tested with that option myself, I had only tested with different DPI settings before.

Two questions about the changes you made:

ddasutein commented 5 years ago

windynamicdesktop - 155per text 100per dpi

windynamicdesktop - 155per text 125per dpi

@t1m0thyj

Top: Text size is set to 155% and DPI scaling at default (100%) Bottom: Same text size, but DPI scaling at 125%

.NET 4.7.2 had some improvements for DPI scaling for WinForms, so I decided to upgrade to that. However, I still can't figure out why the Message Box dialogs are still blurred. Maybe .NET 4.8 might have that fix? The app.manifest allows the DPI awareness to work. If you try to comment out line 43 where it says Windows 10 and you build the project, the app won't scale properly. We can leave that file there for now until a better solution is found. At least then it won't be blurred when changing scaling size.

And yeah the preview box in Select Theme dialog needs to be resized smartly. Although it's not really a big deal if the user already has his/her DPI scaling set then opening the Select Theme dialog. It would display just fine. It only becomes an issue if you keep changing DPI settings back and forth while the app is opened.

EDIT: I changed all the remaining forms to AutoScale by DPI, as well as enabling Windows 7, 8, and 8.1 DPI compatibility in the manifest file in this commit. I'll be testing the new changes on Windows 7, 8.1, 10 (1803, 1809, and 19H1 builds) then do a pull request if everything is good.

elliottbw commented 5 years ago

There are still issues with scaling on high DPI displays. I use a 1440p monitor at 125% scaling, and this is what the context menu for the tray icon looks like:

image

Compare this blurred text to the text for the clock, which is clear.

ddasutein commented 5 years ago

@elliottbw Can you try out my fork where I've implemented the DPI changes? I don't have a 1440p monitor to test with, but it would help a lot if you could give feedback if it scales properly on your monitor.

limegorilla commented 5 years ago

I'm not sure if this has been fixed, but I have a 3200 x 1800 display @ 120% scaling and can attest that there is no blurriness nor artifacting. Everything is completely readable

t1m0thyj commented 5 years ago

This should be fixed in version 3.1 which was just released (will take a day or two to show up on the Microsoft Store).