Class Panel

The root UI container that provides layered architecture for the main interface, popups, notifications, and tooltips.

Inheritance
object
CallbackEventHandler
Focusable
VisualElement
Panel
Implements
Inherited Members
VisualElement.Focus()
VisualElement.Overlaps(Rect)
VisualElement.ToString()
VisualElement.TryGetBinding(BindingId, out Binding)
VisualElement.TryGetDataSourceContext(BindingId, out DataSourceContext)
VisualElement.TryGetLastBindingToUIResult(in BindingId, out BindingResult)
VisualElement.TryGetLastBindingToSourceResult(in BindingId, out BindingResult)
VisualElement.GetFirstOfType<T>()
VisualElement.GetFirstAncestorOfType<T>()
VisualElement.canGrabFocus
VisualElement.focusController
VisualElement.cacheAsBitmap
CallbackEventHandler.RegisterCallback<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.RegisterCallbackOnce<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.RegisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, TrickleDown)
CallbackEventHandler.RegisterCallbackOnce<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, TrickleDown)
CallbackEventHandler.RegisterCallback<TEventType>(EventCallback<TEventType>, CallbackOptions)
CallbackEventHandler.RegisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, CallbackOptions)
CallbackEventHandler.UnregisterCallback<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.UnregisterCallback<TEventType>(EventCallback<TEventType>, CallbackOptions)
CallbackEventHandler.UnregisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TrickleDown)
CallbackEventHandler.UnregisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, CallbackOptions)
CallbackEventHandler.NotifyPropertyChanged(in BindingId)
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class Panel : VisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler
Remarks

The Panel component is the foundational element of any App UI runtime application. It establishes a hierarchical layer system that organizes different UI contexts, ensuring proper z-ordering and isolation between the main interface, popup elements, notifications, and tooltips.

Key features:

  • Four distinct UI layers: main container, popup container, notification container, and tooltip container
  • Global context providers for theme, scale, language, and layout direction
  • Automatic DPI scaling support for different displays
  • Integrated tooltip management system
  • RTL (Right-to-Left) layout support
  • Localization integration with Unity Localization package

The Panel automatically manages contexts that are inherited by all child elements, making it easy to apply consistent theming, scaling, and localization throughout your application.

NOTE: Each application should have one root Panel element. Additional Panel elements can be nested but will not act as root panels.

Examples

Basic panel setup: Creating a basic application with a Panel root.

<Panel>
    <Box>
        <Heading>Welcome to App UI</Heading>
        <Text text="Main content goes here" />
    </Box>
</Panel>

Panel with custom theme and scale: Configuring panel appearance and scale.

<Panel theme="light" scale="large" lang="en">
    <Box>
        <Text text="This panel uses a light theme with large scale" />
    </Box>
</Panel>

Accessing panel layers programmatically: Using panel utility methods to access UI layers.

// Get the panel from any element in the hierarchy
var notificationLayer = Panel.FindNotificationLayer(myElement);
var popupLayer = Panel.FindPopupLayer(myElement);
var tooltipLayer = Panel.FindTooltipLayer(myElement);

// Add a notification to the notification layer
var snackbar = new Snackbar("Operation completed");
notificationLayer.Add(snackbar);
snackbar.Show();

RTL layout support: Setting up a panel for right-to-left languages.

<Panel layout-direction="Rtl" lang="ar" theme="dark">
    <Box>
        <Text text="مرحبا بكم في واجهة المستخدم" />
    </Box>
</Panel>

Constructors

Panel()

Default constructor.

Declaration
public Panel()

Fields

contextPrefix

Prefix used in App UI context USS classes.

Declaration
public const string contextPrefix = "appui--"
Field Value
Type Description
string

mainContainerName

The name of the main UI layer.

Declaration
public const string mainContainerName = "main-container"
Field Value
Type Description
string

notificationContainerName

The name of the Notifications layer.

Declaration
public const string notificationContainerName = "notification-container"
Field Value
Type Description
string

popupContainerName

The name of the Popups layer.

Declaration
public const string popupContainerName = "popup-container"
Field Value
Type Description
string

