How To

Use the Scroll Viewer


The Scroll Viewer

When you want to keep your user interface small and the information to present large you can use the ScrollViewer to contain the information.

ScrollViewer.

It consists of vertical and horizontal scroll bars and a viewing area. The information you want to present is created as a control that you add to your scroll viewer and is shown in the viewing area. If all the information control fits inside the scroll viewer no scroll bars will be shown.

Creating the Scroll Viewer

The scroll viewer base is a rectangle container holding the scroll bars and the viewing area. You create it with

var myScrollViewer = new BABYLON.GUI.ScrollViewer();

and add it to an advanced texture as usual.

var myAdvancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
myAdvancedTexture.addControl(myScollViewer);

You can then create your control or container of controls to add to the scroll viewer using the addControl method.

myScrollViewer.addControl(myControl);

The default setting for width and depth of the scroll viewer is 100% of the parent control.

The following table shows the additional properties of a scroll viewer.

Property Type Default Comments
barColor string grey Foreground color of the bar and color of the thumb
barBackground transparent 0 Background color of the bar

NOTE All the padding values for the scroll viewer are set as 0. Any padding should be set on the control added to the scroll viewer.

Scrollbars

Both scrollbars can be reached with:

  • horizontalBar
  • verticalBar

You can then set the scrollbar position with scrollViewer.horizontalBar.value. This value must be between 0 and 1.

Adding an Adjustable TextBlock Window

When you add a TextBlock of a given size to a scroll viewer both horizontal and vertical scroll bars are shown as needed.

Contained TextBlock

However quite often you need to present text fitting the width of the viewing window and scrolling for the height. This is achieved by setting the textWrapping and reSizeToFit as follows

myTextBlock.textWrapping = BABYLON.GUI.TextWrapping.WordWrap;
myTextBlock.resizeToFit = true;

Adjusting TextBlock

Further reading

How To Use the Selection Panel Helper
How To Use Babylon GUI
How To Use Babylon GUI3D