Class SwipeView

A container that allows users to swipe between multiple items with smooth animations and customizable behavior.

Inheritance
object
CallbackEventHandler
Focusable
VisualElement
BaseVisualElement
SwipeView
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 SwipeView : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder, INotifyValueChanged<int>
Remarks

A SwipeView is a container that displays one or more children at a time and provides a UI to navigate between them. It is similar to a ScrollView but here children are snapped to the container's edges. See PageView for a similar container that includes a page indicator.

The SwipeView is a versatile container component that enables users to navigate through content using swipe gestures or programmatic controls. It's perfect for creating image carousels, onboarding flows, or any interface where users need to browse through a sequence of items.

Key features include:

  • Horizontal or vertical orientation
  • Smooth animations with customizable speed and easing
  • Support for both touch/mouse swipe gestures and keyboard navigation
  • Optional wrapping behavior
  • Configurable resistance and thresholds
  • Auto-play capability

The SwipeView can be populated either through UXML by adding SwipeViewItem elements as children, or programmatically by setting a data source and providing bind/unbind callbacks.

Examples

Creating an image carousel with SwipeView

<SwipeView class="image-carousel">
    <SwipeViewItem>
        <Image src="image1.png" />
    </SwipeViewItem>
    <SwipeViewItem>
        <Image src="image2.png" />
    </SwipeViewItem>
    <SwipeViewItem>
        <Image src="image3.png" />
    </SwipeViewItem>
</SwipeView>

Implementing a dynamic image gallery with data binding

public class Gallery : VisualElement
{
    private SwipeView swipeView;
    private List<string> imageUrls;

public Gallery()
{
    swipeView = new SwipeView
    {
        direction = Direction.Horizontal,
        wrap = true,
        autoPlayDuration = 3000,
        snapAnimationSpeed = 0.5f
    };

    swipeView.sourceItems = imageUrls;
    swipeView.bindItem = (item, index) => {
        var image = new Image { image = LoadImage(imageUrls[index]) };
        item.Add(image);
    };

    Add(swipeView);
}



}

Creating an onboarding flow with vertical swiping

<SwipeView direction="Vertical" class="onboarding">
    <SwipeViewItem>
        <Label text="Welcome" />
        <Image src="welcome.png" />
    </SwipeViewItem>
    <SwipeViewItem>
        <Label text="Features" />
        <Image src="features.png" />
    </SwipeViewItem>
    <SwipeViewItem>
        <Label text="Get Started" />
        <Button text="Continue" />
    </SwipeViewItem>
</SwipeView>

Constructors

SwipeView()

Default constructor.

Declaration
public SwipeView()

Fields

containerUssClassName

The styling class applied to the container of the SwipeView.

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

noAutoPlayDuration

The default duration of the auto play animation.

Declaration
public const int noAutoPlayDuration = -1
Field Value
Type Description
int

ussClassName

The main styling class of the SwipeView. This is the class that is used in the USS file.

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

variantUssClassName

The styling class applied to the SwipeView depending on its orientation.

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

Properties

autoPlayDuration

The number of milliseconds between each automatic swipe.

Declaration
[CreateProperty]
[UxmlAttribute]
public int autoPlayDuration { get; set; }
Property Value
Type Description
int

bindItem

A method that is called when an item is bound to the SwipeView.

Declaration
[CreateProperty]
public Action<SwipeViewItem, int> bindItem { get; set; }
Property Value
Type Description
Action<SwipeViewItem, int>

canGoToNext

Check if there is a next item or not.

Declaration
[CreateProperty(ReadOnly = true)]
public bool canGoToNext { get; }
Property Value
Type Description
bool

canGoToPrevious

Check if there is a previous item or not.

Declaration
[CreateProperty(ReadOnly = true)]
public bool canGoToPrevious { get; }
Property Value
Type Description
bool

contentContainer

The container of the SwipeView.

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

count

The total number of items.

Declaration
[CreateProperty(ReadOnly = true)]
public int count { get; }
Property Value
Type Description
int

currentItem

The current item.

Declaration
[CreateProperty(ReadOnly = true)]
public SwipeViewItem currentItem { get; }
Property Value
Type Description
SwipeViewItem

direction

The orientation of the SwipeView.

