Announcement

Collapse
No announcement yet.

Uniform Grid Panel setup

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

    Uniform Grid Panel setup

    I'm setting up a grid with a dynamic number of widgits inside it, however, when using the Uniform Grid Panel, all of the widgets created and assigned as a child appear full screen and stack on top of each other, instead of appearing in a grid formation. My guess at the problem is that these child widgets are all a combo of image and text inside a Canvas Panel, which is itself full screen. Is there a way to create a panel that isn't full screen, and can still scale based on resolution?

    ...if not then im ok with dropping the scaling part of it for now...but still need a solution to the panel size...I think...

    Has anyone else encountered the same issues or have any ideas what might be going wrong with my Grid?

    Thanks.

    #2
    Welcome to the forums.

    If you want a widget to have a specific size, you can place it on a canvas; in addition, this will allow you to control its position (amongst other things). Here is an example of a UniformGrid sitting on the canvas (inside a border to make it pretty). The grid widget:

    Click image for larger version

Name:	grid.png
Views:	1
Size:	76.4 KB
ID:	1125875

    When you add children to a UniformGrid you'll need to specify which column & row they occupy. If you add children manually, you can set it up in the details panel of every child (as default they sit at [0,0] I think - so yeah, they will stack on top of one another). If you spawn them dynamically, which is your case, you'll need to assign row & column as you populate the grid.

    Here is a child widget I'm going to add to the UniformGrid --> [wGridChild]:
    • padding in the widget root [wGridChild] will prevent it from touching other children
    • the border will keep whatever you place inside centred, according to the alignment settings and padding

    Click image for larger version

Name:	childG.png
Views:	1
Size:	75.2 KB
ID:	1125876

    And this is how you can put it together, including setting up columns and rows as well as defining horizontal & vertical alignment in the UniformGrid's slots:

    Click image for larger version

Name:	graph.png
Views:	1
Size:	238.9 KB
ID:	1125877

    ...which produced this:

    Click image for larger version

Name:	end.png
Views:	1
Size:	90.0 KB
ID:	1125878

    If you have any additional questions, keep them coming.

    Comment


      #3
      Never mind, got it to work! Thank you very much!
      Last edited by Duuhannes; 03-25-2018, 03:51 PM.

      Comment


        #4
        This worked great for me. Very easy to understand. Much appreciated!

        Comment


          #5
          It worked for me too! Thank you very much, Everynone!

          Comment


            #6
            [QUOTE="
            If you have any additional questions, keep them coming.[/QUOTE]

            How do you make the items clickable? I have populated my grid with icons from a data table but I'd like to click on the icon to set a variable that can be cast out to my player character. I can't even get hover events. Any help would be greatly appreciated as I have been all over the internet looking for answers. Thanks!

            Click image for larger version

Name:	widgrid.JPG
Views:	286
Size:	102.0 KB
ID:	1588129Click image for larger version

Name:	listbutton.JPG
Views:	289
Size:	127.2 KB
ID:	1588130Click image for larger version

Name:	Widget.JPG
Views:	298
Size:	199.9 KB
ID:	1588131

            Comment


              #7
              I set this up - it all works except my grid child widgets are not square, they are rectangles, even though I have them as square in the child widget blueprint. I cannot find any place that specifies what the size or shape of the child widgets are?

              Comment


                #8
                I cannot find any place that specifies what the size or shape of the child widgets are?
                There isn't one. It's the parent that formats the children; they conform to whatever desired size the parent has. You have 2 options:

                - make the parent square and have an even number of both rows and columns, this will ensure shape uniformity as they will want to fill all available space evenly
                - wrap each child with a SizeBox and apply overrides - this will force the parent to respect its children's needs

                Comment


                  #9
                  Originally posted by Harvard Black View Post

                  How do you make the items clickable?

                  Click image for larger version

Name:	widgrid.JPG
Views:	286
Size:	102.0 KB
ID:	1588129Click image for larger version

Name:	listbutton.JPG
Views:	289
Size:	127.2 KB
ID:	1588130Click image for larger version

Name:	Widget.JPG
Views:	298
Size:	199.9 KB
ID:	1588131
                  To make "items clickable" inside grid, you are going to have to actually add a button inside the clickable widget, and bind an event dispatcher to it. After that when filling the grid you want to bind the custom event to it.
                  You can also pass along the self reference of a clickable widget through event dispatcher to be able to access it.
                  This is the example:

                  Comment


                    #10
                    Originally posted by Everynone View Post
                    Welcome to the forums.

                    If you want a widget to have a specific size, you can place it on a canvas; in addition, this will allow you to control its position (amongst other things). Here is an example of a UniformGrid sitting on the canvas (inside a border to make it pretty). The grid widget:

                    [ATTACH=CONFIG]135612[/ATTACH]

                    When you add children to a UniformGrid you'll need to specify which column & row they occupy. If you add children manually, you can set it up in the details panel of every child (as default they sit at [0,0] I think - so yeah, they will stack on top of one another). If you spawn them dynamically, which is your case, you'll need to assign row & column as you populate the grid.

                    Here is a child widget I'm going to add to the UniformGrid --> [wGridChild]:
                    • padding in the widget root [wGridChild] will prevent it from touching other children
                    • the border will keep whatever you place inside centred, according to the alignment settings and padding

                    [ATTACH=CONFIG]135614[/ATTACH]

                    And this is how you can put it together, including setting up columns and rows as well as defining horizontal & vertical alignment in the UniformGrid's slots:

                    [ATTACH=CONFIG]135616[/ATTACH]

                    ...which produced this:

                    [ATTACH=CONFIG]135617[/ATTACH]

                    If you have any additional questions, keep them coming.
                    How would I go about doing the same thing but adding/removing one child widget at a time?

                    This is what I have currently for adding Widgets to a Grid Panel, but sizing is all out of wack, and I don't know how to cleanly remove a widget.

                    Click image for larger version

Name:	Annotation-20191115-121931.png
Views:	67
Size:	191.7 KB
ID:	1687330

                    Comment


                      #11
                      and I don't know how to cleanly remove a widget.
                      - what's the trigger for widget removal
                      - are you removing from the end
                      - are you adding or inserting

                      But first of all, if you're going to have an uneven and dynamic number of elements, you should consider a WrapBox - much more suited to that kind of thing as it handles the row/column automatically. Not sure what this is going to be used for so this advice my not be that great.

                      Comment

                      Working...
                      X