Custom VisualElement

So I'm trying to make a custom textfield, just to play around. However I have it where it will show up in the UI Builder, but if you use C#, it's just empty. Like if debugged, it'll show the element exists but no textfield or anything inside it. Not sure what I'm doing wrong.

Code (CSharp):

1. using UnityEngine.UIElements;
2.  
3. namespace PhentrixGames
4. {
5.     public class IPField : VisualElement
6.     {
7.         public string section1 { get; set; }
8.         public IPField()
9.         {
10.         }
11.  
12.         public new class UxmlFactory : UxmlFactory<IPField, UxmlTraits> { }
13.         public new class UxmlTraits : VisualElement.UxmlTraits
14.         {
15.             UxmlStringAttributeDescription m_string = new UxmlStringAttributeDescription { name = "string", defaultValue = "default_value"};
16.  
17.             public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
18.             {
19.                 base.Init(ve, bag, cc);
20.                 var ate = ve as IPField;
21.  
22.                 ate.Clear();
23.                 ate.section1 = m_string.GetValueFromBag(bag, cc);
24.                 ate.Add(new TextField("IP") { value = ate.section1 });
25.             }
26.         }
27.     }
28. }
29.  

 

Just a guess but the new text field object probably has no styling attached since you used the constructor rather than cloning a uxml. Take a look at the TextField you placed in the UI Builder it should have some default uss classes. You could add them to the new textfield object and see if it works then.

Otherwise you could create a uxml with just the text field, get it styled as you'd like. Then use it as a VisualTreeAsset, clone it, then add it to the ate object. The demo project has an example of this in the card manager for adding cards.

 

For better context this is what I mean it's empty
https://imgur.com/a/aEBJxX4

 

After another look at your code, if you want a custom TextField, I think you would want to inherit from TextField rather than VisualElement.

 

Plan is to actually make an element with 4 text fields in a row.

 

Ah ha I think I found it. So I was thinking the TextField has items under it, which means it behaves like a Template, uxml that you are dragging into a scene.

Try using this, it will instantiate a clone of the Textfield uxml from the UI Toolkit Package. Which includes the label and default classes etc.

Code (CSharp):

1.  
2. var textfieldTreeAsset AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Packages/UI Toolkit/PackageResources/Snippets/UXML/TextFieldSnippet.uxml");
3. TextField newFieldInstance= (TextField)textfieldTreeAsset.CloneTree().Q("the-uxml-field");
4. newFieldInstance.name = "IP";
5. ate.add(newFieldInstance);
6.  

 

It's not for a scene, it's for an editor
Also, I have the UI Toolkit but nothing for that files, so not sure why.