Last active
November 27, 2024 03:06
-
-
Save SimpleManGames/538556c0fbc41b07e4f4b97b3823eafc to your computer and use it in GitHub Desktop.
Multi-Height Items in ListView for UITK
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 1. Simply put these files in a blank Unity project with UITK. | |
| 2. Create GameObject with a UIDocument | |
| 3. Assign the MultiHeightListView.uxml to the UIDocument | |
| 4. Add the MultiHeightListView component to the same object with the UIDocument | |
| 5. Either in your own TSS or in the default one Unity gives you add the Style.uss to the StyleSheets |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False"> | |
| <Style src="project://database/Assets/UI/Style.uss?fileID=7433441132597879392&guid=550f3c020187ea445928f3acd1e48818&type=3#Style" /> | |
| <engine:ListView style="flex-grow: 1;" /> | |
| </engine:UXML> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using System.Collections.Generic; | |
| using UnityEngine; | |
| using UnityEngine.UIElements; | |
| public class MultiHeightListView : MonoBehaviour | |
| { | |
| public List<string> listItems = new List<string>(); | |
| private void Start() | |
| { | |
| UIDocument uiDoc = GetComponent<UIDocument>(); | |
| ListView listView = uiDoc.rootVisualElement.Q<ListView>(); | |
| listView.fixedItemHeight = 50; // The smallest element should be fixedItemHeight | |
| listView.virtualizationMethod = CollectionVirtualizationMethod.DynamicHeight; // This is the key to getting it to work | |
| listView.makeItem = () => | |
| { | |
| VisualElement element = new VisualElement(); | |
| element.AddToClassList("list-item"); | |
| return element; | |
| }; | |
| listView.bindItem = (element, i) => | |
| { | |
| if (i % 2 == 0) | |
| { | |
| element.AddToClassList("large"); | |
| } | |
| }; | |
| listView.itemsSource = listItems; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .list-item { | |
| height: 50px; | |
| max-height: 50px; | |
| min-height: 50px; | |
| background-color: rgb(0, 0, 255); | |
| } | |
| .large { | |
| height: 100px; | |
| max-height: 100px; | |
| min-height: 100px; | |
| background-color: rgb(0, 255, 0); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment