When we have scrolling content, we frequently want some sort of visual indication of where we are within the context of that content, like a scrollbar. Storyboard doesn't dictate what type of visual presentation is used for this tracking, but we'll describe here how you might make a scrollbar using a simple fill render extension. This technique can be readily applied to any other visual representation and is demonstrated in the> as well as the
The first thing that we want to consider is what information we want to convey to the user. For a simple scrollbar we will use a proportional measurement that represents the percentage that our
positionPercent = (-1 * objectYOffset) / (contentTotalHeight - objectHeight) Here, we'll assumed a vertically scrolling list, but the same principle applies for horizontally scrolling. With this
positionPercent we have a representation of where our viewport is with respect to the total content available.
In order to apply this formula to synchronize a scrollbar representation with the content as it scrolls, we need to have a notification of the scroll change. This can be accomplished by making an event association with a variable as described in Triggering Events on Variable Changes. The variable that we want to bind an event to will be the internal variable
grd_yoffset on the model object that we are scrolling.
With an event bound to an action, we might structure a synchronization function that might look something like the following:
-- Assume we are synchronizing a table named Layer.MyTable function CBSyncScrollIndicator() -- These values could be cached, only yoffset would be changing normally local tableInfo = gre.get_table_attrs ("Layer.MyTable", "height", "yoffset", "rows") local cellInfo = gre.get_table_cell_attrs("Layer.MyTable", 1, 1, "height") local totalHeight = tableInfo.rows * cellInfo.height local positionPercent = (-1 * tablInfo.yoffset) / (totalHeight - tableInfo.height) -- Now apply the position_percent to your scrollbar object end