Search Unity

[UIElements] how extract native uxml?

Discussion in 'UI Toolkit' started by Devi-User, Oct 10, 2018.

  1. Devi-User

    Devi-User

    Joined:
    Apr 30, 2016
    Posts:
    61
    I want to change the appearance of the Node in GraphView, but the only legal way I found is to create my uxml and substitute it in the constructor.
    However, I do not have at the moment a sufficient understanding of how it should look, and therefore I wanted to extract and save uxml to disk. (uxml which is substituted by the default constructor)

    Code (CSharp):
    1.  
    2. var myXml = EditorGUIUtility.Load ("UXML/GraphView/Node.uxml") as VisualTreeAsset;
    3. AssetDatabase.CreateAsset (myXml, "Assets/Node.uxml");
    4.  
    but this gives an error because the resource is embedded.

    If you have any tips on how to get this, I would appreciate it.
     
    Devi-User, Oct 10, 2018
    #1
    arashbahrehmand likes this.

  2. Devi-User

    Devi-User

    Joined:
    Apr 30, 2016
    Posts:
    61
    I also tried to call Instantiate to get around this, but it gave a strange component file, in yaml format
     
    Devi-User, Oct 10, 2018
    #2

  3. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    Open the Window > Analysis > UIElements Debugger (if you don't see it, you need to turn on Developer mode under Preferences > General > Developer Mode). In there, if you select one of your Nodes, you should see generated UXML for that element (including all children). It's a descent starting point.

    But, you can also just copy this: :)

    Code (CSharp):
    1.  
    2. <UXML xmlns:ui="UnityEngine.Experimental.UIElements">
    3.   <ui:VisualElement name="node-border" picking-mode="Ignore" >
    4.     <ui:VisualElement name="title" picking-mode="Ignore" >
    5.       <ui:Label name="title-label" text="" />
    6.       <ui:VisualElement name="title-button-container" picking-mode="Ignore">
    7.         <ui:VisualElement name="collapse-button" text="">
    8.           <ui:VisualElement name="icon" text=""/>
    9.         </ui:VisualElement>
    10.       </ui:VisualElement>
    11.     </ui:VisualElement>
    12.     <ui:VisualElement name="contents" picking-mode="Ignore">
    13.       <ui:VisualElement name="divider" class="horizontal"/>
    14.       <ui:VisualElement name="top" picking-mode="Ignore">
    15.         <ui:VisualElement name="input" picking-mode="Ignore" />
    16.         <ui:VisualElement name="divider" class="vertical"/>
    17.         <ui:VisualElement name="output" picking-mode="Ignore" />
    18.       </ui:VisualElement>
    19.       <ui:VisualElement name="collapsible-area" picking-mode="Ignore">
    20.         <ui:VisualElement name="divider" class="horizontal"/>
    21.         <ui:VisualElement name="extension" picking-mode="Ignore" />
    22.       </ui:VisualElement>
    23.     </ui:VisualElement>
    24.   </ui:VisualElement>
    25.   <ui:VisualElement name="selection-border" picking-mode="Ignore" />
    26. </UXML>
    27.  
     
    uDamian, Oct 11, 2018
    #3
    Xepherys, Azzaghtoth, arashbahrehmand and 1 other person like this.

  4. benoitd_unity

    benoitd_unity

    Unity Technologies

    Joined:
    Jan 2, 2018
    Posts:
    331
    FYI, we now have a dedicated sub-forums where you can use for all your questions and feedback related to UI Systems Previews.

    Cheers,
     
    benoitd_unity, Oct 18, 2018
    #4
    arashbahrehmand likes this.

  5. arashbahrehmand

    arashbahrehmand

    Joined:
    Dec 14, 2018
    Posts:
    2
    Hey devion-user , have you finally managed to create your own custom node shape?
     
    arashbahrehmand, Jan 4, 2019
    #5