Class DropZone
A container that accepts drag and drop operations for content placement.
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class DropZone : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolderRemarks
The DropZone component provides a designated area where users can drag and drop content. It's particularly useful for file uploads, content organization, and any interface that requires drag-and-drop functionality.
The component visualizes different states during drag operations, providing clear feedback to users about whether the content being dragged can be dropped in the zone.
Note: The drag and drop functionality is currently only available in the Unity Editor environment.
Examples
Basic DropZone Setup
Creating a simple file drop zone.
var dropZone = new DropZone();
dropZone.style.width = new StyleLength(200);
dropZone.style.height = new StyleLength(200);
dropZone.controller.acceptDrag = (objects) => true; // Accept all drops
dropZone.controller.dropped += (objects) => {
Debug.Log($"Received {objects.Count()} items");
};
rootElement.Add(dropZone);
UXML Definition
Defining a DropZone in UXML.
<UXML xmlns:ui="UnityEngine.UIElements" xmlns:appui="Unity.AppUI.UI">
<appui:DropZone name="file-drop-zone"
style="width: 200px; height: 200px;"
visible-indicator="true" />
</UXML>Custom Styling
Applying custom styles to DropZone states.
.appui-dropzone {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.appui-dropzone--accept-drag {
background-color: rgba(0, 255, 0, 0.1);
border-color: green;
}
.appui-dropzone--reject-drag {
background-color: rgba(255, 0, 0, 0.1);
border-color: red;
}
Constructors
DropZone()
Create a new DropZone.
Declaration
public DropZone()Fields
backgroundUssClassName
The DropZone background styling class.
Declaration
public const string backgroundUssClassName = "appui-dropzone__background"Field Value
| Type | Description |
|---|---|
| string |
frameUssClassName
The DropZone frame styling class.
Declaration
public const string frameUssClassName = "appui-dropzone__frame"Field Value
| Type | Description |
|---|---|
| string |
stateUssClassName
The DropZone state styling class.
Declaration
public const string stateUssClassName = "appui-dropzone--"Field Value
| Type | Description |
|---|---|
| string |
ussClassName
The DropZone main styling class.
Declaration
public const string ussClassName = "appui-dropzone"Field Value
| Type | Description |
|---|---|
| string |
visibleIndicatorUssClassName
The DropZone visible indicator styling class.
Declaration
public const string visibleIndicatorUssClassName = "appui-dropzone--visible-indicator"Field Value
| Type | Description |
|---|---|
| string |
Properties
contentContainer
The container used to display the content.
Declaration
public override VisualElement contentContainer { get; }Property Value
| Type | Description |
|---|---|
| VisualElement |
Overrides
controller
The controller used to manage the drag and drop operations.
Declaration
public DropZoneController controller { get; }Property Value
| Type | Description |
|---|---|
| DropZoneController |
state
The state of the DropZone.
Declaration
public DragAndDropState state { get; set; }Property Value
| Type | Description |
|---|---|
| DragAndDropState |
visibleIndicator
The visible indicator state of the DropZone.
Declaration
public bool visibleIndicator { get; set; }Property Value
| Type | Description |
|---|---|
| bool |
Methods
GetDropZoneStateUssClassName(DragAndDropState)
Declaration
public static string GetDropZoneStateUssClassName(DragAndDropState enumValue)Parameters
| Type | Name | Description |
|---|---|---|
| DragAndDropState | enumValue |
Returns
| Type | Description |
|---|---|
| string |