Bind to a list without ListView

Version: 2023.2+

You can bind to a list without ListView. To do so, bind each element to an item in the array of the serialized object and track the value of the array size. The array size might change in certain situations, such as an undo or reset operation.

This example demonstrates how to bind to a list without ListView.

Example overview

This example creates a list of TexturePreviewElements and binds the list to an underlying list of Texture2D objects.

You can find the completed files that this example creates in this GitHub repository.

要件

This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:

• ビジュアルツリー
• UXML
• BindProperty()
• TrackPropertyValue
• ScrollView

Create an object that contains a list

Create a C# class that contains a list. This list is the target of the binding.

1. Create a project in Unity with any template.
2. In your Project window, create a folder named bind-to-list-without-ListView to store all your files.
3. Create a C# script named TexturePackAsset.cs and replace its contents with the following:

[!code-cs]

Create and style a custom control

Create a custom control with C# that represents a reference to a 2D texture asset, and style it with USS.

1. In that folder, create a folder named Editor.
2. In the Editor folder, create a C# script named TexturePreviewElement.cs.
3. Replace the contents of TexturePreviewElement.cs with the following:

[!code-cs]

1. In the Editor folder, create a folder named Resources.
2. In the Resources folder, create a StyleSheet named texture_preview_element.uss and replace its contents with the following:

[!code-css]

Create the custom Editor and set the binding

Create the custom Editor with a C# script that creates the asset.

To change the size of the textures list when the number of TexturePreviewElements in the UI changes, call the SetupList() method and walk through the list of entries in the serialized list.

To bind each TexturePreviewElement to the list of textures, call BindProperty() with the property name of TexturePackAsset.textures.

1. In the Editor folder, create a C# script named TexturePackEditor.cs and replace its contents with the following:

[!code-cs]

1. Create a UI Document called texture_pack_editor.uxml and replace its contents with the following:

[!code-xml]

1. In the Project window, select TexturePackEditor.cs.
2. Drag texture_pack_editor.uxml to Visual Tree Asset in the Inspector.

Test the binding

1. From the menu, select Assets > Create > UIToolkitExamples > TexturePackAsset. This creates an asset named New Texture Pack Asset.
2. In the Project window, select New Texture Pack Asset. This displays four TexturePreviewElement elements in the Inspector.
3. Assign 2D image assets to these elements or use the Add button to add new elements. If you make changes in the Inspector UI, the property of the TexturePackAsset.textures object changes.

Tip: To import some textures and assign them to the different entries in the list, try this free Playground asset store plugin.

その他の参考資料

• SerializeObject data binding
• Bindable elements
• Binding data type conversion
• Implementation details
• Binding examples