Forums | NoesisGUI

I'm looking to improve how layout and scaling works at normal and high DPI. I have noticed a few things:

* Images not displayed at their native resolution can appear either blurry (if upscaled) or grainy (if downscaled).

* Screen resolution has a significant impact on UI scale.

I looked into ViewBox and I am comfortable using it but I wanted to ask... what is really the best way to go about doing this? I hope you do not mind that I have a few questions I'd like share.

1) Should I try to have one viewbox at the root of the visual tree -- and have this perform scaling with proportionality in mind? Or is it more likely that I'll need multiple view boxes on a per control basis?

2) Should I convert UI window chrome into vector art?

3) So let's say I my normal DPI icon image is 128x128 pixels. Should I create a 512x512 pixel version and use it when 4K? Which raises the next question ...

4) Do I try to have two modes -- just normal DPI and High DPI and let layout management do the rest?

As you can imagine, I don't really have a great grasp of how to best tackle this. In UWP, there was a global scaling factor that tended to make things look the same, more or less. It did not resolve, however image distortion.

Example UI, Full HD:


Example UI 4K:

1) With a single Viewbox at the root you won't get the expected results unless the aspect ratio is always the same. Proper UI scaling can be achieved by using Grid relative sizes and Viewboxes:
- You should partition your screen in the appropriate cells where UI will be placed, then use viewboxes inside each cell.
- You can define hidden elements to work as size references for other UI metrics. For example, you can calculate how many pixels take a 10% of the screen height by having this: 2) For simple designs having everything as vector graphics would be the ideal solution, but sometimes that is not possible if you have complex borders in your dialogs. In that case it is better to use 9-slicing if appropriate.

3 and 4) If at the end you need to use images, having high resolution versions might be necessary . You can specify different set of images by adding a different ResourceDictionary to the application, or appropriate images could be provided by the view model depending on the screen resolution.

These are just some recommendations but there are probably other ways to solve this. You can see another approach here: viewtopic.php?f=12&t=834

3) So let's say I my normal DPI icon image is 128x128 pixels. Should I create a 512x512 pixel version and use it when 4K? Which raises the next question ...

If you activate mipmaps in the texture you can use the same one for all the resolutions and we will choose the best mipmap available. The result can be a bit blurry though, there is a ticket about it.