Resolved Is It Possible To Design A Custom Control In UI Builder and Access the Components in C#?

Greetings,

I am building a custom UI Control in UI Toolkit. I designed it in UI Builder using visual elements, labels, etc. and set their colors and other attributes. The control looks great in UI builder. Then I created a class and added the following code:

<code>
public class PanelApplicationSection : VisualElement
{
#region Boilerplate for showing up in the UI Builder.
//[UnityEngine.Scripting.Preserve]
internal new class UxmlFactory : UxmlFactory<PanelApplicationSection, UxmlTraits> { }
internal new class UxmlTraits : VisualElement.UxmlTraits { }
public PanelApplicationSection()
{
//VisualTreeAsset asset = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>(
// "Assets/Resources/UserInterface/ScreenHome.uxml");
//VisualTreeAsset asset = (VisualTreeAsset)Resources.Load("UserInterface/ScreenHome.uxml");
//asset.CloneTree(this);
}
#endregion
// Fields
private VisualElement panelContainer => this.Q<VisualElement>("panel_container");
private Label sectionTitle => this.Q<Label>("section_title");
private Label sectionTypeTitle => this.Q<Label>("section_type_title");
private VisualElement icon => this.Q<VisualElement>("icon");
private VisualElement bottonBanner => this.Q<VisualElement>("bottom_banner");
private Button buttonPlay => this.Q<Button>("button_play");

// Properties
public VisualElement PanelContainer
{
get { return panelContainer; }
}
}
</code>

It doesn't work. The custom control when added to another Uxml document in UI Builder just looks like a blank white area. None of the elements (e.g., labels, visual elements, images, etc.) show up.

I have looked at several YouTube videos and they seem to add elements in code first. I want to design it in UI Builder, then add the coding.

Any idea how I can make them shown up or how I can make my custom UI controller work?

Thanks

 

I looked at it and it was very informative and I made some changess, but it still will not work. I added the following to the constructor of my class:

Code (CSharp):

1. VisualTreeAsset asset = Resources.Load<VisualTreeAsset>("/UserInterface/ScreenHome.uxml");
2.  
3. asset.CloneTree(this);

However, it keeps telling me that the asset is null. From the console:
NullReferenceException: Object reference not set to an instance of an object
PanelApplicationSection..ctor () (at Assets/Resources/UserInterface/PanelApplicationSection.cs:18)

Line 18 is the line "asset.CloneTree(this);

Should that code not be in the constructor and somewhere else?

Thanks.

 

It just means the asset couldn't be loaded or wasn't loaded. Either because the path is wrong, the asset is not in a Resources folder, etc.

 

That's what I suspected also. I checked the path and corrected the name but it still doesn't work. It still says the asset is null. I am really trying to figure it out.

 

You were right. It works now. The problem was I had the ".uxml" in the path. Unity doesn't like that. So once I removed it, it worked.

Thanks for your suggestion.