Declaration
[CreateProperty]
[UxmlAttribute]
public Direction direction { get; set; }
Property Value
Type Description
Direction

goToStrategy

The strategy used when going to a specific item.

Declaration
[CreateProperty]
[UxmlAttribute]
public GoToStrategy goToStrategy { get; set; }
Property Value
Type Description
GoToStrategy

resistance

The resistance of the SwipeView.

By default, the SwipeView has a resistance of 1.

If you set this property to more than 1, the SwipeView will be harder to swipe. If you set this property to less than 1, the SwipeView will be easier to swipe.

Declaration
[CreateProperty]
[UxmlAttribute]
public float resistance { get; set; }
Property Value
Type Description
float

skipAnimationThreshold

This property determines the threshold at which the animation will be skipped.

Declaration
[CreateProperty]
[UxmlAttribute]
public int skipAnimationThreshold { get; set; }
Property Value
Type Description
int

snapAnimationEasing

The easing of the animation when snapping to an item.

Declaration
[CreateProperty]
public Func<float, float> snapAnimationEasing { get; set; }
Property Value
Type Description
Func<float, float>

snapAnimationSpeed

The speed of the animation when snapping to an item.

Declaration
[CreateProperty]
[UxmlAttribute]
public float snapAnimationSpeed { get; set; }
Property Value
Type Description
float

sourceItems

The source of items that are used to populate the SwipeView.

Declaration
[CreateProperty]
public IList sourceItems { get; set; }
Property Value
Type Description
IList

startSwipeThreshold

The amount of pixels that must be swiped before the SwipeView begins to swipe.

Declaration
[CreateProperty]
[UxmlAttribute]
public float startSwipeThreshold { get; set; }
Property Value
Type Description
float

swipeable

Whether or not the SwipeView is swipeable.

By default, the SwipeView is swipeable. If you set this property to false, you won't be able to interact with the SwipeView (except programmatically).

Declaration
[CreateProperty]
[UxmlAttribute]
public bool swipeable { get; set; }
Property Value
Type Description
bool

unbindItem

A method that is called when an item is unbound from the SwipeView.

Declaration
[CreateProperty]
public Action<SwipeViewItem, int> unbindItem { get; set; }
Property Value
Type Description
Action<SwipeViewItem, int>

value

The value of the SwipeView (i.e. the index of the current item).

Declaration
[CreateProperty]
[UxmlAttribute]
public int value { get; set; }
Property Value
Type Description
int

visibleItemCount

The number of items that are visible at the same time.

Declaration
[CreateProperty]
[UxmlAttribute]
public int visibleItemCount { get; set; }
Property Value
Type Description
int

wrap

This property determines whether or not the view wraps around when it reaches the start or end.

Declaration
[CreateProperty]
[UxmlAttribute]
public bool wrap { get; set; }
Property Value
Type Description
bool

Methods

GetDirectionUssClassName(Direction)

Declaration
public static string GetDirectionUssClassName(Direction enumValue)
Parameters
Type Name Description
Direction enumValue
Returns
Type Description
string

GoTo(int)

Go to item at index.

Declaration
public bool GoTo(int index)
Parameters
Type Name Description
int index

Index of the item to go to.
Returns
Type Description
bool

True if the operation was successful, false otherwise.

GoToNext()

Go to next item.

Declaration
public bool GoToNext()
Returns
Type Description
bool

True if the operation was successful, false otherwise.

GoToPrevious()

Go to previous item.

Declaration
public bool GoToPrevious()
Returns
Type Description
bool

True if the operation was successful, false otherwise.

SetValueWithoutNotify(int)

Sets the value without notifying the listeners.

Declaration
public void SetValueWithoutNotify(int newValue)
Parameters
Type Name Description
int newValue

The new value.

SnapTo(int)

Snap to item at index.

Declaration
public bool SnapTo(int index)
Parameters
Type Name Description
int index

Index of the item to snap to.
Returns
Type Description
bool

True if the operation was successful, false otherwise.

Events

beingSwiped

The event that is called when the value of the SwipeView changes (i.e. when its being swiped or when it snaps to an item).

Declaration
public event Action<SwipeViewItem, float> beingSwiped
Event Type
Type Description
Action<SwipeViewItem, float>

Implements

Extension Methods