Question UI Toolkit items scrollable grid using a ScrollView

Hello guys, I am pretty new in Unity Technologies, and this is my first thread here cos usually I am searching a lot until find an answer, but now I am really stuck

Well, I just want to create easy and familiar scrollable grid (not actual list but dynamic width grid ohh at least even fixed not dynamic at first). something like that:



Ofc first I've tried to create a ScrollView element and play with horizontal/vertical or both modes, but it always looks just like a list. A question is - am I able to create something like that with tool from the box or I need to create something custom for it? If custom - could you please share with me some hint what to start from? visual element + scroller or better modify scrollView element somehow?

Unity version 2021.3.4f1

 

At present you'll need to make something custom as there's no built in grid layout available in UI Toolkit (it's in 'under consideration' in the roadmap).

That said nesting visual elements in rows to make a grid shape isn't all that difficult. How this might work in a scroll view... not sure (never used one). Perhaps have each list element be a row of child elements, making the impression of a grid view.

 

Don't add your items directly to the ScrollView
Add them first to an intermediary VisualElement
Make your VisualElement layout like:
componentsHolder.style.flexDirection = FlexDirection.Row;
componentsHolder.style.flexWrap = Wrap.Wrap;
Then add the VisualElement to the ScrollView

 

hii can u help me to understand unity Css and to create cards and scrollers ??

 

Thanks man! The only thing I will miss is automatically order count and return selected element id or kinda. I thought about something like this or create a template "row" element and then add them to the ScrollView.

 

Below Image has mistake
Read follow up comment about this. basically its the same idea but using the inbuilt content container that is accessed with ScrollView.Add();

I followed @peterpan2022 advice.
here is a picture of what that looks like.

 

Thanks for the composition. but scrollist functional like AddToList of monitoring the selected element or gain the elements number need to be determined by your own, right? as basic will not work, right? cos the actual list contains exactly 1 element

 

You are correct, my advice is not good.

Since that picture I learned more about UI Toolkit.
That container which holds each "ExportCard", is already available you can just add a "ExportCard" to it by
this.Q<ScrollView>("ScrollView").add(ExportCard);

and then you can keep the same styling, like I did but you have to target the "ContentContainer" whatever its name is.



So Do not create your own content container XD use the provided one.

 

Hi @LarsLundh ,
I'm nearly new with UI Toolkit. Could you explain how to do this, please? I can't edit the actual since it's not enabled:




Where can I change it or access the code you showed?

 

This is a situation where you use style selectors in your USS styles: https://docs.unity3d.com/Manual/UIE-USS-Selectors.html

I believe a style name of

ScrollView .unity-scroll-view__content-container

(descendant selector) should let you edit the styles of the scroll's content container.

 

I finally made it getting the "Grid view" container visual element and adding there the items from code instead of getting the scroll view container.
CODE:

const string GRID_VIEW_CONTAINER = "The name of the grid view in your project";
VisualElement _gridViewContainer;
public VisualTreeAsset gridItemAsset;

void WhereYouGetTheVisualElementsInCode()
{
_gridViewContainer = VisualElement result = root.Q(GRID_VIEW_CONTAINER);
}

void WhereYouAddTheContentToTheContainer/ThePool()
{

TemplateContainer gridItemElem = gridItemAsset.Instantiate();
_gridViewContainer.Add(gridItemElem);
}