Forums | NoesisGUI

Hi,

I'm currently in the final stage of my project (targeted at mobiles for now) and part of that is 'implementing' my artist's design. Up until now I had various definition resource dictionaries that were loaded depending on the DPI. Now I'm wondering whether simplify this a bit more.

And just to be clear, the problem is not the general layout because I can easily do that with the relative layout that XAML allows. The problem are things like little spaces between two TabItem-Headers, the border thickness of a button, the font-size, etc.

But now I was wondering whether I could either apply a 'global' layout scale transform (tested it, doesn't work ) or use a Converter and apply the appropriate factor.

Do you have any other ideas? What is the right approach to this problem? Any help would be really appreciated.

Hi Scherub,

I guess that, given the possibilities that XAML offers, there are many valid approaches to achieve that, but I think using data binding is the most simple and powerful. You can have a UIScaler data object that gets updated whenever screen size changes, and that provides appropriate values for margins, border thickness, font sizes... you can bind then from the UI to adapt accordingly.

I'm sure other users can contribute with better and proven ideas here.

When you say that a global layout scale transform didn't work, what do you mean? That it is failing and not behaving as in WPF? Or that using a layout transform is not appropriate in this situation?

Hi sfernandez and thanks for your reply. Using another data object for various things is also an interesting idea but might make things more difficult at design time.

I'm continuing overhauling all my views now. But it will take a few days to finish it. After that I'll go over all a last time to fine tune everything and also do the scaling. Maybe someone comes up with another idea to consider until then.

The layout scale transform works fine in general (I use it for animationen purposes.), it's just not appropriate in this situation.

One of the new things in Universal Windows Applications is the RelativePanel. I don't know if something like that could be useful for this kind of problem. We could evaluate the implementation in NoesisGUI.

This may be obvious but are you using Viewboxes? If you search in the forums about it you can find interesting threads about resolution independent techniques.

I took a look at RelativePanel you linked and it looks pretty interesting but I'm not sure it would solve all my problems.

I thought about using ViewBoxes but I don't know anything about the possible performance impact if I start using them 'everywhere' and I also don't know whether they're appropriate in every situation.

Let's say I want a border with 3 points and an inner border with 1 point. On a 320dpi device they're barely noticable. If I would use ViewBoxes I would have to put them around each control. I don't know whether it would have the desired effect or if I just put one around the RootPanel.

I also have to admit they I lack all the required mobile devices that I would need for proper testing. I have various devices with about 320dpi, one with 120dpi, but none with 160 or with 240dpi. Of course I can test the standard 96dpi of Windows.

Hello!

While making VoidExpanse we researched various techniques to implement UI scaling according to DPI and user preferences. We ended up with a custom solution and I will share our experience here.

Viewboxes is a simple and clean solution, which suits best if you have a fixed aspect ratio and just need to scale your controls according to DPI (and if you don't need scaling the popups/tooltips also). In that case, you need to wrap the UI root with a Viewbox, set the UI root "design" width and height (I will explain it with example below), set the Viewbox stretch mode to uniform and set its horizontal and vertical alignments to stretch - and voilà, Viewbox will simply scale its content to fit into the available space.

For example, if you have a root 1024x768 and your screen is 2048x1536, Viewbox will simply scale it four times - everything will appears four times bigger, including fonts size, line thickness, etc. Very effective - only one Viewbox and no even a single line of C# code required. The performance is great - I suppose that internally it uses simple scale transform so it will just add one more matrix multiplication.

However, the Viewbox approach doesn't work well if the target aspect ratio could be different to its content aspect ratio - it will scale the content with keeping the aspect ratio so you will get some padding on two sides (either top-bottom or left-right). Of course you could set Viewbox stretch mode to fill, but then you get the wrong aspect ratio of underlying controls (circles will appear not round, etc), but for some games it maybe considered acceptable...

For example, when we making HUD for VoidExpanse, we wanted to have radar at top right corner, ship stats and bottom left corner, etc. So we used Grid to setup proper layout for all these controls - and encapsulated each one of them to its own custom Viewbox control. Yes, custom, because WPF/NoesisGUI Viewbox is simply stretch to available space and scale its content accordingly - and it doesn't work good with the described approach for us. We've made our custom Viewbox content control - it simply scale on a global UI scale, which is calculated as relation between "design" size and actual screen size. It also adds some margins if required.

The VoidExpanse controls are designed for 1024x768 and during runtime we calculate global scale coefficient and apply it to all custom viewboxes. The good thing about this is that we was able to easily add UI scale setting (0.5-1.5x) to the options menu - we simply multiple the global UI scale coefficient on it and then update our custom viewboxes - and it works just perfect. This approach also allows us scaling the popups/tooltips! - we just encapsulate its content to our custom viewbox and it automatically scales accordingly to the global UI scale.

If you're interested, I could describe in details the particular implementation of the custom viewbox control.

Regards!

Now I just had to start Void Expanse and test it with various window resolutions and I have to admit the scaling looks pretty good. Even spanning it across all three screens worked well for the UI, only the FPS wasn't up to it.

So yes, I would be interested in more details of your custom viewbox control.

Hello!

I've prepared the Unity sample code so you could play with it and use as you wish.
Link: https://github.com/aienabled/Unity_Noes ... tomViewbox

There are two example scenes - TestWindow and TestHUD:

• TestWindow example uses a ScreenViewbox - it simple scale its content proportionally to the screen size.
• TestHUD example uses several ScreenAutoViewbox'es. It's a more complicated control: it scale its content proportionally to the screen size and with accordance to its multiplier factor. It will also properly align control according to Horizontal/Vertical alignment and takes margins into account.

Hope it will be helpful!
Regards!

Many thanks! I'll take a closer look in the next few days and give you some feedback.

For now I have to focus on preparing my second test version.

I've prepared the Unity sample code so you could play with it and use as you wish.

Thanks for the effort! I have added it to the Showcase section and will be added to the Samples page in the new website we are preparing.