HTML and CSS Reference
In-Depth Information
Figure 4-1. Adapting the app layout using CSS media queries
I have shown the snapped view next to an empty panel, but usually there would be another
application occupying this space. Notice that Windows adapts the Metro structural elements
automatically, such as removing the labels from AppBar buttons in the snapped layout.
Snapping and Filling with JavaScript
You can do a surprising amount to adapt to different layouts using just CSS, but there comes a
point where you need to be able to adapt in JavaScript as well. The Windows.UI.ViewManagement
namespace defines an object called ApplicationView that provides details about the current lay-
out and provides a simple mechanism for trying to change it. To demonstrate this feature, I have
modified the displayListItems method defined in my ui.js file, as shown in Listing 4-2.
Listing 4-2. Adapting to Layouts Using JavaScript
displayListItems: function () {
var templateElement = document.getElementById("itemTemplate");
var targetElement = document.getElementById("itemBody");
WinJS.Utilities.empty(targetElement);
var list = ViewModel.UserData.getItems();
for (var i = 0; i < list.length; i++) {
templateElement.winControl.render(list.getAt(i), targetElement);
}
ViewModel.State.bind("selectedItemIndex", function (newIndex) {
var children = WinJS.Utilities.children(targetElement).
 
Search WWH ::




Custom Search