How to create widget tree?

[Texn0krat]

Good evening. I want to recreate that items tree:

I have base textures for it, like holder

highlighter

icons

But I don’t understand how to achieve it in unreal? I tried to use 2 uniform grid panels one over another but without good result. What can I do with it?

[Everynone]

One grid is enough. Each item is a user widget that can handle a highlight internally. The X bits could be just a tiled background image or material.

[Texn0krat]

So, I should use overlay with grid and image as child widgets?

[Everynone]

No need for an overlay I think. Border, grid, user widget as items should suffice.

---

Ideally, you’d separate a grid slot from an item. Grid holds user widget slots that items can be dropped into. So something along the lines of:

• slot:

• grid holds slots:

• make user widgets representing items and drop them into Named Slots

I’ve assumed you’ll want some kind of drag & drop mechanics here. But Named Slots allow you to pre-populate slots easily.

[Texn0krat]

No, I don’t want drag & drop mechanics here.
I just can’t understand 2 things:
how to add connectors between slots:

so I thought I should use overlay where grid contains slots, and tiled image of connector;
and how to make this grid expandable with scroll box

[Everynone]

@Texn0krat

so I thought I should use overlay where grid contains slots, and tiled image of connector;

Are they supposed to be purely visual?

[Texn0krat]

Yes, just to add more details.

[Everynone]

In that case you could, indeed, try your original solution:

You’d need to prepare the connector images of appropriate size & spacing, and tile them in the Border inside the Overlay. If this needs to be more dynamic, then it should be done inside material instead.

---

And an alternative is to make tiles that look like so:

So it’s one image, and then have rules for edges / corners.

[Texn0krat]

Sorry, but are you sure this hierarchy is correct?

I’ve tried this and getting strange result:

[Everynone]

The hierachy is fine. You need to adjust the widgets to fill the space in their respective containers.

[Texn0krat]

Still don’t understand. I’ve adjusted all the widgets with 0 paddings and fill horizontally+fill vertically, but still getting tiny overlay. Is there someting in scroll box options I could miss?

[Everynone]

Here’s how this was set up:

• main border is sitting in a canvas so we can set its size directly, don’t Size to Content or there will be no scrolling:

• the Scroll Box & Overlay do not matter as the grid inside will dictate the Desired Size they must adapt to and the border outside will help to wrap it.

• the Border inside the Overlay:

Play with Padding to keep it away from the edges.

• the Uniform Grid dictates the size of the slots and their padding

Does it help at all? Don’t forget to actually add your slots! Either manually or with script.

[Texn0krat]

@Everynone

Don’t forget to actually add your slots!

Here’s was the problem! My grid was empty so it didn’t fill any of space.

[Texn0krat]

What’s for we need border inside of overlay? I suppose we setting backround image with first border, right?

[Everynone]

The border with the background image needs to be inside the scroll box so we can scroll both - the grid & the background connector border. The Overlay helps keep them together so the scroll box treats them as one element. (a scroll box can only have one child)

[Texn0krat]

And the last question I suppose. How to tile background texture? I tried to use scale parameter but it’s just distort image. I think I need something like padding, but it doesn’t work at all.

[Everynone]

It’s very limited, you’d need to do it in the material or prepare images with the correct padding.

[Texn0krat]

Understood, thank you very much for your answers.