-
- MaKrossEffect
- Posts: 3
- Joined:
Any popup element guide?
Hey,
I’m new to NoesisGUI and coding. I like the Studio and how UI is made here. Now I’m preparing UI for my future Hytale server.
So, is there any popup guides or examples of using it?
My idea is: person clicks on the button [Someone’s Profile] and new window popups with the full player’s profile information. It is done with popup element, isn’t it?
I’m new to NoesisGUI and coding. I like the Studio and how UI is made here. Now I’m preparing UI for my future Hytale server.
So, is there any popup guides or examples of using it?
My idea is: person clicks on the button [Someone’s Profile] and new window popups with the full player’s profile information. It is done with popup element, isn’t it?
Re: Any popup element guide?
Hi MaKrossEffect, Dorian here!
I've built and attached a little sample Studio Project for you, which showcases two slightly different approaches you can take to creating the result you're after:
I'll take you through both techniques:
Approach 1: Using a PopUp Element
The first method, and the one found in the top quadrant of the file, is simply to use our included PopUp Element, which you can drag-and-drop into your Page from the Add Element Panel.
What this Element includes out-of-the-box in particular, is a handy 'Open' Property which you can hook into, and which can automatically Hide/Display the entire PopUp when checked or unchecked.
It also offers many options for where you want the PopUp to appear in relation to a target of your choice:
What's important to note mechnically about the PopUp Element is that unlike many Elements that can be Templated, the PopUp Element on the other hand is moreso a functional 'part' whose included features can be leveraged to influence what it hosts.
In the sample Project attached for example, you'll notice that the PopUp Element doesn't have any physical content itself, and instead holds a ContentControl Element, which is what actually includes all of the visuals of the PopUp.
Approach 2: Emulating the Mechanics of a PopUp, Without Using a PopUp Element
The second approach you can take, and the one you can find in the bottom quadrant of the attached sample is to instead replicate the behaviors and presentation desired of a 'PopUp', using your own construction.
In this case, instead of hosting a ContentControl inside of a PopUp Element, I simply control the Visibility of the ContentControl based on whether the Player Profile widget (which under the hood, is a CheckBox) is 'Checked' or 'Unchecked'.
Picking an Approach
As you'll see playing around with the file, the visual result between both is identical --- in fact, they both use the exact same ContentPresenter as the 'visual layer' of the PopUp.
With this in mind, the choice really comes down to personal preference and overall architecture, and whether the built-in functionality offered by the PopUp Element itself is something that attracts you, and that you want to leverage.
For example, one cool unique feature that a PopUp offers, is that it has built-in handling that prevents clicking anywhere outside of it, until it is first closed.
But on the flip-side, using a PopUp does potentially come with a little bit more overhead; in that if you don't need all of these features, you can often achieve a PopUp-like presentation without introducing them in the first place.
I'd likely recommend to have a play around with both techniques, and see what you like more. If you're interested in doing a bit more reading on the technical side of this Element, you can find an outline of all of its Properties at 📘PopUp Class. Furthermore, there is also some good information available on the PopUp framework Element at ↗️ Popup (Microsoft Learn).
In any case, let us know how things go, and don't hesitate to reach out if you have any more questions! We're really excited to see what you make!
- Dorian
I've built and attached a little sample Studio Project for you, which showcases two slightly different approaches you can take to creating the result you're after:
I'll take you through both techniques:
Approach 1: Using a PopUp Element
The first method, and the one found in the top quadrant of the file, is simply to use our included PopUp Element, which you can drag-and-drop into your Page from the Add Element Panel.
What this Element includes out-of-the-box in particular, is a handy 'Open' Property which you can hook into, and which can automatically Hide/Display the entire PopUp when checked or unchecked.
It also offers many options for where you want the PopUp to appear in relation to a target of your choice:
What's important to note mechnically about the PopUp Element is that unlike many Elements that can be Templated, the PopUp Element on the other hand is moreso a functional 'part' whose included features can be leveraged to influence what it hosts.
In the sample Project attached for example, you'll notice that the PopUp Element doesn't have any physical content itself, and instead holds a ContentControl Element, which is what actually includes all of the visuals of the PopUp.
Approach 2: Emulating the Mechanics of a PopUp, Without Using a PopUp Element
The second approach you can take, and the one you can find in the bottom quadrant of the attached sample is to instead replicate the behaviors and presentation desired of a 'PopUp', using your own construction.
In this case, instead of hosting a ContentControl inside of a PopUp Element, I simply control the Visibility of the ContentControl based on whether the Player Profile widget (which under the hood, is a CheckBox) is 'Checked' or 'Unchecked'.
Picking an Approach
As you'll see playing around with the file, the visual result between both is identical --- in fact, they both use the exact same ContentPresenter as the 'visual layer' of the PopUp.
With this in mind, the choice really comes down to personal preference and overall architecture, and whether the built-in functionality offered by the PopUp Element itself is something that attracts you, and that you want to leverage.
For example, one cool unique feature that a PopUp offers, is that it has built-in handling that prevents clicking anywhere outside of it, until it is first closed.
But on the flip-side, using a PopUp does potentially come with a little bit more overhead; in that if you don't need all of these features, you can often achieve a PopUp-like presentation without introducing them in the first place.
I'd likely recommend to have a play around with both techniques, and see what you like more. If you're interested in doing a bit more reading on the technical side of this Element, you can find an outline of all of its Properties at 📘PopUp Class. Furthermore, there is also some good information available on the PopUp framework Element at ↗️ Popup (Microsoft Learn).
In any case, let us know how things go, and don't hesitate to reach out if you have any more questions! We're really excited to see what you make!
- Dorian
Re: Any popup element guide?
Adding onto this thread, that there is now a 📘 Popup Element guide in our Noesis Studio official documentation.
Who is online
Users browsing this forum: No registered users and 2 guests