推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

为自定义控件创建自定义样式

此示例演示如何在自定义控件中使用自定义 USS 变量。

示例概述

此示例创建一个自定义控件，该控件从 USS 读取两种颜色，并使用它们生成纹理。

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

先决条件

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

• 用户界面生成器
• 可视化树
  
• 用户体验
• 美国航空母舰

创建自定义控件和自定义样式

创建一个 C# 脚本来定义自定义控件，创建一个 USS 文件来定义自定义样式。

1. 使用任何模板创建 Unity 项目。
2. 创建一个名为用于存储文件的文件夹。create-custom-style-custom-control
3. 在该文件夹中，创建一个名为的 C# 脚本，并将其内容替换为以下内容：ExampleElementCustomStyleExampleElementCustomStyle.cs

using UnityEngine;
using UnityEngine.UIElements;

namespace UIToolkitExamples
{
public class ExampleElementCustomStyle : VisualElement
{
// Factory class, required to expose this custom control to UXML
public new class UxmlFactory : UxmlFactory<ExampleElementCustomStyle, UxmlTraits> { }

    // Traits class
    public new class UxmlTraits : VisualElement.UxmlTraits { }

    // 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();
    }
}

}

4. 创建一个名为 USS 的文件，并将其内容替换为以下内容：ExampleElementCustomStyle.uss

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

在 UI 文档中使用自定义控件

创建 UI 文档以使用自定义控件，并将自定义样式应用于自定义控件。

1. 在该文件夹中，创建名为 的 UI 文档。ExampleElementCustomStyleExampleElementCustomStyle.uxml
2. 双击以在 UI 生成器中将其打开。ExampleElementCustomStyle.uxml
3. 选择“库>项目”>“UIToolkitExamples”，然后将“示例元素自定义样式”拖到“层次结构”窗口中。一个灰色方块出现在视口窗口中。
4. 将文件添加为现有 USS。这会将自定义 USS 变量应用于正方形。ExampleElementCustomStyle.uss

由3D建模学习工作室整理翻译，转载请注明出处！

上一篇：Unity3D ：创建可绑定的自定义控件 (mvrlink.com)

下一篇：Unity3D ：Unity 样式表 (mvrlink.com)