DRAG DROP
You are developing a Windows Store app that allows the user to write reviews for a
company’s products.
The product selection page must switch to a vertical list layout when the app is snapped.
You need to ensure that the product layout is updated.
Which four actions should you perform in sequence? (To answer, move the appropriate
actions from the list of actions to the answer area and arrange them in the correct order.)
Answer: See the explanation.
Explanation:
Box 1:Box 2:
Box 3:
Box 4:
Note:
Step 1: We need to set up the event handler for any Viewstate changes.
This got a lot simpler for the Windows 8 Release Preview. We need only add an event
listener to the window resize event like so:
window.addEventListener(“resize”, onViewStateChanged);
Step 2-3:
WhenonViewStateChangedruns it enumerates through all available viewstates and passes
the current view state to a custom function.
Example code:
When onViewStateChanged runs it enumerates through all available viewstates and passes
the current view state to a custom function I call showMenu.
function onViewStateChanged(eventArgs) {
var viewStates = Windows.UI.ViewManagement.ApplicationViewState, msg;
var newViewState = Windows.UI.ViewManagement.ApplicationView.value;
if (newViewState === viewStates.snapped) {
showMenu('snapped');
} elseif (newViewState === viewStates.filled) {
showMenu('filled');
} elseif (newViewState === viewStates.fullScreenLandscape) {
showMenu('landscape');
} elseif (newViewState === viewStates.fullScreenPortrait) {
//Currently not supported
}
Step 4: Finally handle the layout changes
* ApplicationViewState enumeration specifies the set of app view state changes that can be
handled.
The ApplicationViewState enumeration has these members.
A)FullScreenLandscape | fullScreenLandscape0
The current app’s view is in full-screen (has no snapped app adjacent to it), and has
changed to landscape orientation.
B) Filled | filled1
The current app’s view has been reduced to a partial screen view as the result of another
app snapping.
C) Snapped | snapped2
The current app’s view has been snapped.
D) FullScreenPortrait | fullScreenPortrait3
The current app’s view is in full-screen (has no snapped app adjacent to it), and has
changed to portrait orientation.
Reference: Handling Fullscreen, Snapped and Filled states in Windows 8 Metro Style apps
using CSS3 and JavaScript
