Forums | NoesisGUI

Hi,

I've bought Noesis for Unity some time ago, but it's not until now I've had the time to start using it.
I haven't used WPF before, so the learning-curve for XAML feels quite steep right now...

There's one thing I'm not sure how to solve in Noesis. I guess it's not specific to Noesis, but rather XAML as a whole, but I hope you can still give some pointers:

I want to make sure that all text, cornerradii and so on will be the same size (with regards to percentage of screen height) across all devices.

So on a computer with 1920x1080 res and an android device with 480x320 res, a font size of 20 would be say 10% of the screen height, but a different physical size.

This could be solved by a Viewbox with Stretch set to Uniform.

BUT, at the same time I want to be able to fill the entire screen by a grid, for example.

My use case is to have a root grid that fill the entire screen.
The grid would have a set height (which will be scaled to fit the screen height).
The grid consists of 3 columns.
The left and right columns would have a specific width set, and the center column would take the remaining space.

So if the user has a screen or mobile device with a 4:3 aspect, the center column would be thinner, but the left and right columns would have a width that is aspect correct because of the scaling in the Viewbox.
On a device with a 16:9 aspect, the center column would be wider.

The thing that I can't get my head around is how to achieve everything I want at the same time.
If I use a Viewbox with uniform stretch, I get perfect scaling of fonts etc so that the GUI looks the same on all devices.
But at the same time, the uniform stretch prevents me from having the child-grid fill the entire screen since the viewbox has infinite size. If I make the grid wider, the viewbox will shrink it's contents to fit the width instead of the height.

If I use fill as the stretch method, I can get elements to stretch to fill the screen, but then every child element gets a different aspect ratio then expected and everything gets distorted.

Is there an easy way to set the width of the grid as it's height multiplied by the aspect ratio of the screen?
Or is there a better way than using a viewbox to make all texts and radii take up the same percentage of the screen while still allowing me to use fill the screen in both directions?

I know about binding, but if there's a way to achieve my goals in pure XAML it would be great.
I use Kaxaml, and I would prefer if I could preview the GUI in that application with the same layout and size as in Unity.

Sorry for a really lengthy and somewhat confusing post, but I hope that you had the stamina to read it through!

Hi,

If I understood correctly you want a layout formed by 3 columns, where left and right columns width is a percentage of the screen height, and center column fills the remaining space.

Playing a bit with Grid columns and bindings, I managed to get the following. I hope it was what you needed.

For non-noesis specific, xaml related questions you'll probably be better off asking on http://stackoverflow.com/questions/tagged/wpf. I'm not at PC right now, but could look up a solution tomorrow.

Thank's a lot! I haven't had a chance to really try the solution out yet, but it looks promising!

Have you had time to test the layout I proposed to you?
Does that layout fit your needs?

Have you had time to test the layout I proposed to you?
Does that layout fit your needs?

Yes, I've tried it and it works. I haven't had time to to any more tests though.
Right now I'm kind of evaluating the pros and cons of Noesis as compared to other frameworks such as DF-GUI, NGUI etc in Unity on the side, but my free time is limited since I'm working on a massive Unity project at work.

My main problem with Noesis is also it's strength, namely the use of xaml.
The solution you proposed works, but I have a hard time envisioning how to extend that example for a large application where everything must be able to adjust automatically to all kinds of resolutions and aspect ratios.

When searching online for different solutions, it's pretty clear that this is not the kind of functionality that WPF was made for.
It seems that Microsoft thinks everyone should make apps that show more content on larger screens instead of scaling the content.

Could the same effect be achieved in a cleaner way by setting width, height and scale of the root-node from Unity in a way similar to code-behind files for WPF?

I'm sorry if my questions are a bit naive, I've never used xaml prior to this and it feels like a pretty steep learning curve before I can grasp all of the relationships between properties and components.

Yes, I've tried it and it works. I haven't had time to to any more tests though.
Right now I'm kind of evaluating the pros and cons of Noesis as compared to other frameworks such as DF-GUI, NGUI etc in Unity on the side, but my free time is limited since I'm working on a massive Unity project at work.

My main problem with Noesis is also it's strength, namely the use of xaml.

Obviously I am biased here because I have been working in noesisGUI for the last three years. I think that we are in a totally different line from NGUI and DF-GUI. If you examine the GUI of games done using Unity you will see that all they have poor interfaces: static interfaces, poor animations.. very far from the GUIs you can find in AAA games. I think that the reason is that the tool to design GUI is incorrect. You cannot give Unity to a designer because his expressiveness will be limited, or even worst, the GUI will be tweaked by a programmer. This is the same as if you wanted your 3d modellers to build the meshes inside Unity. The GUI must be done outside unity, as a resource, and using professional tools that do not limit the artist, without programmers.

The solution you proposed works, but I have a hard time envisioning how to extend that example for a large application where everything must be able to adjust automatically to all kinds of resolutions and aspect ratios.

When searching online for different solutions, it's pretty clear that this is not the kind of functionality that WPF was made for.
It seems that Microsoft thinks everyone should make apps that show more content on larger screens instead of scaling the content.

One of strengths of WPF (and noesisGUI) is the versatility of containers. You can design a GUI that shows more content with more resolution or you can obtain a GUI that maintains the proportions with more resolution. For example, look at this game (http://atomictorch.com/), it is being done with noesisGUI. That game can run at 1080p, 720p, 640x480 etc, and the GUI is always the same, always perfect pixel without blurring.

Could the same effect be achieved in a cleaner way by setting width, height and scale of the root-node from Unity in a way similar to code-behind files for WPF?

The ideal solution, to hide the the XAML complexity is creating a custom control that implement the specific layout functionality you want. Although for now, custom controls can only be created in C++.

I'm sorry if my questions are a bit naive, I've never used xaml prior to this and it feels like a pretty steep learning curve before I can grasp all of the relationships between properties and components.

Do not worry at all. We are here to help. I know XAML has a steep learning curve (I recommend treading he book Wpf 4.5 Unleashed by the way) but once you start to master it you won't go back to other solution.