Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Unite 2023 Registrations are now LIVE! We are thrilled to announce that Unite 2023 Registration is now live and open for all!
    Dismiss Notice
New Forum User Notice Unite 2023 Registrations are now LIVE!

Beginner in UI ToolKit - Sample ListView

Discussion in 'UI Toolkit' started by Malavia, Mar 23, 2021.

  1. Malavia

    Malavia

    Joined:
    Aug 28, 2019
    Posts:
    10
    Hi,

    I would to make a listView and I use the sample example, but I can't add Label.
    I mean, the numbers are not visble in the window and in the debugger only Hello world.

    helloworld.PNG

    Code (CSharp):
    1. using UnityEditor;
    2. using UnityEngine;
    3. using UnityEngine.UIElements;
    4. using System.Collections.Generic;
    5. using System;
    6.  
    7.  
    8. public class hip : EditorWindow
    9. {
    10.     [MenuItem("testo/hip")]
    11.     public static void ShowExample()
    12.     {
    13.         hip wnd = GetWindow<hip>();
    14.         wnd.titleContent = new GUIContent("hip");
    15.     }
    16.  
    17.     public void CreateGUI()
    18.     {
    19.         var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/hip.uxml");
    20.         VisualElement labelFromUXML = visualTree.Instantiate();
    21.         rootVisualElement.Add(labelFromUXML);
    22.  
    23.         createListView();
    24.     }
    25.  
    26.     void createListView()
    27.     {
    28.  
    29.         // Create some list of data, here simply numbers in interval [1, 1000]
    30.         const int itemCount = 1000;
    31.         var items = new List<string>(itemCount);
    32.         for (int i = 1; i <= itemCount; i++)
    33.             items.Add(i.ToString());
    34.  
    35.         Func<VisualElement> makeItem = () => new Label();
    36.         Action<VisualElement, int> bindItem = (e, i) => (e as Label).text = items[i];
    37.  
    38.         ListView listView = rootVisualElement.Q<ListView>(className: "the-uxml-listview");
    39.         //var listView = rootVisualElement.Q<ListView>();
    40.         listView.makeItem = makeItem;
    41.         listView.bindItem = bindItem;
    42.         listView.itemsSource = items;
    43.         listView.selectionType = SelectionType.Multiple;
    44.      
    45.         // Callback invoked when the user double clicks an item
    46.         listView.onItemsChosen += Debug.Log;
    47.  
    48.         // Callback invoked when the user changes the selection inside the ListView
    49.         listView.onSelectionChange += Debug.Log;
    50.  
    51.     }
    52. }
    Code (CSharp):
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <engine:UXML
    3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4.     xmlns:engine="UnityEngine.UIElements"
    5.     xmlns:editor="UnityEditor.UIElements"
    6.     xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
    7. >
    8.     <engine:Label text="Hello World! From UXML" />
    9.     <engine:ListView class="the-uxml-listview" />
    10. </engine:UXML>
    Code (CSharp):
    1. Label {
    2.     font-size: 20px;
    3.     -unity-font-style: bold;
    4.     color: rgb(68, 138, 255);
    5. }
    6. .the-uxml-listview {
    7.     --unity-item-height: 16;
    8.     height: 200px;
    9. }
     
    Malavia, Mar 23, 2021
    #1

  2. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    970
    Hello! There's a few things to check.

    First, you instantiate a new ListView(), but it's not being added as a child of the rootVisualElement. Instead, you can just use the one provided in the UXML file (the line 
    var listView = rootVisualElement.Q<ListView>();
    is correct).

    Now, the problem is that the instantiated element doesn't stretch inside the EditorWindow. This is easy to fix: just call StretchToParentSize() on your instantiated UXML.

    Updated script:
    Code (CSharp):
    1. using UnityEditor;
    2. using UnityEngine;
    3. using UnityEngine.UIElements;
    4. using System.Collections.Generic;
    5. using System;
    6. public class hip : EditorWindow
    7. {
    8.     [MenuItem("testo/hip")]
    9.     public static void ShowExample()
    10.     {
    11.         hip wnd = GetWindow<hip>();
    12.         wnd.titleContent = new GUIContent("hip");
    13.     }
    14.     public void CreateGUI()
    15.     {
    16.         var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/hip.uxml");
    17.         VisualElement tree = visualTree.Instantiate();
    18.         tree.StretchToParentSize();      
    19.         rootVisualElement.Add(tree);
    20.         populateListView();
    21.     }
    22.     void populateListView()
    23.     {
    24.  
    25.         // Create some list of data, here simply numbers in interval [1, 1000]
    26.         const int itemCount = 1000;
    27.         var items = new List<string>(itemCount);
    28.         for (int i = 1; i <= itemCount; i++)
    29.             items.Add(i.ToString());
    30.         Func<VisualElement> makeItem = () => new Label();
    31.         Action<VisualElement, int> bindItem = (e, i) => (e as Label).text = items[i];
    32.         // ListView listView = rootVisualElement.Q<ListView>(className: "the-uxml-listview");
    33.         var listView = rootVisualElement.Q<ListView>();
    34.         listView.makeItem = makeItem;
    35.         listView.bindItem = bindItem;
    36.         listView.itemsSource = items;
    37.         listView.selectionType = SelectionType.Multiple;
    38.    
    39.         // Callback invoked when the user double clicks an item
    40.         listView.onItemsChosen += Debug.Log;
    41.         // Callback invoked when the user changes the selection inside the ListView
    42.         listView.onSelectionChange += Debug.Log;
    43.     }
    44. }
     
    mcoted3d, Mar 23, 2021
    #2
    rigidbuddy likes this.

  3. Malavia

    Malavia

    Joined:
    Aug 28, 2019
    Posts:
    10
    Thank a lot for your help,
    I added more listView.style.flexGrow = 1f;
    and I saw numbers appear.
     
    Last edited: Mar 23, 2021
    Malavia, Mar 23, 2021
    #3
    mcoted3d likes this.