Create a bindable custom control
Create a drag-and-drop list and tree views between windows

Create a custom style for a custom control

Version: 2023.2+

This example demonstrates how to use custom USS variables in a custom control.

Example overview

This example creates a custom control that reads two colors from USS and uses them to generate a texture.

You can find the completed files that this example creates in this GitHub repository.

先决条件

This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:

Create the custom control

Create a C# script to define the custom control and a USS file to define the custom style.

  1. Create a Unity project with any template.
  2. Create a folder named create-custom-style-custom-control to store your files.
  3. In the ExampleElementCustomStyle folder, create a C# script named ExampleElementCustomStyle.cs and replace its contents with the following:

[!code-cs]

Create the custom control and custom style

Create a USS file named ExampleElementCustomStyle.uss and replace its contents with the following:

[!code-css]

Use the custom control in UI Document

Create a UI Document to use the custom control and apply the custom style to the custom control.

  1. In the ExampleElementCustomStyle folder, create a UI Document named ExampleElementCustomStyle.uxml.
  2. Double-click ExampleElementCustomStyle.uxml to open it in the UI Builder.
  3. Select Library > Project > UIToolkitExamples, and drag ExampleElementCustomStyle to the Hierarchy window. A grey square appears in the Viewport window.
  4. Add the ExampleElementCustomStyle.uss file as an existing USS. This applies the custom USS variables to the square.

其他资源


Did you find this page useful? Please give it a rating:

Create a bindable custom control
Create a drag-and-drop list and tree views between windows