Used to navigate contents that are larger than the available size.
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
<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.
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.
Alignment of the child content influences the
MaxScroll values as well as the starting
For example a
Bottom aligned element will start with the bottom of the content visible (aligned to the bottom of the
MinScroll will be negative, as the overflow is to the top of the
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>
LayoutRole=Standard are not considered when retaining the visual consistency. The
LayoutMode property can be used to adjust this behavior.
- Fuse.Controls.ScrollView 2.0.0-beta.9
Interface of ScrollView
Inherited from ScrollViewBase
Obtain scroll position needed to scroll to the center of the Visual.
Scroll to an absolute position (in points).
Scrolls to a relative target position.
Scroll to a relative position (range 0..1 over the full scrolling range).
KeepFocusInView : bool ux
By default a child with focus will be scrolled into view. Set
false to disable this behavior.
Specifies how ScrollPosition is modified when the control gets a new layout.
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.
The maximum scroll position in points.
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.
The minimum scroll position in points.
Motion : MotionConfig ux
The animation and scrolling behavior of a
ScrollView can be configured using ScrollViewMotion.
The relative position of the
ScrollView, from 0 at
MinScroll, to 1 at
ScrollPosition : float2 ux
Raised whenever the scroll position changes. This includes the aboslute position, the relative position and overflow/snapping position changes.
Seek to an absolute position (in points). This bypasses the scrolling animation.
Seek to a relative position (range 0..1 over the full scrolling range). This bypasses the scrolling animation.
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
Appearance : object uno
Background : Brush ux
CreateNativeView : IView uno
GraphicsVisual : Visual uno
NativeView : IView uno
Inherited from Element
ActualAnchor : float2 uno
ActualPosition : float2 uno
ActualSize : float2 uno
The Alignment of the
Determines how the aspect ratio is maintained in a situation when it violates the min or max sizing constraints.
BoxSizing : BoxSizingMode ux
The manner in which the size and position of the element is calculated.
CachingMode : CachingMode ux
CalcRenderBounds : VisualBounds uno
ClipToBounds : bool ux
Clips the child elements to the bounds of this element visually.
HitTestMode : HitTestMode ux
Specifies how hit tests should be performed on this element.
IsPointInside(float2) : bool uno
LimitHeight : Size ux
The height limit for an element using
LimitWidth : Size ux
The width limit for an element using
TreeRenderer : ITreeRenderer uno
Visibility : Visibility ux
The Visibility of the
Inherited from Visual
AbsoluteViewportOrigin : float2 uno
AbsoluteZoom : float uno
Begins removing a given node, playing all RemovedAnimations before actual removal.
Begins removing a given visual, playing all RemovedAnimations before actual removal.
Requests that this visual be brought into the visible are of the screen. Typically a containing
ScrollView will scroll to ensure it is visible.
Brings the given child to the front of the Z-order. In UX markup, use the BringToFront trigger action instead.
ChildCount : int uno
The number of child nodes of this visual.
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.
FindTemplate(string) : Template uno
FindViewport : IViewport uno
FirstChild<T> : T uno
GetZOrderChild(int) : Visual uno
HasChildren : bool uno
HasPendingRemove : bool uno
HasVisualChildren : bool uno
Whether this visual has any visual child nodes.
HitTestBounds : VisualBounds uno
IfSnap(float2) : float2 uno
IfSnapDown(float2) : float2 uno
IfSnapUp(float2) : float2 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.
Indicates the composition of the visual has changed, but that the visual drawing itself is still valid (for example a position change).
IsContextEnabled : bool uno
Whether this node is in an enabled context.
The context is disabled if one of the ancestor nodes have IsEnabled set to
IsInteracting : bool uno
IsLocalVisible : bool uno
Returns whether this visual is visible without concern for whether an ancestor visual is hidden or collapsed.
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.
LastChild<T> : T uno
The layer this visual belongs to in the Parent container.
LayoutRole : LayoutRole ux
Describes how this visual participates in layout.
LocalBounds : Box uno
LocalToParent(float2) : float2 uno
Converts a coordinate from the local space into the parent space.
LocalTransform : float4x4 uno
OnInvalidateRenderBounds : bool uno
Remove(Node) : bool uno
The list of resources defined at this node.
Sends the given child to the back of the Z-order. In UX markup, use the SendToBack trigger action instead.
Snap(float2) : float2 uno
SnapDown(float2) : float2 uno
SnapToPixels : bool ux
Whether to snap the result of layout of this visual to physical device pixels.
SnapUp(float2) : float2 uno
Converts a coordinate from the parent space into the local space.
ValidFrameCount : int uno
ViewHandle : ViewHandle uno
VisualChildCount : int uno
The number of child visuals of this visual.
VisualContext : VisualContext uno
WindowToLocal(float2) : float2 uno
WorldPosition : float3 uno
WorldTransform : float4x4 uno
Inherited from Node
Bindings : IList of Binding ux
The list of bindings belonging to this 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.
FindByType<T> : T 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.
GetNearestAncestorOfType<T> : T uno
IsRootingCompleted : bool uno
Whether rooting for this node is completed. Returns false if unrooting has started.
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.
Run-time name of the node. This property is automatically set using the ux:Name attribute.
NextSibling<T> : T uno
Returns the next sibling node of the given type.
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.
The parent Visual of this node. Will return null if the node is not rooted.
PreviousSibling<T> : T uno
Returns the next sibling node of the given type.
Properties : Properties uno
A linked list holding data for extrinsic properties.
Remove(Binding) : bool uno
SourceFileName : string ux
SourceLineNumber : int ux
SubtreeToString : string uno
Inherited from PropertyObject
Inherited from object
Equals(object) : bool uno
GetHashCode : int uno
Attached UX Attributes
ColorScheme (attached by Resources) : ColorScheme ux
Specifies how an element is docked while inside a DockPanel
Shorthand for setting the
MatchKey property on the implicit
Each created when using the
Items attached property.
Edge (attached by EdgeNavigation) : NavigationEdge ux
LayoutMaster (attached by LayoutControl) : Element ux
Gained (attached by AttachedFocusMembers) : FocusGainedHandler (object, FocusGainedArgs) ux
Called when a Visual receives input focus.
IsFocusable (attached by Focus) : bool ux
Lost (attached by AttachedFocusMembers) : FocusLostHandler (object, FocusLostArgs) ux
Called when a Visual loses input focus.
Clicked (attached by Clicked) : ClickedHandler (object, ClickedArgs) ux
Tapped (attached by Tapped) : TappedHandler (object, TappedArgs) 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.
ColumnSpan (attached by Grid) : int ux
The number of columns this element occupies in a Grid. Defaults to 1.
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.
The number of rows this element occupies in a Grid. Defaults to 1.
KeyPressed (attached by AttachedKeyboardMembers) : KeyPressedHandler (object, KeyPressedArgs) ux
Called when a Visual receives a key press event while having input focus. On mobile devices, keyboard input only applies to physical buttons (such as BackButton), not soft keyboards.
KeyReleased (attached by AttachedKeyboardMembers) : KeyReleasedHandler (object, KeyReleasedArgs) ux
Called when a Visual receives a key release event while having input focus. On mobile devices, keyboard input only applies to physical buttons (such as BackButton), not soft keyboards.
FillPadding (attached by Layout) : bool ux
LayoutMasterMode (attached by LayoutMasterAttr) : LayoutMasterMode ux
Determines how the layout of the master element is used to control the size of this one.
Activated (attached by Activated) : PulseHandler (object, EventArgs) ux
Adds a handler for when the page is Activated
Deactivated (attached by Deactivated) : PulseHandler (object, EventArgs) ux
Adds a handler for when the page is Deactivated
Navigation (attached by Navigation) : IBaseNavigation ux
Page (attached by NavigationPageProperty) : Visual ux
Transition (attached by NavigationControl) : NavigationControlTransition ux
Remove (attached by Navigator) : RemoveType ux
SwipeBack (attached by Navigator) : NavigatorSwipeDirection ux
IsPhysicsWorld (attached by World) : bool ux
Entered (attached by AttachedPointerMembers) : PointerEnteredHandler (object, PointerEnteredArgs) ux
Called when a pointer enters a visual.
Left (attached by AttachedPointerMembers) : PointerLeftHandler (object, PointerLeftArgs) ux
Called when a pointer leaves a visual.
Moved (attached by AttachedPointerMembers) : PointerMovedHandler (object, PointerMovedArgs) ux
Called when a pointer is moved on a visual.
Pressed (attached by AttachedPointerMembers) : PointerPressedHandler (object, PointerPressedArgs) ux
Called when a pointer is pressed on the visual.
Released (attached by AttachedPointerMembers) : PointerReleasedHandler (object, PointerReleasedArgs) ux
Called when a pointer is released on a visual.
WheelMoved (attached by AttachedPointerMembers) : PointerWheelMovedHandler (object, PointerWheelMovedArgs) ux
Called when a pointer wheel is moved on a visual.
Interface for objects that can have a script engine representation