How to make a clone/copy of a VisualElement?

How do I clone a VisualElement?

Like,

newElement = oldElement.Clone();

or

newElement = new VisualElement(oldElement);

 

Thank you for the reply.

The thing is that the visual element has several nested children as well. Manually copying everything is pretty tedious. I guess a method that manually copies everything could be created, but I feel a simple copy/clone method should be part of the standard API. I can think of several use cases for it and feel that will be a fairly common request.

Is the planned? If not, why not?

 

From my testing, it's best to use an MVC pattern with a Clone function on the model it will automatically deliver the correct VisualElement from your view.

 

I appreciate your reply and your explanation, thank you. That makes a lot of sense.

I understand that visualTreeAsset.CloneTree is the only way to create/clone elements without creating them through C#. My problem is that there are a lot of different element-trees that I want to clone/copy for lists and such. I do not wish to create those manually with code as they are quite complex and I want to iterate quickly, and having to create different UXML files for every element-tree I want to clone will create a lot of UXML files which is a bit tedious. Is there a way (or is it even feasible) to use CloneTree on just a part of a tree asset? Like querying (by class or name) for a specific element within a tree asset and creating a clone of just that element?

Thank you for your time.

 

This seems like a shame... Can these be nested?

UI stuff really needs the ability to be swappable with other elements. I should be able to take a whole form within an EditorWindow and swap it out with a different form....



I'm already very hesitant on VisualElements and this isn't helping...

 

That's good to know -- I was assuming it would change the original.

This makes me feel a bit better about it.

 

Might be near of topic, how about use instead override class to create layout itself?

VisualElement

is not sealed class, so you can override it.

Code (CSharp):

1. public class MyCustomElement : VisualElement
2. {
3.     public MyCustomElement() : base() {
4.         //TODO : Create layout
5.         this.AddManipulator(new MyCustomElementEvent());
6.     }
7.  
8.     class MyCustomElementEvent : Manipulator
9.     {
10.         //TODO : Register, Unregister event and write event's logic.
11.     }
12.  
13.     //Sure if you want to clone data from some source...
14.     public void CopyFrom(MyCustomElement source) {
15.         //TODO : copy value, layout data from source...
16.     }
17. }

'UIElements base class is overridable' means lot of possibilities to customization, so able to make own scripted, functional element.
You should try with it.

I had with this possibilities.
https://creta5164.tumblr.com/post/187093161546/second-week-of-20198-white-spirit-dev-status

 

Can you get someone to do this override magic for the SceneCameraController so that I can make my own SceneCameraController for the SceneView please?

I want my orbit behavior to work differently than the standard Unity one...

 

I will like to support the clone function on a visual element. I am new to UI Elements and I may be doing something wrong or thinking it in a wrong way, so feel free to correct/guide me.

Coming from the android background. I am trying to do a dynamic ListView and separating the adapter .uxml files In order to reutilize them in different list views. So each time that I am using them in a list view I need to first create a clone to know the height of the layout. And then each time that a new item is required, create a copy of the adapter file from the VisualTreeAsset.

Is that the way it is meant to work? In my head, I want to get a concrete visual element and N copies of it. Instead of copy the whole file. If I only want to populate a listview with part of the adapter I should be able to create copies of the specific part. If not, I am forced to separate each part of the adapter in each file and build them manually or lookup for the specific part each time that a new object is required.

Is that correct? I am missing something?

 

As a webdev I really like the way UI Toolkit is done and I see a lot of people struggle with the concept in some ways. Hope this will shed some light on the concept.
Try to imagine the UXML assets as templates/components/views. So, let's say you want a list of players. So you create the base template containing the layout, the ListView, etc. Then you want to design each entry of the player list. So you go ahead and create some playerentry.uxml asset, design that the way you'd like the player entries to look in the list. And then, via script, you set the itemSource, makeItem and bindItem functions of the ListView. In the makeItem function, you can use the CloneTree method on the playerentry.uxml asset which will populate the list of players with your designed entries automagically. Then you can use the bindItem function to set the proper data values on the playerentry subelements.

TL;DR: I think creating multiple UXML assets (for base templates, specific child items etc.) is the proper way to go as it will separate neccessary views and will be more organized in a long run. Didn't really think of a need for Clone function as of yet.

 

The UI Elements Debugger clearly shows that you're able to convert the C# objects to uxml. You list all the VisualElements and all their classes, names, inline properties, etc. You can pretty trivially build uxml from that.

At the same time, you're obviously able to generate the VisualElement objects from uxml.

So it should not be hard to implement clone through first generating the uxml from the VisualElement, then creating new VisualElements from that uxml.


Doing that approach would also have two huge benefits:
- It'd really be nice to output the generated uxml, both for debugging and for editor tools that wants to build UI.
- It'd be really nice at times to generate VisualElements from a uxml string rather than an asset. That'd allow things like implementing a newsfeed in your main menu simply by downloading the uxml/uss text from a url.

