创建自定义绑定以绑定 USS 选择器

版本： 2023.2+

此示例演示如何创建自定义绑定，将 USS 选择器绑定到视觉元素实例化或派生自 C# 的可视化树的节点VisualElement类。您可以设置外观样式、定义行为并将其作为 UI 的一部分显示在屏幕上。更多信息
请参阅术语表.

示例概述

此示例创建一个自定义绑定，该绑定根据层次结构中子元素的顺序将 USS 类选择器分配给可视元素的每个子元素。第一个元素始终具有左圆角边缘，而最后一个元素始终具有右圆角边缘。

您可以在此 GitHub 存储库中找到此示例创建的已完成文件。

先决条件

本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容：

创建自定义绑定类型

创建自定义绑定类型，根据同级索引分配 USS 类。仅当同级索引更改时，绑定才会更新。

使用任何模板在 Unity 中创建项目。

在Assets文件夹中，创建一个名为AddMenuUSSClass.cs内容如下：

using UnityEngine.UIElements;
    
[UxmlObject]
public partial class AddMenuUssClass : CustomBinding
{
    protected override BindingResult Update(in BindingContext context)
    {
        // Assign USS classes based on the sibling index. The binding updates when the sibling index changes.
        var element = context.targetElement;
        var index = element.parent.IndexOf(element);
        element.EnableInClassList("menu-button--first", index == 0);
        element.EnableInClassList("menu-button--last", index == element.parent.childCount - 1);                
            
        return new BindingResult(BindingStatus.Success);
    }
}

创建 UI 和绑定

一般来说，你创建一个绑定到元素的现有属性的绑定。出于演示目的，此示例创建一个自定义绑定，该绑定绑定到元素中不存在的属性。您必须使用 UXML 或 C# 来设置绑定到不存在属性的绑定。此示例使用 UXML 来设置绑定。

在Assets文件夹中，创建一个名为CustomBinding.uss包含以下内容：

.menu-button {
    flex-direction: row;
    height: 64px;
    align-items: center; 
    justify-content: center;
}
    
.menu-button--first {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-left-width: 2px;
}
    
.menu-button--last {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-right-width: 2px;
}
    
Button {
    margin: 0px;
    border-color: red;
}

在Assets文件夹中，创建一个名为CustomBinding.uxml包含以下内容：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="True">
    <ui:VisualElement class="menu-button">
        <ui:Button text="Bloub">
            <Bindings>
                <AddMenuUssClass property="add-menu-button-class" />
            </Bindings>
        </ui:Button>
        <ui:Button text="Bip">
            <Bindings>
                <AddMenuUssClass property="add-menu-button-class" />
            </Bindings>
        </ui:Button>
        <ui:Button text="Boop">
            <Bindings>
                <AddMenuUssClass property="add-menu-button-class" />
            </Bindings>
        </ui:Button>
    </ui:VisualElement>
</ui:UXML>

双击CustomBinding.uxml文件以在 UI Builder 中打开它。
在“样式表”面板中，选择“+”>“添加现有 USS”，然后选择CustomBinding.uss文件。
保存您的更改。

测试绑定

要测试绑定，请更改 UI Builder 中按钮元素的顺序，并观察 UI Builder 中的更改视口用户在屏幕上应用的可见区域。
在术语表中查看.

双击CustomBinding.uxml文件以在 UI Builder 中打开它。
在“层次结构”面板中，展开根 VisualElement 以显示子元素，即按钮。
拖放按钮以更改其顺序。第一个按钮始终具有左圆角边缘，而最后一个按钮始终具有右圆角边缘。

其他资源

使用类型转换器创建运行时绑定

使用运行时绑定将 ListView 绑定到列表