I’m only just starting with UIBuilder and UIToolkit in general, but I can’t figure out how to edit the sub-elements of a TextField:
As you can see in the “Hierarchy” panel, the Label and TextInput elements under “TextField” are grayed out and I can’t edit them.
How can I modify them?
I had trouble at first with the ListView. In the ListView, the steps I discovered were:
Set the list item height in the list view parameters.
When instantiating the ListView (either via cloning the tree from the resource or via code), you’ll need to populate 3 fields before it will work: makeItem, bindItem, and itemsSource. Check out Unity - Scripting API: ListView for an example with this.
The styling of the list view itself can be set via style sheets.
In my project, I have a list_view_item in my Editor Resources folder that I instantiate for makeItem. I make sure this item has the same height as the item height in my ListView.
I could be wrong, but I assume it’s the same as the TextField–you’re probably only able to interact with it via style sheets or code.
If you want to see an example of what I’m doing, here’s my code: https://github.com/CareBoo/Serially/blob/master/Packages/com.careboo.serially/Editor/TypePickerWindow.cs
Elements inside a C# element (like ListView) or inside a UXML template (if you drag another UXML inside your current UXML to instance it) are grayed out because they don’t exist in the current UXML. You cannot edit them because any edits would be forgotten as soon as you save/reload the current UXML asset. If you look at the UXML Preview at the bottom of the Viewport, you’ll see that there’s just an empty tag with no children.
TextField, like all other custom elements, are meant to be atomic elements that provide certain complex functionality. They need to assume their internal element hierarchy is fully under their control. If you delete, for example, the Label, you will likely run into null reference exceptions or other weird errors as the TextField looks for it and fails to find it.
You can, however, override their styles via hierarchical USS selectors (ie. .parentElementClass > .childElementClass). Here’s more info on that:
Also, when you focus the new selector input at the top of the StyleSheets pane, you’ll get a cheatsheet with some examples of complex USS selectors.
Any chance of getting a debug option to allow the adding of VisualElements to them?
I’m using the UIBuilder to figure out bugs with my code, it’s been extremely helpful so far, but I have a big issue with ListViews that I’m stuck on and the UIBuilder isn’t helping because I need elements IN the ListView to play with.
Doesn’t matter it’s not saved, I’m not saving it… using it as a tool to help.
+1
Another use case, after talking with UI designers and getting their point of view :
We need to use a ListView for optimization issues.
Unfortunately, it seems there is no (out-of-the-box) solution enabling UI designers to test their UIs in a ListView and work properly in parallel with a developer.
I’m not sure what would be a nice workflow for that, but UI designers could for example be able to provide a UXML template as an item template ? (it might be restrictive and not convenient for all cases, but it’s a proposal for enabling UI designers autonomy)