tooltipContainerName

The name of the Tooltip layer.

Declaration
public const string tooltipContainerName = "tooltip-container"
Field Value
Type Description
string

ussClassName

Main Uss Class Name.

Declaration
public const string ussClassName = "appui"
Field Value
Type Description
string

Properties

contentContainer

The main UI layer container.

Declaration
public override VisualElement contentContainer { get; }
Property Value
Type Description
VisualElement
Overrides

forceUseTooltipSystem

If true, the panel will use the tooltip system, even if the default UI-Toolkit tooltips are enabled.

Declaration
[Tooltip("Force the use of the tooltip system, even if the default UI-Toolkit tooltips are enabled.")]
[CreateProperty]
[UxmlAttribute]
public bool forceUseTooltipSystem { get; set; }
Property Value
Type Description
bool

lang

The default language for this panel.

Declaration
[Tooltip("The default language for this panel.")]
[CreateProperty]
[UxmlAttribute]
[Header("Panel")]
public string lang { get; set; }
Property Value
Type Description
string

layoutDirection

The default layout direction for this panel.

Declaration
[Tooltip("The default layout direction for this panel.")]
[CreateProperty]
[UxmlAttribute]
public Dir layoutDirection { get; set; }
Property Value
Type Description
Dir

notificationContainer

The Notifications layer container.

Declaration
public VisualElement notificationContainer { get; }
Property Value
Type Description
VisualElement

popupContainer

The Popups layer container.

Declaration
public VisualElement popupContainer { get; }
Property Value
Type Description
VisualElement

preferredTooltipPlacement

The default preferred tooltip placement for this panel.

Declaration
[Tooltip("The default preferred tooltip placement for this panel.\nNote that this is just the ideal placement, the tooltip will be placed on the opposite side if there is not enough space.")]
[CreateProperty]
[UxmlAttribute]
public PopoverPlacement preferredTooltipPlacement { get; set; }
Property Value
Type Description
PopoverPlacement
Remarks

Note that this is just the ideal placement, the tooltip will be placed on the opposite side if there is not enough space.

scale

The default scale for this panel.

Declaration
[Tooltip("The default scale for this panel.")]
[CreateProperty]
[UxmlAttribute]
public string scale { get; set; }
Property Value
Type Description
string

theme

The default theme for this panel.

Declaration
[Tooltip("The default theme for this panel.")]
[CreateProperty]
[UxmlAttribute]
public string theme { get; set; }
Property Value
Type Description
string

tooltipContainer

The Tooltip layer container.

Declaration
public VisualElement tooltipContainer { get; }
Property Value
Type Description
VisualElement

tooltipDelayMs

The default tooltip delay in milliseconds for this panel.

Declaration
[Tooltip("The default tooltip delay in milliseconds for this panel.")]
[CreateProperty]
[UxmlAttribute]
public int tooltipDelayMs { get; set; }
Property Value
Type Description
int

Methods

FindNotificationLayer(VisualElement)

Utility method to quickly find the current application's Notification layer.

Declaration
public static VisualElement FindNotificationLayer(VisualElement element)
Parameters
Type Name Description
VisualElement element

An element present in the application visual tree.
Returns
Type Description
VisualElement

The Notification layer container.

FindPopupLayer(VisualElement)

Utility method to quickly find the current application's Popup layer.

Declaration
public static VisualElement FindPopupLayer(VisualElement element)
Parameters
Type Name Description
VisualElement element

An element present in the application visual tree.
Returns
Type Description
VisualElement

The Popup layer container.

FindTooltipLayer(VisualElement)

Utility method to quickly find the current application's Tooltip layer.

Declaration
public static VisualElement FindTooltipLayer(VisualElement element)
Parameters
Type Name Description
VisualElement element

An element present in the application visual tree.
Returns
Type Description
VisualElement

The Tooltip layer container.

GetLayoutDirectionUssClassName(Dir)

Declaration
public static string GetLayoutDirectionUssClassName(Dir enumValue)
Parameters
Type Name Description
Dir enumValue
Returns
Type Description
string

Implements

Extension Methods