Forums | NoesisGUI

TLDR:
I'm trying to find a way to split up XAMLs that will work both in Noesis Studio and Runtime.

Premises:
Have a game HUD with distinct sections/modules.
Each section should have its own VM (cpp) and View (XAML).
Assume 1 View for main HUD and 1 sub-View for list of Pawns in Scene, for example.

The problem:
I'm failing to find the right way to link/organize the 2 Views (XAMLs) such that the setup works both in Noesis Studio and Runtime.
So far I managed to put together 4 different ways to do it, each has some issues, none feels right:

1) <Component Source="PawnList.xaml">
- This seems like first class feature of Studio, works perfectly _in Studio_
- Runtime screams `GameplayHUD.xaml(28,5): Unknown element type 'Component'`, can't get this to work

2) <local:PawnList>
- This is standard way I would do it in WPF
- Runtime works when code behind (stub cpp) is provided and the class is registered; pity but works
- Studio renders the sub-XAML but refuses to compose the whole HUD XAML

3) <ContentControl> & DataTemplate
- Runtime works, resolves bound VM type, also very standard in WPF
- Studio renders, but it's impossible to layout-edit ResourceDictionary files

4) <Control Template="PawnListAsControlTemplate">
- Runtime works
- It's again ResourceDictionary so impossible to render and edit individually + pity to link
- Main HUD composes and renders, can be switched to Template-edit mode so technically workable
=> Probably acceptable workflow, but feels like hacking/bending in a way that was not intended

Is there a better/simpler recommended way?
Did I just miss an obvious pattern?

Noesis Studio: v0.2.290
Runtime: Unreal 5.7 & NoesisGUI 3.2.13 (r17073)

Our recommendation to split your UI in different parts is to use DataTemplates, because it translates very easily to the MVVM approach.

You mentioned that Studio is not able to layout-edit the ResourceDictionary files, but we provide several ways to do that.

The first thing you have to do is set up your global resources:

And select the same dictionary as your application resources in Unreal.
Now all the resources (and merged dictionaries) you add to the global resources will be available to both Studio and your Unreal project.

In order to edit a data template you can either go to the Resources tab (Ctrl+5) and click the pencil icon, or if you have the template already assigned to one control, you can right click to show the context menu and in the Template entry select the "Edit current" for the desired template to edit it inline:

You will get the best experience if you define design data under the Data tab (Ctrl+6) that matches your runtime view models. I modified your Repro project to include some example data structures and a data set that helps visualize the UI during design time.

Please let us know if you need extra help with anything.

In order to edit a data template you can either go to the Resources tab (Ctrl+5) and click the pencil icon

This was the key piece of information.
Thanks

Suggestion for improvement:
By default the Studio renders the Resource files likes this.
Looks "kinda unsupported/empty", thus my perception/feeling from it => it can't be edited.


If it would instead present the resource list right in the Assets -> Navigator, it would be much easier to discover.
One can then enter the same Template mode that is available now.
The result is the same experience for user as other controls/files, natural and intuitive.

it would instead present the resource list right in the Assets -> Navigator, it would be much easier to discover.

Thanks for your valuable feedback! We're aware of current limitations of resource editing and we have an ongoing task to improve those workflows. Hopefully we will be able to release them very soon.