List View Binding Via Code not Work, while do via UXML file are work nicely

Unity Engine
, , , ,
1

1
11919×984 137 KB

so i want to create list view and use unity provide editor binding with Serialized Object and Serialized Property, since not every list view item are complex, sometimes its just a text field then follow up with button, or whatever that be…so simple that for me better just construct it via code, rather than create separate UXML file for it, as you see from picture, left one all by code(and the binding not working) then right one using UXML(everything work nicely),

[Data]

public class FileRenamerData : MonoBehaviour
    {

        [Serializable]
        public class Data
        {
            [SerializeField] private string originalFullPath;
            [SerializeField] private string targetFullPath;
            [SerializeField] private bool selected;
            [SerializeField] private string singer;
            [SerializeField] private string title;
            [SerializeField] private string extension;

            public Data(string originalFullPath)
            {
                this.originalFullPath = originalFullPath;
                selected = false;
            }
        }

        [SerializeField] private string sourcePath;
        [SerializeField] private string targetPath;
        public List<Data> datas;

        public FileRenamerData()
        {
            datas = new List<Data>();
        }

this is how my data looks like,

[UXML File]

<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="True">
    <Style src="project://database/Assets/FileRenamer/Editor/FileRenamerStyleSheets.uss?fileID=7433441132597879392&amp;guid=278808e1fdb15044abad92dee8552252&amp;type=3#FileRenamerStyleSheets" />
    <engine:VisualElement name="margin" style="padding-top: 3px; padding-right: 2px; padding-bottom: 3px; padding-left: 2px;">
        <engine:VisualElement name="item-container" style="flex-grow: 1; background-color: rgb(0, 0, 0); padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px;">
            <engine:VisualElement style="flex-direction: row; padding-top: 2px; padding-bottom: 2px;">
                <engine:Toggle binding-path="selected" />
                <engine:TextField binding-path="originalFullPath" class="item-text-field" />
                <engine:TextField binding-path="targetFullPath" class="item-text-field" />
            </engine:VisualElement>
            <engine:VisualElement style="height: 4px;" />
            <engine:VisualElement style="flex-grow: 1;">
                <engine:TextField label="Singer" binding-path="singer" />
                <engine:TextField label="Title" binding-path="title" />
                <engine:TextField label="Extension" binding-path="extension" />
            </engine:VisualElement>
        </engine:VisualElement>
    </engine:VisualElement>
</engine:UXML>

this is the item template i assign to list view via UI Builder, please focus on what i pass to binding path

[Make Item Function In List View via Code]

        private VisualElement MakeItem()
        {
            var container = new VisualElement().AddClass("margin")
            .AddChilds(
                new VisualElement().AddClass("item-container")
                .AddChilds(
                    new VisualElement().AddClass("item-path-container")
                    .AddChilds(
                        new Toggle() { name = "item-toggle", bindingPath = "selected" },

                        new TextField() { name = "item-original-path", bindingPath = "originalFullPath" }.AddClass("item-text-field"),

                        new TextField() { name = "item-target-path", bindingPath = "targetFullPath" }.AddClass("item-text-field")
                    ),
                    new VisualElement() { style = { height = 4 } },
                    new VisualElement() { style = { flexGrow = 1 } }
                    .AddChilds(
                        new TextField() { label = "Singer", bindingPath = "singer" },

                        new TextField() { label = "Title", bindingPath = "title" },

                        new TextField() { label = "Extension", bindingPath = "extension" }
                    )
                )
            );


            return container;
        }

notice i put same binding path when construct via scripts and UXML above, yet binding on UXML file are connect, while the one i do via code is not…

3

so after asking everywhere, the solution is


            var middleContainer = new VisualElement().AddClass("test-binding__middle-container");
            listView = new ListView()
            {
                bindingPath = "datas",
                itemsSource = target.datas,
                makeItem = MakeItem,
                // bindItem = BindItem,
                headerTitle = "Files",
                showFoldoutHeader = true,
                showAddRemoveFooter = false,
                virtualizationMethod = CollectionVirtualizationMethod.DynamicHeight
            };
            middleContainer.AddChild(listView);

remove the bind item, looks like instead of +=(adding our bind item) unity do =(replace with our bind item), and tbh this is bad