Search Unity

Question Is it possible to have a vertical scroll area without defining height or stretching?

Discussion in 'UI Toolkit' started by MechaWolf99, Sep 3, 2020.

  1. MechaWolf99

    MechaWolf99

    Joined:
    Aug 22, 2017
    Posts:
    294
    Hello,

    I have a set of elements of unknown height, that I don't want to stretch. I want them layed out from left to right, top to bottom (much like the project browser). This works great in a normal VisualElement. However I can't seem to get it to work in side of a ScrollView.

    I am open to making a custom element to handle this. I have looked at the source for the ScrollView, but I am not sure where I would start implementing it or if it is even really possible.
     
    MechaWolf99, Sep 3, 2020
    #1

  2. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi MechaWolf99,

    I don't think you need to create a custom element to handle your use case. This is doable with a ScrollView. Perhaps you could give us more details on your issues?
     
    jonathanma_unity, Sep 3, 2020
    #2

  3. MechaWolf99

    MechaWolf99

    Joined:
    Aug 22, 2017
    Posts:
    294
    I have a series of elements. What I have right now is a series of elements whose parent has the style of direction = row, and wrap = wrap. This way it fits as many elements as it can horizontally and then starts a new row.
    This is how it is right now
    Also worth noting that the height of each element/item can be different based on the length of the name of the item (multiple rows of text).
    I want it exactly like how it is now, but if the elements/items no longer fit with in the parent container, and start to go bellow it and out of range. There will be a vertical scrollbar. Basically the exact functionality you would see in the Project View window, or a general file explorer window.

    I have tried to do this with the ScrollView, but setting it to Vertical, with wrapping and row makes it no longer apply the scrollbar.
    I hope this explains my problem better. If not I can try again. Hope you can help :)
     
    MechaWolf99, Sep 4, 2020
    #3

  4. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    I made a small sample with a layout similar to what you're looking for hopefully that will help.
    Code (CSharp):
    1. using UnityEditor;
    2. using UnityEngine;
    3. using UnityEngine.UIElements;
    4.  
    5. public class ScrollViewWrap : EditorWindow
    6. {
    7.     [MenuItem("Samples/ScrollViewWrap")]
    8.     public static void ShowExample()
    9.     {
    10.         ScrollViewWrap wnd = GetWindow<ScrollViewWrap>();
    11.         wnd.titleContent = new GUIContent("ScrollViewWrap");
    12.     }
    13.  
    14.     private void OnEnable()
    15.     {
    16.         var root = rootVisualElement;
    17.        
    18.         var sv = new ScrollView();
    19.         sv.style.flexGrow = 1;
    20.         root.Add(sv);
    21.  
    22.         var container = new VisualElement() {style = {flexDirection = FlexDirection.Row, flexWrap = Wrap.Wrap}};
    23.         sv.Add(container);
    24.  
    25.         for (int i = 0; i < 20; i++)
    26.         {
    27.             var child = new VisualElement()
    28.             {
    29.                 style =
    30.                 {
    31.                     height = 100,
    32.                     width = 100,
    33.                     backgroundColor = Color.gray,
    34.                     marginLeft = 10,
    35.                     marginRight = 10,
    36.                     marginTop = 10,
    37.                     marginBottom = 10
    38.                 }
    39.             };
    40.             var label = new Label($"Item {i+1}") {style = { alignSelf = Align.Center }};
    41.            
    42.             child.Add(label);
    43.             container.Add(child);
    44.         }
    45.     }
    46. }
     
    jonathanma_unity, Sep 8, 2020
    #4

  5. MechaWolf99

    MechaWolf99

    Joined:
    Aug 22, 2017
    Posts:
    294
    Oh, putting it all in to a child, and putting that in the ScrollView! That works brilliantly! Thank you very much for your help!
     
    MechaWolf99, Sep 9, 2020
    #5