Does the uxml asset wrapper contain some kind of accelerator/serialized version of the generated objects rather than just the text? If it just parses the uxml file from text at runtime, the only thing keeping this from already working is access modifiers on Unity internals, but it could be more complex, idk.

 

Hi there.

Instead of cloning, I'm happy to build from an UXML, but I'm not keen on having hand coded paths kicking around, or lots of hand defined references - I'd rather find it within an existing scene. It seems to me that an ideal bridge would be to:

1. Define the object that I would want to clone from a UXML (let's call that UXMLCreatedObject)
2. Place it within my heirarchy (another UXML) defining my screen as normal
3. In c#, find the UXMLCreatedObject.
4. Dig out it's source UXML file
5. Create another one.

Is this possible?

 

Hi there, thanks for the idea.

That is certainly something that I will use - as a fall back. But no, I don't want to centralise the assets into a single place. I'd very much like to get the VisualTreeAsset/UXML directly from the VisualTreeAsset that it will be replicated within.

The reason that I would like to do this is so that I can find the appropriate UXML for the context. i.e. One Screen has it's own UXML for an element (in it's hierarchy, so that we can see it easily in context), while another has another (or even different places in the same screen).



For example, in the element 'ListA' are three other gameobjects that are used as 'prefabs' (this is the old Unity GUI system). I can find these, duplicate them and populate the list with the appropriate ones. Other screens can have their own prefabs (should they wish).

This is a model of UI development that has been handy for a previously released title using the previous unity gui, but the ability to find a visual element and replicate it (using UXML is fine) is important for this - especially as the project grows - our game project has >20 different screens, and they often have their own flavour of common elements.

 

I currently have the exact same problem...

I am using the UIBuilder to create a tool, and i want to be able to visualise the entire tool in one uxml but also want to be able to clone placeholder VisualElements.

I see the way to do this is to nest different uxmls, which is fine, but i would also want to be able to duplicate these nested uxml in code from only the original main uxml.

 

I understand this, and like it.

I'm afraid I'm not sure I understand this one. If it's to do with finding the menu item by template name (ie. MenuItem.uxml) then this could go wrong if for example I swap out the MenuItem.uxml for another named one i.e. MenuItemBold.uxml.

The good thing about getting the visual tree asset is that I can find it just like any other visual element (by name, or some other means) and then even if I switch out the .uxml to another one, as long as I can find it the same way, everything is fine - no part of my code has links to an asset name. We can change them out artist side without code change.

Of course, that is only if I'm understanding correctly.

 

So... Is this possible at the moment?

 

Wonderful. Thanks very much for the support.

 

@antoine-unity Hi! Necroing this thread to see if this functionality (or something that achieves the same) is planned? Would really help me to plan our tech.

Thanks!

 

That's excellent. Thanks!

 

Hello! Apologies for the late response. YES PLEASE - an example would be fantastic.

 

I was able to get 'cloning' done by at first using

AssetDatabase.LoadAssetAtPath<VisualTreeAsset>(uxml_path).Instantiate()

, but then I realized it was editor only. Using

my_uidoc_component.visualTreeAsset.Instantiate()

worked as a drop-in replacement now, on unity 2021.1 from what I can tell.

Maybe it was backported from 2021.2, but I'm new to Unity and don't fully understand how updates rollout anyway.

Thanks for the answer everyone!

 

Could you please provide examples? I don't yet fully understand if it works for my use case.
In uGUI I could store the "prefab" (child) inside another prefab (container). The child could be disabled, but when Instantiated I would enable its Instances. Or it could be enabled, but I would disable or remove it at Runtime after Instantiating its Instances.
Is it possible in UITK (maybe now with this new API) or we always need to have separate UXML assets for that?

 

it would be very useful if the CloneTree method could return the reference to the created element...

Like if i clone a template container that has a button in it, on a loop, i would like to quickly be able to add a listener to the clicked delegate...

is this possible already? (i just started learning the new UIBuilder workflow...)

This is how im currently getting the reference to the newly added element:

Code (CSharp):

1. optionsAsset.CloneTree(optionsRoot, out int itemIndex, out int elemCount );
2. VisualElement newOption = optionsRoot.ElementAt(itemIndex);

 

Nice! thanks!

Code (CSharp):

1. TemplateContainer optionUI = optionsAsset.Instantiate();
2. optionsRoot.Add(optionUI);

 

I don't understand how to copy elements. I have DialogueTextItem. I put in my DialogueScreen. How to make a copy of DialogueTextItem?

I can find DialogueTextItem. But i can not copy it.

Code (CSharp):

1. GetComponent<UIDocument>().rootVisualElement.Q<VisualElement>("dialogue-text-item");

I try to get visualTreeAssetSource from DialogueTextItem but dItem is null.

Code (CSharp):

1. var dItem = GetComponent<UIDocument>().rootVisualElement.Q<VisualElement>("dialogue-text-item").visualTreeAssetSource;

 

