Class ExVisualElement
An enhanced VisualElement with advanced styling capabilities including shadows, borders, and outlines.
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class ExVisualElement : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolderRemarks
ExVisualElement extends Unity's VisualElement to provide advanced styling options commonly found in modern UI frameworks. It enables developers to create visually rich interfaces with features like drop shadows, customizable borders, outlines, and complex background effects.
This component is ideal for creating containers, cards, panels, and other UI elements that require sophisticated visual treatments without the need for additional images or sprites.
Key features include:
- Customizable borders with different styles (solid, dashed, dotted)
- Box shadows with inset/outset options
- Outline effects with adjustable width and offset
- Background colors and images
- Optimized rendering with configurable render passes
WARNING: Be mindful of performance when using multiple instances with complex effects. Consider using the passMask property to disable unnecessary render passes.
Examples
Basic Card Example. Creating a basic card with shadow and padding.
<ExVisualElement name="card" class="card">
<Label text="Card Title"/>
<Label text="Card content goes here"/>
</ExVisualElement>
.card {
--background-color: white;
--box-shadow-offset-x: 0;
--box-shadow-offset-y: 2px;
--box-shadow-blur: 4px;
--box-shadow-color: rgba(0, 0, 0, 0.2);
padding: 16px;
border-radius: 4px;
}
Outlined Button Example. Creating an outlined button with hover effect.
<ExVisualElement name="button" class="outlined-button">
<Label text="Click Me"/>
</ExVisualElement>
.outlined-button {
--outline-color: rgb(25, 118, 210);
--outline-width: 1px;
padding: 8px 16px;
border-radius: 4px;
}
.outlined-button:hover {
--background-color: rgba(25, 118, 210, 0.04);
}
Custom Panel with Inset Shadow. Creating a panel with an inset shadow effect.
<ExVisualElement class="inset-panel">
<Label text="Panel Content"/>
</ExVisualElement>
.inset-panel {
--background-color: rgb(245, 245, 245);
--box-shadow-type: 1; /* inset */
--box-shadow-blur: 4px;
--box-shadow-color: rgba(0, 0, 0, 0.1);
padding: 24px;
border-radius: 8px;
}
Constructors
ExVisualElement()
Default constructor.
Declaration
public ExVisualElement()Properties
backgroundColor
The background color of this element. Setting this will override the background color defined in the USS.
Declaration
public Color backgroundColor { get; set; }Property Value
| Type | Description |
|---|---|
| Color |
contentContainer
The content container of this element.
Declaration
public override VisualElement contentContainer { get; }Property Value
| Type | Description |
|---|---|
| VisualElement |
Overrides
outlineColor
The outline color of this element. Setting this will override the outline color defined in the USS.
Declaration
[CreateProperty]
public Color outlineColor { get; set; }Property Value
| Type | Description |
|---|---|
| Color |
passMask
The mask of passes to render.
Declaration
[CreateProperty]
public ExVisualElement.Passes passMask { get; set; }Property Value
| Type | Description |
|---|---|
| ExVisualElement.Passes |