Class PageView

A container component that displays a single child at a time with built-in navigation.

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

The PageView component is a container that displays one child element at a time and provides smooth navigation between them. It combines a SwipeView for touch/mouse interaction with a PageIndicator for visual feedback and navigation control. It is similar to a ScrollView, but here children are snapped to the container's edges.

It's ideal for creating carousels, slideshows, onboarding flows, or any interface where content needs to be displayed one page at a time.

Key features:

  • Supports both horizontal and vertical orientations
  • Touch and mouse swipe gestures
  • Keyboard navigation
  • Auto-play capability
  • Configurable animation speed and behavior
  • Optional wrapping navigation
  • Built-in page indicator
Examples

**Basic Usage** — Creating a simple horizontal page view with three pages.

<PageView style="width: 100%; height: 300px;">
    <SwipeViewItem>
        <Label text="Page 1" />
    </SwipeViewItem>
    <SwipeViewItem>
        <Label text="Page 2" />
    </SwipeViewItem>
    <SwipeViewItem>
        <Label text="Page 3" />
    </SwipeViewItem>
</PageView>

**Image Carousel** — Creating an auto-playing image carousel with wrap-around navigation.

<PageView class="carousel" auto-play-duration="5000" wrap="true">
    <SwipeViewItem>
        <Image src="image1.png" />
    </SwipeViewItem>
    <SwipeViewItem>
        <Image src="image2.png" />
    </SwipeViewItem>
    <SwipeViewItem>
        <Image src="image3.png" />
    </SwipeViewItem>
</PageView>

**Onboarding Flow** — Creating an onboarding flow with multiple pages.

<PageView direction="Horizontal" class="onboarding">
    <SwipeViewItem>
        <Box class="onboarding-page">
            <Image src="welcome.png" />
            <Label text="Welcome!" class="title" />
            <Label text="Swipe to learn more" class="subtitle" />
        </Box>
    </SwipeViewItem>
    <SwipeViewItem>
        <Box class="onboarding-page">
            <Image src="feature1.png" />
            <Label text="Feature 1" class="title" />
            <Label text="Description of feature 1" class="subtitle" />
        </Box>
    </SwipeViewItem>
</PageView>

Constructors

PageView()

Default constructor.

Declaration
public PageView()

Fields

pageIndicatorUssClassName

The styling class applied to the PageIndicator.

Declaration
public const string pageIndicatorUssClassName = "appui-pageview__page-indicator"
Field Value
Type Description
string

swipeViewUssClassName

The styling class applied to the SwipeView.

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

ussClassName

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

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

variantUssClassName

The styling class applied to the PageView depending on its direction.

Declaration
public const string variantUssClassName = "appui-pageview--"
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

contentContainer

The content container of the PageView.

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

direction

The orientation of the PageView.

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

skipAnimationThreshold

A limit number of pages to keep animating the transition between pages.

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

snapAnimationSpeed

The speed of the animation when snapping to a page.

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

visibilityCount

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

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

wrap

Whether the PageView should wrap around when reaching the end of the list.

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

Implements

Extension Methods