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.
From Babylon.js version 4.1 onwards it is possible to use an image for the thumb control and in the bars
The scroll viewer base is a rectangle container holding the scroll bars and the viewing area. You create it with or without a name.
var myScrollViewer = new BABYLON.GUI.ScrollViewer(); var myScrollViewer = new BABYLON.GUI.ScrollViewer("name");
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 scroll bar and color of the thumb|
|barBackground||string||transparent||Background color of the scroll bar and bottom right square|
|thumbLength||number||0.5||Proportion of thumb compared to scroll bar length (0 to 0.9)|
|barSize||number||20||Height of scroll 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.
In order to have images in the scroll bar you need to pass a name (can be empty string) and a parameter of true when creating the scroll viewer.
var myScrollViewer = new BABYLON.GUI.ScrollViewer("", true);
Additional properties are available
|thumbImage||GUI Image||none||Image used for the thumb; required for image scroll bars|
|barImage||GUI Image||none||Image for the scroll bars|
|thumbHeight||number||1||Proportion of thumb compared to bar height (0 to 1)|
|barImageHeight||number||1||Proportion of barImage compared to bar height (0 to 1)|
|scrollBackground||string||grey||background color of scroll bars excluding the bottom right square; useful behind a thin or transparent bar image|
You do not have to have a barImage.
The images for the vertical bar and thumb are rotated copies of those used for the horizontal bar and thumb. You may want to keep the image sizes small if memory is an issue in your project.
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;
The ScrollViewer accepts only ONE child control. If that single child is a textBlock, then you can modify its .text property (including \n linebreaks), to add/remove text content to/from that single textBlock.
The ScrollViewer also accepts a single CONTAINER (such as a stackpanel) for its single child. In that container, you may add/remove any type of control(s). For certain types of containers, you might choose to add
container.ignoreLayoutWarnings = true;, and you might need to set a non-percentage height value to certain children within the container(s).