Extension methods for VisualElements. These methods are intended to cover common actions when manipulating UI and improve readability of code. All UI elements in UI Toolkit inherit from VisualElement, meaning these methods can be used on any UI element. All methods are chainable with other extension methods.

Sets the display style of incoming VisualElement to DisplayStyle.Flex making it visible and causes it to take space in the layout.

C#

Returns

  • VisualElement incoming element

Example

Typical usage for this method is to toggle visibility of UI on user interaction. It is more performant to initialize UI on load, or lazy load, then toggle visibility for frequently accessed UI, rather than instantiating and destroying UI elements at runtime.

C#

Sets the display style of incoming VisualElement to DisplayStyle.None making it invisible and causes it to not take space in the layout.

C#

Returns

  • VisualElement incoming element

Example

Typical usage for this method is to toggle visibility of UI on user interaction. It is more performant to initialize UI on load, or lazy load, then toggle visibility for frequently accessed UI, rather than instantiating and destroying UI elements at runtime.

C#

Sets the style.backgroundImage property of the incoming VisualElement. If sprite is null, the VisualElement will be set to DisplayStyle.None depending on bool setNoneIfNull. This pattern can help reusability for UI components that are similar to one another.

C#

Returns

  • VisualElement incoming element

Example

Typical usage for this method is to populate a componentized piece of UI such as a tutorial panel, notification icon type, etc. In this example, the content for a paginated tutorial is populated from a ScriptableObject when the index (page) is changed.

C#

Sets the style.backgroundColor property of the incoming VisualElement.

C#

Returns

  • VisualElement incoming element

Example

Typical usage for this method is to change a componentized piece of UI such as a notification that has multiple states (warning/error/info), or a dialogue that changes speaker accent colours. In this example, the content for a notification is populated from a ScriptableObject on Start().

C#

Sets the style.borderColor property of the incoming VisualElement.

C#

Returns

  • VisualElement incoming element

Example

Typical usage for this method is to change a componentized piece of UI such as a notification that has multiple states (warning/error/info), or a dialogue that changes speaker accent colours. In this example, the content for a notification is populated from a ScriptableObject on Start().

C#

Enables/Disables all children of the incoming VisualElement based on incoming bool toEnable value.

C#

Returns

  • VisualElement incoming element

Example

Typical usage for this method is to enable/disable children in conditional UI such as a foldout/settings menu. Note, that this method disables all VisualElements, and not buttons only. In this example, the settings for customizing damage numbers are enabled/disabled conditionally based on whether damage numbers are enabled or not.

C#

Enables/Disables all children buttons of the incoming VisualElement based on incoming bool toEnable value.

C#

Returns

  • VisualElement incoming element

Example

Typical usage for this method is to enable/disable children buttons in conditional UI such as a foldout/settings menu. In this example, the settings for customizing damage numbers are enabled/disabled conditionally based on whether damage numbers are enabled or not.

This is the same example as above, but it would only toggle buttons, and not other controls.

C#

Creates a child VisualElement and applies all incoming USS classes. Uses AddClasses() method internally.

C#

Returns

  • VisualElement the created child element

Example

Typical usage for this method is to simplify creating new UI within scripts, especially custom UI controls. New elements can be created with all necessary USS classes applied at once. In this example, a custom control is being created for a settings menu. It is a switch that has two buttons in a group, one for 'ON', and one for 'OFF'.

C#

Creates a child TemplateContainer int num times and applies all incoming USS classes. Uses AddClasses() method internally.

C#

Returns

  • VisualElement the last created child template

Example

Typical usage for this method is to simplify creating new UI within scripts. New elements can be created from UXML templates with any necessary customization away from the base template can be achieved from setting additional UUS classes. In this example, a new plus button is being cloned from a UXML template for a new class entry in Doddle USS' utility class editor.

C#

Adds USS classes to the incoming VisualElement.

C#

Returns

  • VisualElement incoming element

Example

Typical usage for this method is to simplify adding multiple conditional USS classes on elements. In this example, a custom control is being created for a settings menu. It is a switch that has two buttons in a group, one for 'ON', and one for 'OFF'.

C#

Removes USS classes from class list on incoming VisualElement.

C#

Returns

  • VisualElement incoming element

Example

Typical usage for this method is to simplify removing multiple conditional USS classes on elements. In this example, a notification has entry and exit animations. The classes are removed when the notification duration has timed out. This uses a set of static helper methods for controlling entry, and exit animations on elements.

C#

Queries children element.tooltip property for matching string tooltipTooltips are a only supported in editor. This can be a handy trick for storing runtime information when pushing/popping similar elements in lists.

C#

Returns

  • VisualElement list of children elements that match the tooltip

Example

Typical usage for this method is to search through element tooltips in the UXML hierarchy for dynamic content at runtime. In this example, a checklist of tasks are queried for a specific task tooltip, and the task is marked as completed with conditional styling.

C#

Queries children element.tooltip property if string tooltip is contained in the children tooltip. Tooltips are a only supported in editor. This can be a handy trick for storing runtime information when pushing/popping similar elements in lists.

C#

Returns

  • VisualElement list of children elements that contain the tooltip

Example

Typical usage for this method is to search through element tooltips in the UXML hierarchy for dynamic content at runtime. In this example, a checklist of tasks are queried for a task tooltip that contains the incoming string. It does not need to be a perfect match. The task is marked as completed with conditional styling.

This is the same example as above, but sometimes it is useful to store multiple identifiers in the tooltip.

C#

This page is still under construction.

Sets the textElement.text property of the incoming TextElement. If text is null, the TextElement will be set to DisplayStyle.None depending on bool setNoneIfNull.

C#

Returns

  • TextElement incoming element

Example

Typical usage for this method is to populate a componentized piece of UI such as a tutorial panel, notification icon type, etc. In this example, the content for a paginated tutorial is populated from a ScriptableObject when the index (page) is changed.

C#

Clears the textElement.text property of the incoming TextElement.

C#

Returns

  • TextElement incoming element

Sets the style.color property of the incoming TextElement.

C#

Returns

  • TextElement incoming element

Example

Typical usage for this method is to change a componentized piece of UI such as a notification that has multiple states (warning/error/info), or a dialogue that changes speaker accent colours. In this example, the content for a notification is populated from a ScriptableObject on Start().

C#

Removes all font weight classes from the incoming TextElement and applies the incoming fontWeightClass.

Valid fontWeightClass are classes defined on the Font Weight / Style page.

C#

Returns

  • TextElement incoming element

Example

Typical usage for this method is to change a componentized piece of UI such as a notification that has multiple states (warning/error/info), or a dialogue that changes speaker accent colours. In this example, the content for a notification is populated from a ScriptableObject on Start().

C#

Removes all font weight classes from the incoming TextElement and applies the incoming desiredFontWeight.

Valid desiredFontWeight are enums defined on the Font Weight / Style page.

C#

Returns

  • TextElement incoming element

Example

Typical usage for this method is to change a componentized piece of UI such as a notification that has multiple states (warning/error/info), or a dialogue that changes speaker accent colours. In this example, the content for a notification is populated from a ScriptableObject on Start().

C#