WinJS.UI.ViewBox object
.png)
Scales a single child element to fill the available space without resizing it. This control reacts to changes in the size of the container as well as changes in size of the child element. For example, a media query may result in a change in aspect ratio.
Important
If you add more than one element to a ViewBox, only the first element is resized. If you must scale more than one element, wrap the set of elements in a DIV. See the example below for more information. Elements that do not scale, such as text, are not affected by the transforms used for the ViewBox.
Syntax
<div data-win-control="WinJS.UI.ViewBox"></div>
var object = new WinJS.UI.ViewBox();
Members
The ViewBox object has these types of members:
- Constructors
- Methods
- Properties
Constructors
The ViewBox object has these constructors.
| Constructor | Description |
|---|---|
| ViewBox | Initializes a new instance of the ViewBox control. |
Methods
The ViewBox object has these methods.
| Method | Description |
|---|---|
| addEventListener | Adds an event handler for the specified event. |
| dispose | Releases resources held by this ViewBox. Call this method when the ViewBox is no longer needed. After calling this method, the ViewBox becomes unusable. |
| forceLayout | Forces the ViewBox to update its layout. Use this function when making the ViewBox visible again after its style.display property had been set to "none". |
| removeEventListener | Removes an event handler that the addEventListener method registered. |
Properties
The ViewBox object has these properties.
| Property | Access type | Description |
|---|---|---|
Read-only |
Gets the DOM element that functions as the scaling box. |
Styling the ViewBox
CSS classes
To customize a ViewBox, you can define your own styles for these CSS classes (defined by the WinJS style sheets):
| CSS class | Description |
|---|---|
win-viewbox |
Styles the entire ViewBox control. |
Examples
The following HTML shows how to display multiple elements inside a ViewBox:
<div data-win-control="WinJS.UI.ViewBox">
<div id="containerDiv">
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
Requirements
Minimum WinJS version |
WinJS 1.0 |
Namespace |
WinJS.UI |