Most grids seen anywhere which are populated by text and images have resizable columns. You click in the border between the columns, the cursor changes to a two sided arrow, and you can drag with mouse to set the column width. How would i do that? Any good tutorials out there? I’m using UMG and blueprint project.
1 Like
Never seen a tutorial for that (never looked for one, though) but I got it to work surprisingly quickly so it might be the right way to do it. It’s in a very crude state, you’d need to implement additional functionality and polish but here’s the idea behind it.
The three columns (vert 1,2,3) are separated by borders that act as dividers you can drag around (darker vertical strips). Those borders control the *Size Fill *(details panel on the right; currently each is set to .33 so they fill their horizontal box evenly). The borders have a bit of left-right padding so you have something to grab onto, and change cursor when the mouse is over them via Behavior->Cursor>Resize Left Right.
Clicking and holding a mouse button on the border enables drag mode:
Releasing the mouse anywhere in the widget or leaving the widget switches it off:
When the mouse is moving over the widget and the drag mode is enabled I capture the local position of the cursor in that widget, and store it in the variable LocalMousePosition:
*LocalMousePosition *is then map-ranged to the widget dimension and produces a 0-1 range that can be used to set the *SizeFill *value for every column:
Here’s how it looks like:
It’s kind of working as intended but you need to add a lot of stuff to make it behave like expected. Clamping regions, account for the number columns, adjust text clipping method.
Hope this can get you started.
6 Likes
This is great material. Thank you for sharing i will try it out.
2 Likes