MaKrossEffect
Topic Author
Posts: 3
Joined: 05 Feb 2026, 22:32

Any popup element guide?

08 Feb 2026, 00:11

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?
 
User avatar
dstewart
Site Admin
Posts: 133
Joined: 22 Jan 2024, 11:41

Re: Any popup element guide?

10 Feb 2026, 14:52

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:

PopUpsSample.jpg
PopUps.zip
(2.54 KiB) Downloaded 501 times
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:

PopUpProperties.jpg

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.
PopUpHierarchy.jpg
PopUpHierarchy.jpg (25.15 KiB) Viewed 35247 times
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'.
ContentControlVisibility.jpg
ContentControlVisibility.jpg (39.33 KiB) Viewed 35247 times
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
 
User avatar
dstewart
Site Admin
Posts: 133
Joined: 22 Jan 2024, 11:41

Re: Any popup element guide?

13 Feb 2026, 11:53

Adding onto this thread, that there is now a 📘 Popup Element guide in our Noesis Studio official documentation.

PopupElementDoc.jpg

Who is online

Users browsing this forum: No registered users and 2 guests