Thanks a lot, it's actually very helpful. I wish Unity had non-outdated tutorials explaining this things!

 

Have to second the request of this thread. A clone method would be really helpful in certain cases.

Have tried the suggested approach to create a new element and then assign the values with code, but somehow according to the debugger, code like this does not seem have any effect at all:

Code (CSharp):

1.  
2. private void MakeALikeB(VisualElement A, VisualElement B)
3.     {
4.         A.style.position = B.style.position;
5.         A.style.top = B.style.top;
6.         A.style.bottom = B.style.bottom;
7.         A.style.left = B.style.left;
8.         A.style.right = B.style.right;
9.  
10.         A.style.flexGrow = B.style.flexGrow;
11.         A.style.flexShrink = B.style.flexShrink;
12.         A.style.width = B.style.width;
13.         A.style.height = B.style.height;
14.         A.style.transformOrigin = B.style.transformOrigin;
15.     }

A and B retain different values after executing this.

My usecase by the way is to simply dynamically overlap multiple background images on the same spot.
If I do "Ctrl+D" to duplicate the element in the editor, it works flawlessly.

EDIT:
Ok, nevermind. Apparently I gotta take "resolvedStyle" instead of "style" from object B to actually get the current values.
Then the code above works.

 

This might be limited but I was able to clone what I needed this way:

Code (CSharp):

1.  
2. public void CloneBG(VisualElement original)
3.         {
4.             VisualElement bg = new VisualElement();
5.  
6.             IList<string> classList = original.GetClasses() as IList<string>;
7.  
8.             int c = classList.Count;
9.             for (int i= 0; i < c; i++)
10.             {
11.                 bg.AddToClassList(classList[i]);
12.                 Debug.Log(classList[i]);
13.             }
14.             parent.Add(bg); // add it where you want
15.         }

where the "original" visual element being sent in to the function to be cloned from is created in ui builder

 

The best thing I've found when creating VisualElements in code is to create a class that will return the elements that you need, especially if you need to create the same element in multiple places.

For instance, this won't work:

Code (CSharp):

1. VisualElement ve = new VisualElement();
2. TextField tf = new TextField();
3. ve.Add(tf);
4.  
5. root.Add(ve);
6. root.Add(ve);

You will only get the last `ve` inserted.

In my case, I figured this out having created a divider element group that just created space, a divider, and space again. Added a class for VisualElementExtensions with the following:

Code (CSharp):

1.  
2.         public static VisualElement SectionDivider(float spacerHeight = 10f, float dividerHeight = 3f)
3.         {
4.             VisualElement sectionDivider = new VisualElement();
5.             sectionDivider.Add(Spacer(spacerHeight));
6.             sectionDivider.Add(Divider(dividerHeight));
7.             sectionDivider.Add(Spacer(spacerHeight));
8.  
9.             return sectionDivider;
10.         }
11.  
12.         public static VisualElement Spacer(float height = 10f)
13.         {
14.             VisualElement spacer = new VisualElement();
15.             spacer.style.height = height;
16.             return spacer;
17.         }
18.  
19.         public static VisualElement Divider(float height = 3f)
20.         {
21.             VisualElement divider = new VisualElement();
22.             divider.style.backgroundColor = new Color(0.157f, 0.157f, 0.157f);
23.             divider.style.borderTopWidth = divider.style.borderBottomWidth = divider.style.borderLeftWidth = divider.style.borderRightWidth = 1.0f;
24.             divider.style.borderLeftColor = divider.style.borderTopColor = new Color(0.122f, 0.122f, 0.122f);
25.             divider.style.borderRightColor = divider.style.borderBottomColor = new Color(0.192f, 0.192f, 0.192f);
26.             divider.style.height = height;
27.             return divider;
28.         }

The when I need it, I just call it like:

Code (CSharp):

1.  
2.             Label guid = new Label();
3.             guid.style.backgroundColor = new Color(0.1f, 0f, 0f);
4.             guid.style.color = new Color(0.82f, 0.82f, 0.82f);
5.             guid.text = $"GUID: {node.guid}";
6.             guid.style.fontSize = 10;
7.             rootElement.Add(guid);
8.  
9.  
10.             rootElement.Add(VisualElementExtensions.SectionDivider());
11.  
12.  
13.             Vector2Field position = new Vector2Field();
14.             position.label = "Position:";
15.             position.value = node.position;
16.             position.RegisterCallback<ChangeEvent<Vector2>>(
17.                 e =>
18.                 {
19.                     node.position = e.newValue;
20.                     EditorUtility.SetDirty(node);
21.                 });
22.             rootElement.Add(position);

 

Hello. We really want to be able to copy VisualElements without uxml.

 

So i have a ref to the UIDocument, is there anyway to get a portion of the uxml (or whatever) from there? I assumed I'd be able to target a portion of the VisualTreeAsset, keep it as a reference, then generate VisualElements of the target and its children.