Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Dismiss Notice

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

Discussion in 'UI Toolkit' started by ShokWayve, Jul 13, 2023.

  1. ShokWayve

    ShokWayve

    Joined:
    Jan 16, 2013
    Posts:
    117
    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
     
  2. ncerone_unity

    ncerone_unity

    Unity Technologies

    Joined:
    Jan 13, 2022
    Posts:
    26
  3. ShokWayve

    ShokWayve

    Joined:
    Jan 16, 2013
    Posts:
    117
    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.
     
  4. spiney199

    spiney199

    Joined:
    Feb 11, 2021
    Posts:
    5,769
    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.
     
  5. ShokWayve

    ShokWayve

    Joined:
    Jan 16, 2013
    Posts:
    117
    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.
     
  6. ShokWayve

    ShokWayve

    Joined:
    Jan 16, 2013
    Posts:
    117
    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.
     
    Last edited: Jul 14, 2023
    spiney199 likes this.