Forums | NoesisGUI

Hi!
I have a generic "Overlay" class in C++ that holds some shared UI elements for all my overlays (Title, close button, Content).
In the game I then load various UI screens/xamls into this Overlays Content container.
In my case the "Content" container of my overlay is a Viewbox.

Now when I edit and preview my UI screens that are being put inside of the overlay they look very different in the Noesis Studio Preview because they are missing the viewport as the parent.
See the second attached screenshot for an example. I have a Grid as a parent for my menu buttons and I place this Grid and its children inside of the Overlays "content" Viewport.

My question would be:
Is there some way to preview UI as if it would be nested inside of another UI? For my purpose I think having an option to wrap my UI inside of a Viewport just for preview would be great. Or ideally I could even give it one of my other UI screens and see it in the context of that screen as if I was viewing it being attached to one of its containers.

Another solution that I think would be even better would be the option to drag a xaml onto a container of another open xaml in the navigator (See first screenshot) and modify it there with the modifications being saved to the source xaml. This would allow me to quickly place my content into the container, preview it there and make adjustments seeing the final picture and then having those changes being applied back to my "source" xaml. Once I'm done I can just remove it from the hierarchy again..

Hi Wuceng, Dorian here!

In your particular use case, and with your authoring goals in mind, our recommendation would be to transfer the content that you are currently storing inside of Pages, into DataTemplates.
(So storing your UI Elements as Resources rather than Pages)

What this will then allow you to do, is to simply place one or many ContentControl Elements in your 'Master' page in the place where you would like them to appear, and apply the desired DataTemplate to each to make them display on-screen.

One particular advantage of this system, is that if you assign a Template to a ContentControl in the context of a screen that uses it, you can edit and save changes to the Template in a way that will display it:
- In the exact position it will appear, and respecting the layout rules of the Page.
- Using the assigned Data Context of the screen.
- At the dimensions at which it appears in the screen where its employed.

Minus being able to drag-and-drop a XAML file from the Assets Panel, and instead assigning a Template via the ContentControl's Context Menu and/or its Properties under the 'Templating' section, this solution should otherwise meet all of your requirements.

In terms of the considerations about how you are driving this code-side, all that you'd need to do, is to change the Content of the ContentControl to automatically apply the corresponding DataTemplate.

Let me know if this makes sense, otherwise, always happy to explain further and create a little example to demonstrate this workflow.

- Dorian

Hi Dorian!

Thank you for the input and moving to a ContentControl+DataTemplate setup sounds like a really good idea. Thank you for pointing me to it. I actually did something like that for one of my C++ controls before, but didnt think it was possible in Studio.
In general I think you just removed one of the last big blockers in my brain to understanding WPF templating! It finally clicked now and I see how all those things work together. Even the button and why it defaults to showing strings makes sense now haha.

In general I think this whole topic would be a great candidate for one of your Video guides. To me it seems like a very fundamental concept that isn't really obvious without a WPF background.

Thank you!

Hi Wuceng,

Fantastic news! I'm so glad this all made sense!

(and I agree a Tutorial on this workflow is something we should do! Stay tuned! 🙂)

- Dorian