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

Версия: 2023.2+

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

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

Этот пример создает пользовательский контроллер, который читает два цвета из USS и использует их для создания текстуры.

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

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

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

• UI Builder
• Визуальное дерево
• UXML
• USS

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

Создайте скрипт C# для определения пользовательского контроля и файл USS для определения пользовательского стиля.

1. Создайте проект Unity с любым шаблоном.
2. Создайте папку create-custom-style-custom-control для хранения ваших файлов.
3. В папке ExampleElementCustomStyle создайте скрипт C# с именем ExampleElementCustomStyle.cs и замените его содержимое следующим:

using UnityEngine;
using UnityEngine.UIElements;

namespace UIToolkitExamples
{
    [UxmlElement]
    public partial class ExampleElementCustomStyle : VisualElement
    {
        // Use CustomStyleProperty<T> to fetch custom style properties from USS
        static readonly CustomStyleProperty<Color> S_GradientFrom = new CustomStyleProperty<Color>("--gradient-from");
        static readonly CustomStyleProperty<Color> S_GradientTo = new CustomStyleProperty<Color>("--gradient-to");

        // Image child element and its texture
        Texture2D m_Texture2D;
        Image m_Image;

        public ExampleElementCustomStyle()
        {
            // Create an Image and a texture for it. Attach Image to self.
            m_Texture2D = new Texture2D(100, 100);
            m_Image = new Image();
            m_Image.image = m_Texture2D;
            Add(m_Image);

            RegisterCallback<CustomStyleResolvedEvent>(OnStylesResolved);
        }

        // When custom styles are known for this control, make a gradient from the colors.
        void OnStylesResolved(CustomStyleResolvedEvent evt)
        {
            Color from, to;

            if (evt.customStyle.TryGetValue(S_GradientFrom, out from)
                && evt.customStyle.TryGetValue(S_GradientTo, out to))
            {
                GenerateGradient(from, to);
            }
        }

        public void GenerateGradient(Color from, Color to)
        {
            for (int i = 0; i < m_Texture2D.width; ++i)
            {
                Color color = Color.Lerp(from, to, i / (float)m_Texture2D.width);
                for (int j = 0; j < m_Texture2D.height; ++j)
                {
                    m_Texture2D.SetPixel(i, j, color);
                }
            }

            m_Texture2D.Apply();
            m_Image.MarkDirtyRepaint();
        }
    }
}

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

Создайте файл USS с именем ExampleElementCustomStyle.uss и замените его содержимое следующим:

ExampleElementCustomStyle {
    --gradient-from: red;
    --gradient-to: yellow;
}

Используйте пользовательский контроллер в документе UI

Создайте документ UI для использования пользовательского элемента управления и примените к нему пользовательский стиль.

1. В папке ExampleElementCustomStyle создайте Документ UI с именем ExampleElementCustomStyle.uxml.
2. Дважды щелкните ExampleElementCustomStyle.uxml, чтобы открыть его в UI Builder.
3. Выберите Библиотека > Project > UIToolkitExamplesи перетащите ExampleElementCustomStyle в окно Hierarchy. В окне Viewport появится серый квадрат.
4. Добавить файл ExampleElementCustomStyle.uss как существующий USS. Это применяет пользовательские переменные USS к квадрату.

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

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