ScrollView Class

Used to navigate contents that are larger than the available size.

Example

This example demonstrates the use of ScrollView by having it contain a Panel that would normally be too big to be viewed.

<ScrollView>
    <Panel Width="2000" Height="2000" />
</ScrollView>

You may also constrain the directions the ScrollView is allowed to scroll in using the AllowedScrollDirections property.

<ScrollView AllowedScrollDirections="Horizontal">
    <!-- Contents -->
</ScrollView>

By default, ScrollView tries to take up the same amount of space as its content in the scrollable directions. However, when placed in a Panel (or DockPanel, Grid, etc.), the size of the ScrollView itself will be limited to the size of its parent.

Note

StackPanel does not limit the size of its children, but rather lets them extend to whatever size they want to take up. This is a problem with ScrollView, since it inherits the size of its content by default. If we were to place a ScrollView inside a StackPanel, the size of the ScrollView would extend beyond the bounds of the screen. What we want instead is that only the ScrollView's content should extend to whatever size it needs, while the ScrollView itself is constrained to the bounds of its parent.

This means that a ScrollView inside a StackPanel probably won't behave as you expect it to. Alternatives include using a different type of Panel (e.g. a DockPanel) as the parent of the ScrollView or specifying its size explicitly.

The Alignment of the child content influences the MinScroll and MaxScroll values as well as the starting ScrollPosition. For example a Bottom aligned element will start with the bottom of the content visible (aligned to the bottom of the ScrollView) and MinScroll will be negative, as the overflow is to the top of the ScrollView.

LayoutMode

By default a ScrollView keeps a consistent ScrollPosition when the layout changes. This may result in jumping when content is added/removed.

An alternate mode LayoutMode="PreserveVisual" instead attempts to maintain visual consistency when its children or parent layout is changed. It assumes it's immediate content is a container and looks at that container's children. For example, a layout like this:

<ScrollView>
    <StackPanel>
        <Panel/>
        <Panel/>
    <StackPanel>
</ScrollView>

Visuals without LayoutRole=Standard are not considered when retaining the visual consistency. The LayoutMode property can be used to adjust this behavior.

Location

Namespace
Fuse.Controls
Package
Fuse.Controls.ScrollView 2.9.1
Show Uno properties and methods

Interface of ScrollView

Inherited from ScrollViewBase

KeepFocusInView : bool ux

By default a child with focus will be scrolled into view. Set KeepFocusInView to false to disable this behavior.

MaxOverflow : float2 uno

The extent of the maximum overflow (snapping) region. This is used only by gesture controls and will likely be deprecated as a public property.

MinOverflow : float2 uno

The extent of the minimum overflow (snapping) region. This is used only by gesture controls and will likely be deprecated as a public property.

Motion : MotionConfig ux

The animation and scrolling behavior of a ScrollView can be configured using ScrollViewMotion.

<ScrollView>
    <ScrollViewMotion GotoEasing="Linear" GotoDuration="0.5"/>
    <Panel>...content...</Panel>
</ScrollView>
SnapMaxTransform : bool ux

If set to false the contents will not visually scroll into the maximum snapping region (when the user scrolls beyond the bottom of the content). This region however still exists and can be used in ScrollingAnimation still.

SnapMinTransform : bool ux

If set to false the contents will not visually scroll into the minimum snapping region (when the user scrolls beyond the top of the content). This region however still exists and can be used in ScrollingAnimation still.

UserScroll : bool ux

Enables/disables the ability for the user to scroll the control. When false the user cannot interact with the control but it can still be scrolled programmatically.

Inherited from ContentControl

Inherited from Control

Inherited from Element

ActualPosition : float2 uno

The position of the element, the position of its top-left corner to the top-left corner in the parent.

Anchor : Size2 ux

A point within the element to treat as its "epicenter".

Aspect : float ux

The aspect ratio that an element must fulfill in layout.

Offset : Size2 ux

Offets the position of the element after all other layout has been applied.

Inherited from Visual

bringIntoView() js

Requests that this visual be brought into the visible are of the screen. Typically a containing ScrollView will scroll to ensure it is visible.

Children : IList of Node ux

The children of the visual. All nodes placed inside the visual in UX markup are assigned to this list. The order of Visuals this list determines the order of layout. The Z-order of the children is by default equal to this order, but can be manipulated separately using methods like BringToFront and SendToBack.

InvalidateVisual uno

Indicates the visual for this node has changed. This allows the root-level node to know that it must draw, and any caching that it must invalidate the cache for this node.

InvalidateVisualComposition uno

Indicates the composition of the visual has changed, but that the visual drawing itself is still valid (for example a position change).

IsEnabled : bool ux

Whether this node is currently interactable. Disabled visuals do not receive input focus. However, they can still be visible and block hit test for underlaying objects.

IsLocalVisible : bool uno

Returns whether this visual is visible without concern for whether an ancestor visual is hidden or collapsed.

IsVisible : bool uno

Returns whether this visual is currently visible. Will return false if any of the ancestor visuals are hidden or collapsed. This property can not be used to check whether a visual is hidden because it is occluded by another visual, or is outside the view but otherwise visible.

Parameter : string ux

The parameter data for this visual, encoded as JSON, provided by a router if this visual represents a navigation page.

SnapToPixels : bool ux

Whether to snap the result of layout of this visual to physical device pixels.

ZOffset : float ux

Specifies a Z-Offset, visuals with higher values are in front of other visuals.

Inherited from Node

ContextParent : Node uno

The context parent is the semantic parent of this node. It is where non-UI structure should be resolved, like looking for the DataContext, a Navigation, or other semantic item.

FindNodeByName(Selector, Predicate<Node> (Node)) : Node uno

Finds the first node with a given name that satisfies the given acceptor. The serach algorithm works as follows: Nodes in the subtree are matched first, then it matches the nodes in the subtrees ofthe ancestor nodes by turn all the way to the root. If no matching node is found, the function returns null.

IsRootingStarted : bool uno

Whether rooting of this node has started. Note that even if this property returns true, rooting may not yet be completed for the node. See also IsRootingCompleted.

Name : Selector ux

Run-time name of the node. This property is automatically set using the ux:Name attribute.

OnRooted uno

If you override OnRooted you must call base.OnRooted() first in your derived class. No other processing should happen first, otherwise you might end up in an undefined state.

Inherited from PropertyObject

Inherited from object

Attached UX Attributes

Items (attached by Each) : object ux

The item collection that will be used to populate this visual.

MatchKey (attached by Each) : string ux

Shorthand for setting the MatchKey property on the implicit Each created when using the Items attached property.

Column (attached by Grid) : int ux

The index of the column the element occupies while in a Grid. If not set, the grid will place the element in a cell according to its position in the child list.

Row (attached by Grid) : int ux

The index of the row the element occupies while in a Grid. If not set, the grid will place the element in a cell according to its position in the child list.

GlobalKey (attached by Resource) : string ux

The ux:Global attribute creates a global resource that is accessible everywhere in UX markup.

Implemented Interfaces

IScriptObject uno

Interface for objects that can have a script engine representation