Using Spark Panel with a Scroller

Due to some recent changes to SkinnableContainer, the way in which you add a Scroller to a Spark Panel has changed.

In the past you were able to wrap a Panel in a Scroller and get a scroll bar for the Panel. While this wasn’t the ideal approach, it worked and was a quick and dirty way to add a Scroller. Recently, a change was made such that SkinnableContainer no longer implements IViewPort and as a result, this old approach will no longer work.

The best practice for this scenario is to add a Scroller to the Panel skin. To do so you simply wrap the Panel’s contentGroup with a Scroller. One important thing to remember is that you have to set an explicit size on the Scroller so that it does not auto-resize. An easy way of doing so is either by setting width and height to100% or to use constraints and set top, bottom, left and right all to 0.

For example, to add scroll bars to a Panel you would modify the Panel skin so that it contained something like the following:

panelSkin5.png

Using this approach you will be able to make use of scroll bars on a Spark Panel