HTML and CSS Reference
In-Depth Information
case Windows.UI.ViewManagement.ApplicationViewState.snapped:
detailView.layout = new WinJS.UI.ListLayout();
masterView.layout = new WinJS.UI.ListLayout();
break;
case Windows.UI.ViewManagement.ApplicationViewState.filled:
case Windows.UI.ViewManagement.ApplicationViewState.fullScreenLandscape:
case Windows.UI.ViewManagement.ApplicationViewState.fullScreenPortrait:
detailView.layout = new WinJS.UI.GridLayout();
masterView.layout = new WinJS.UI.GridLayout();
break;
}
}
The grid layout gives components a multicolumn layout where items are displayed vertically up
until the bottom is reached and they then wrap to the next column. In snapped mode, when the
horizontal space is limited, you are better off choosing a list layout where a single column is created.
Figure 8-14 shows the new look-and-feel of the Video application. In this way, the Video application is
fully usable regardless of the view state.
FIGURE 8-14 The new Video application in snapped and filled modes.
Early on, you set the width of the video player to over 400 pixels. As you can see in Figure 8-14,
when the application is snapped the player is still entirely visible. This is the effect of one more
changes: adding a media query for the snapped state.
@media screen and (-ms-view-state: snapped) {
#player-container {
height: 225px;
width: 300px;
}
}
Search WWH ::




Custom Search