MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Content goes here
This is really all you ever see with the ViewBox as it has no other options or properties, no methods,
and no events—very simple! Note also that because the ViewBox is just a control, you can use it for any
fixed aspect-ratio content in an otherwise adaptive layout; it’s not only for the layout of an entire page.
To set the reference size of the ViewBox—the dimensions against which you’ll write the rest of your
code—simply set the width and height styles of the child element in CSS. For example, to set a base size
of 1024x768, we’d set those properties in the rule for the fixedlayout class:
.fixedlayout {
width: 1024px;
height: 768px;
}
Once instantiated, the ViewBox simply listens for window.onresize events, and it then applies a CSS
2D scaling transform to its child element based on the difference between the reference size and the
actual size. This preserves the aspect ratio. This works to scale the contents up as well as down.
Automatic letterboxing or sidepillars are also applied around the child element, and you can set the
appearance of those areas (really any area not obscured by the child element) by using the win-viewbox
class. As always, scope that selector to your specific control if you’re using more than one ViewBox in
your app, unless you want styles to be applied everywhere.
The basic structure above is what you get with a new app created from the Fixed Layout App project
template in Visual Studio and Blend. As shown here, it creates a layout with a 1024x768 reference size,
but you can use whatever dimensions you like.
The CSS for this project template reveals that the whole page itself is actually styled as a CSS flexbox
to make sure the ViewBox is centered, and that the fixedlayout element is given a default grid:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
-ms-flex-align: center;
-ms-flex-direction: column;
-ms-flex-pack: center;
display: -ms-flexbox;
}
.fixedlayout {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
255