Adding a button to a property field

Unity Engine
,
1

Hello, dear Unity users.

I have some custom property drawers written in IMGUI and I would like to adapt them to UI Toolkit. Here is one of them. It adds a button to the right edge of the property field:

9580096--1356364--Screenshot_2.png

OnGUI Impementation

...

public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
{
    _attribute ??= (PropertyButtonAttribute)attribute;
    _property = property;
    _buttonContent ??= new GUIContent(_attribute.Title);
   
    Vector2 buttonSize = GUI.skin.button.CalcSize(_buttonContent);
    Rect buttonRect = new()
    {
        x = position.xMax - buttonSize.x,
        y = position.y,
        width = buttonSize.x,
        height = position.height
    };
    position.width -= buttonRect.width + PADDING;
    return buttonRect;
   
    EditorGUI.PropertyField(position, property, includeChildren: true);
    if (GUI.Button(buttonRect, _buttonContent))
    {
        OnButtonClicked();
    }
}

...

However, I’m new to UI Toolkit and I can’t figure out how to achieve the same behavior with it. I still can’t get the field to stretch to the end:

9580096--1356370--Screenshot_3.png

CreatePropertyGUI Impementation

...

public override VisualElement CreatePropertyGUI(SerializedProperty property)
{
    _property = property;
    _attribute = (PropertyButtonAttribute)attribute;
   
    VisualElement container = new();
    container.style.flexDirection = new StyleEnum<FlexDirection>(FlexDirection.Row);
   
    PropertyField prop = new(property);
    prop.bindingPath = property.propertyPath;
    container.Add(prop);
   
    Button button = new(OnButtonClicked);
    button.text = _attribute.Title;
    container.Add(button);
   
    return container;
}

...

My experiments in UI Builder were not successful, so I’m hoping to get an answer here.

Thank you and good luck.

2

Try setting flex-grow to 1 on the container.

3

Unfortunatelly, container.style.flexGrow = new StyleFloat(1f); changed nothing.

4

I find using the UI Toolkit debugger is a great way to experiment quickly with styles when you are unsure. Open up the debugger and select your element, you will then be able to adjust the styles. Experiment to see what needs to be changed to fit what you need and then make those changes permanent in code or with a style sheet,

1 Like
5

Thank you for your assistance. The problem indeed lied in flex grow-shrink modifiers, but I should have applied them not to the container but to its children: the property field and the button:

// Allowing property to automatically adjust its width
IStyle propertyStyle = propertyField.style;
propertyStyle.flexGrow = new StyleFloat(1f);
propertyStyle.flexShrink = new StyleFloat(1f);

// Making button fixed-sized
IStyle buttonStyle = button.style;
buttonStyle.flexGrow = new StyleFloat(0f);
buttonStyle.flexShrink = new StyleFloat(0f);
1 Like
6

You should be able to bypass the new StyleFloat and just do = 1;

// Allowing property to automatically adjust its width
var propertyStyle = propertyField.style;
propertyStyle.flexGrow = 1;
propertyStyle.flexShrink = 1;

// Making button fixed-sized
var buttonStyle = button.style;
buttonStyle.flexGrow = 0;
buttonStyle.flexShrink = 0;
2 Likes