UserGuide

Mobile Scrollable Area

From Xojo Documentation

A scrollable area allows users to scroll a container that otherwise has more content than can fit in the visible area. When users interacts with content in the scrollable area, horizontal or vertical scroll indicators briefly display to show users that they can scroll around to reveal more content. Other than the transient scroll indicators, a scrollable area has no visual appearance.

Refer to MobileScrollableArea in the Language Reference for the full list of events, properties and methods.

Properties

Container - This is a Container control to display in the scrollable area. If the container has more content than can fit in the view, the user will be able to scroll to see it.

Usage

To use a scrollable area, drag the control from the Library to the layout. In the Inspector choose an existing Container Control for the Content property. Use the Container property to get a reference to the Container control at runtime so that you can call methods on it (or access its controls). For example:

// Get reference to container control
Var cc As MyContainer
cc = MyContainer(ScrollableArea1.Container) // cast to MyContainer

// Now you can call methods on it
cc.UpdateData

There may be situations where you need to dynamically alter the size of the Container Control at runtime, perhaps because the size of its content has increased. You can do this on iOS by adding a Height constraint to the Content area like this:

Var newHeight As Integer = 2000

Var contentConstraint As iOSLayoutConstraint
contentConstraint = New iOSLayoutConstraint(ScrollableArea1.Content, _
iOSLayoutConstraint.AttributeTypes.Height, _
iOSLayoutConstraint.RelationTypes.Equal, _
Nil, _
iOSLayoutConstraint.AttributeTypes.None, _
1, _
newHeight)

Self.AddConstraint(contentConstraint)

Example Projects

  • Examples/iOS/Controls/ScrollableArea

See Also

MobileScrollableArea class; UserGuide:Mobile Container topic