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

版本: 2023.2+

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

示例概述

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

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

先决条件

本指南适用于熟悉 Unity 编辑器、UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。更多信息
参见术语表工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容

创建自定义绑定类型

创建一个自定义绑定类型，该类型根据兄弟索引分配 USS 类。绑定仅在兄弟索引更改时更新。

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

在项目的 Assets 文件夹中，创建一个名为 AddMenuUSSClass.cs 的 C# 脚本，内容如下

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 的 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 的 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 构建器中打开它。
在样式表面板中，选择+ > 添加现有 USS，然后选择 CustomBinding.uss 文件。
保存更改。

测试绑定

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

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

其他资源

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

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