Создание пользовательской привязки для привязки селекторов USS

Версия: 2023.2+

В этом примере показано, как создать пользовательскую привязку, которая привязывает селектор USS к визуальному элементу.

Примерный обзор

В этом примере создаётся пользовательская привязка, которая назначает селекторы USS-классов каждому дочернему элементу визуального элемента в зависимости от его порядка в иерархии. У первого элемента всегда скруглён левый край, у последнего — правый.

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

• UI Builder
• UXML

Создание пользовательского типа привязки

Создайте пользовательский тип привязки, который назначает классы USS на основе индекса родственника. Привязка обновляется только при изменении индекса родственника.

1. Создайте проект в Unity с любым шаблоном.

2. В папке 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.

1. В папке 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;
   }
   

2. В папке 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>
   

3. Дважды щелкните файл CustomBinding.uxml, чтобы открыть его в UI Builder.

4. В панели StyleSheet выберите + > Добавить существующий USS, а затем выберите файл CustomBinding.uss.

5. Сохраните изменения.

Проверка привязки

Чтобы проверить привязку, измените порядок элементов кнопки в UI Builder и наблюдайте за изменениями в окне UI Builder.

1. Дважды щелкните файл CustomBinding.uxml, чтобы открыть его в UI Builder.
2. В панели Hierarchy разверните корень VisualElement, чтобы отобразить дочерние элементы, которые являются кнопками.
3. Перетаскивайте кнопки, чтобы изменить их порядок. Первая кнопка всегда имеет левый круглый угол, в то время как последняя кнопка всегда имеет правый круглый угол.

Дополнительные ресурсы

• Привязка данных во время выполнения
• Создать привязку данных времени выполнения
• Создание пользовательских типов привязок