Announcement

Collapse
No announcement yet.

UMG: how to make a grid with resizable width columns?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    UMG: how to make a grid with resizable width columns?

    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.


    #2
    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.

    Click image for larger version

Name:	wDesigner.PNG
Views:	537
Size:	87.2 KB
ID:	1371207

    Clicking and holding a mouse button on the border enables drag mode:

    Click image for larger version

Name:	dragModeOn.PNG
Views:	514
Size:	40.1 KB
ID:	1371208

    Releasing the mouse anywhere in the widget or leaving the widget switches it off:

    Click image for larger version

Name:	dragModeOff.PNG
Views:	512
Size:	60.2 KB
ID:	1371209

    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:

    Click image for larger version

Name:	mouseMove.PNG
Views:	504
Size:	105.5 KB
ID:	1371210

    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:

    Click image for larger version

Name:	draggingDivider.PNG
Views:	511
Size:	168.0 KB
ID:	1371211

    Here's how it looks like:

    https://i.gyazo.com/37e36654b1cb47a6...dcbb571dcd.mp4

    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.

    Comment


      #3
      This is great material. Thank you for sharing i will try it out.

      Comment

      Working...
      X