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

版本：2023.2+

此示例说明如何创建将 USS 选择器绑定到视觉元素。

示例概述

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

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

先决条件

本指南适用于熟悉 Unity 编辑器的开发人员。用户界面Toolkit 和 C# 脚本。在开始之前，请熟悉以下内容：

创建自定义绑定类型

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

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

在Assets项目的文件夹，创建一个名为c＃脚本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您项目的文件夹，创建一个名称的USS文件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项目的文件夹，创建一个名为uxml文件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构建器中打开。
在样式表小组中，选择 + > Add Existing USS ，然后选择CustomBinding.uss文件。
保存您的更改。

测试结合

要测试绑定，请更改UI构建器中按钮元素的顺序，并观察UI构建器 Viewport 的更改。

双击CustomBinding.uxml文件以在UI构建器中打开。
在层次结构面板中，展开root VisualEllement以显示子元素，即按钮。
拖放按钮以更改订单。第一个按钮始终具有左圆角边缘，而最后一个按钮始终具有正确的圆角边缘。

其他资源

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

将ListView绑定到具有运行时绑定的列表