When you want to keep your user interface small and the information to present large you can use the ScrollViewer to contain the information.
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.
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.
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.
|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.
Both scrollbars can be reached with:
You can then set the scrollbar position with
scrollViewer.horizontalBar.value. This value must be between 0 and 1.
When you add a TextBlock of a given size to a scroll viewer both horizontal and vertical scroll bars are shown as needed.
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
reSizeToFit as follows
myTextBlock.textWrapping = BABYLON.GUI.TextWrapping.WordWrap; myTextBlock.resizeToFit = true;