Creating a reusable Premade Layout with defined "Zones"
Hey everyone,
I actually was wondering, I was exploring several approach to create a reusable Layout to basically have a reusable template for similar looking menus (Header/Footer actions/Left panel/main panel/Right panel). Similar to what a user widget with Named Slot could be in Unreal.
When using pure Xaml I can do it by declaring a CustomControl with BaseComponent dependency property (and potential ControlTemplate properties for each of those zones), similarly to what a headeredContentControl does and just manually fill those zone by applying a template approach, like so :
But reproducing a similar declaration of a Layout Template while still being fully Noesis studio compatible (being able to use the hierarchy seems to require another approach that I haven't found yet. Do you have any recommendation for this?
Many thanks!
I actually was wondering, I was exploring several approach to create a reusable Layout to basically have a reusable template for similar looking menus (Header/Footer actions/Left panel/main panel/Right panel). Similar to what a user widget with Named Slot could be in Unreal.
When using pure Xaml I can do it by declaring a CustomControl with BaseComponent dependency property (and potential ControlTemplate properties for each of those zones), similarly to what a headeredContentControl does and just manually fill those zone by applying a template approach, like so :
Code: Select all
<MyLayoutControl ControlTemplate="{StaticResource Layout.SettingMenu}" >
<MyLayoutControl.Header>
<Texblock>....</Texblock>
</MyLayoutControl.Header>
<MyLayoutControl.LeftPanel>
<ItemsControl>...
</MyLayoutControl.LeftPanel>
<MyLayoutControl.Content> <!-- this could just be without named node -->
<StackPanel>...</StackPanel>
</MyLayoutControl.Content>
<MyLayoutControl.Footer>
<StackPanel>...</StackPanel>
</MyLayoutControl.Footer>
Many thanks!
Re: Creating a reusable Premade Layout with defined "Zones"
Salut Joaquim, Dorian here.
Some of our coders may chime into comment on some of the more technical aspects of this, or some other ways to go about this, but I'll still drop by to tell you how I'd approach this myself within Studio:
Basically, what I'd do, is create one ContentControl Content Template per 'Generic Screen Layout'.
Inside of these 'Generic Screen Layout' Content Templates, would then be placed sub-ContentControls for each 'Widget' (eg: Header, Footer, etc...), in their desired position within the Screen Layout.
To avoid the overhead of having a large collection of 'Generic Screen Layout' ContenControl Templates, that maybe only have minor variances between them, what I'd do is to offload as much of this into Triggers, Setters, or VisualStates within the 'Generic Screen Layout' Template.
In a scenario where for example, you had two identical layouts, but maybe one had a Tall vs a Short Banner, instead of having two 'Screen' ContentControl Templates named 'MainMenu_WithTallBanner' and 'MainMenu_WithShortBanner'
...you could instead have a single 'MainMenu' ContentControl_Content_Template, in which there was a DataTrigger that changed the ContentControl Content Template of the 'Banner' Element within it, to swap between Tall and Short version.
I've just built a very, very rudimentary sample which shows this in practice, where instead of Banners, it switches between a 'Full Leaderboard' module, and an 'Empty Leaderboard' module within an assigned zone:
(Project also attached)
So essentially using "ContentControls" as "Defined Zones", with x-levels of depth of sub-ContentControls.
Anyway, this is the 'Designer' approach, at least as a potential avenue to consider, and as a potential conversation starter for our next exchanges in this thread.
- Dorian
Some of our coders may chime into comment on some of the more technical aspects of this, or some other ways to go about this, but I'll still drop by to tell you how I'd approach this myself within Studio:
Basically, what I'd do, is create one ContentControl Content Template per 'Generic Screen Layout'.
Inside of these 'Generic Screen Layout' Content Templates, would then be placed sub-ContentControls for each 'Widget' (eg: Header, Footer, etc...), in their desired position within the Screen Layout.
To avoid the overhead of having a large collection of 'Generic Screen Layout' ContenControl Templates, that maybe only have minor variances between them, what I'd do is to offload as much of this into Triggers, Setters, or VisualStates within the 'Generic Screen Layout' Template.
In a scenario where for example, you had two identical layouts, but maybe one had a Tall vs a Short Banner, instead of having two 'Screen' ContentControl Templates named 'MainMenu_WithTallBanner' and 'MainMenu_WithShortBanner'
...you could instead have a single 'MainMenu' ContentControl_Content_Template, in which there was a DataTrigger that changed the ContentControl Content Template of the 'Banner' Element within it, to swap between Tall and Short version.
I've just built a very, very rudimentary sample which shows this in practice, where instead of Banners, it switches between a 'Full Leaderboard' module, and an 'Empty Leaderboard' module within an assigned zone:
(Project also attached)
So essentially using "ContentControls" as "Defined Zones", with x-levels of depth of sub-ContentControls.
Anyway, this is the 'Designer' approach, at least as a potential avenue to consider, and as a potential conversation starter for our next exchanges in this thread.
- Dorian
- Attachments
-
- ReusableLayouts.zip
- (3 KiB) Downloaded 364 times
Re: Creating a reusable Premade Layout with defined "Zones"
Hi Dorian, Thank you for your detailed answer with this approach that can definitely have some advantages. It does though create some complexity of nesting that having a custom control with several properties (as logical child) wouldn't have usually.
The thinking here is that if we could expose properties as "slots" when creating those custom control. We could have them easily accessible in the hierarchy tree (similar to what we would do in xaml text edition).
I was thinking of this because I was doing a quick comparison with what is the approach of UMG for this and they have some kind of template with named slot.
You can see in the image below that I created widget (WBP_Template_Layout) containing a grid with several sections with Named slot and when using this widget, I can then add directly content to those section.
This is something I was using a bit while doing manual xaml edition but it doesn't seem as easy to do in Studio.
The thinking here is that if we could expose properties as "slots" when creating those custom control. We could have them easily accessible in the hierarchy tree (similar to what we would do in xaml text edition).
I was thinking of this because I was doing a quick comparison with what is the approach of UMG for this and they have some kind of template with named slot.
You can see in the image below that I created widget (WBP_Template_Layout) containing a grid with several sections with Named slot and when using this widget, I can then add directly content to those section.
-
-
sfernandez
Site Admin
- Posts: 3363
- Joined:
Re: Creating a reusable Premade Layout with defined "Zones"
You can use the StudioNavigatorProperty metadata in Studio for this kind of scenarios.
You can add it to any property to indicate that the property should appear in the Navigator when it is set. This is what we use for elements like BulletDecorator (which exposes a Bullet property in addition to its Child property).
There is one minor issue we haven't solved yet regarding this. The property only appears in the Navigator if you first assign a value in the properties panel. This is something that we identified as problematic, because it is hard to identify those properties beforehand. Could you please create a ticket about this so we can discuss about a possible solution?
Code: Select all
NsProp("Bullet", &BulletDecorator::GetBullet, &BulletDecorator::SetBullet)
.Meta<StudioNavigatorProperty>();
There is one minor issue we haven't solved yet regarding this. The property only appears in the Navigator if you first assign a value in the properties panel. This is something that we identified as problematic, because it is hard to identify those properties beforehand. Could you please create a ticket about this so we can discuss about a possible solution?
Re: Creating a reusable Premade Layout with defined "Zones"
Hi sfernandez,
This actually sounds promising. I have opened a ticket for this bug there : https://www.noesisengine.com/bugs/view.php?id=4793
This actually sounds promising. I have opened a ticket for this bug there : https://www.noesisengine.com/bugs/view.php?id=4793
Who is online
Users browsing this forum: No registered users and 0 guests