Search Unity

How can I add a label to property drawer?

Discussion in 'UI Toolkit' started by SergeyRomanko, Aug 13, 2019.

  1. SergeyRomanko

    SergeyRomanko

    Joined:
    Oct 18, 2014
    Posts:
    47
    Hello!
    I am learning UiComponents. My goal is to make simple property drawer that simply draws several ui elements in one row. I almost did it, my property drawer works but it dosen't have label field like other property fields do.

    What is right way to add a label to property drawer?



    Code (CSharp):
    1. <UXML xmlns:ui="UnityEngine.Experimental.UIElements" xmlns:uie="UnityEditor.Experimental.UIElements">
    2.     <ui:VisualElement name="tank-properties-container">
    3.         <uie:IntegerField style="flex-basis: 0; flex-grow: 1" label="" binding-path="amount" name="amountProp"/>
    4.         <uie:EnumField style="flex-basis: 0; flex-grow: 1" label="" binding-path="unit" value="Spoon" type="UIElementsDrawerType+IngredientUnit, Assembly-CSharp" />
    5.         <ui:TextField style="flex-basis: 0; flex-grow: 1" label="" binding-path="name" />
    6.     </ui:VisualElement>
    7. </UXML>
    8.  
    Code (CSharp):
    1. using UnityEditor;
    2. using UnityEditor.UIElements;
    3. using UnityEngine;
    4. using UnityEngine.UIElements;
    5. using PopupWindow = UnityEngine.UIElements.PopupWindow;
    6.  
    7. [CustomPropertyDrawer(typeof(UIElementsDrawerType))]
    8. public class UIElementsCustomDrawer : PropertyDrawer
    9. {
    10.     public override VisualElement CreatePropertyGUI(SerializedProperty property)
    11.     {
    12.         var container = new VisualElement();
    13.  
    14.         { // Create drawer using UXML
    15.             var vsTree = Resources.Load<VisualTreeAsset>("CustomDrawer");
    16.             var drawer = vsTree.CloneTree(property.propertyPath);
    17.             drawer.styleSheets.Add(Resources.Load<StyleSheet>("CustomDrawerUss"));
    18.             container.Add(drawer);
    19.         }
    20.  
    21.         Debug.Log($"{property.propertyPath}");
    22.  
    23.         return container;
    24.     }
    25. }
    Code (CSharp):
    1. <UXML xmlns:ui="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
    2.     <ui:VisualElement name="row" class="container">
    3.         <ui:Label text="Tank Script - Custom Inspector" />
    4.         <ue:PropertyField binding-path="tankName" name="tank-name-field" />
    5.         <ue:PropertyField binding-path="tankSize" name="tank-size-field" />
    6.         <ue:PropertyField binding-path="elementsDrawer" name="tank-property-drawer" label="My Label" />
    7.     </ui:VisualElement>
    8. </UXML>
    Code (CSharp):
    1. using UnityEngine;
    2.  
    3. [ExecuteInEditMode]
    4. public class TankScript : MonoBehaviour
    5. {
    6.     public string tankName = "Tank";
    7.     public float tankSize = 1;
    8.     public UIElementsDrawerType elementsDrawer;
    9.  
    10.     private void Update()
    11.     {
    12.         gameObject.name = tankName;
    13.         gameObject.transform.localScale = new Vector3(tankSize, tankSize, tankSize);
    14.     }
    15. }
     
  2. SergeyRomanko

    SergeyRomanko

    Joined:
    Oct 18, 2014
    Posts:
    47
    Anyone? I am sure there is a way to do this
     
  3. antoine-unity

    antoine-unity

    Unity Technologies

    Joined:
    Sep 10, 2015
    Posts:
    780
    Hello,

    I believe the simplest way to achieve this is to assign use "label" of the
    IntegerField
    :

    I added
    container.Q<IntegerField>().label = property.displayName
    inside
    CreatePropertyGUI
    and it seems to do what you want.

    Hope this helps!
     
    Kirsche likes this.