Design and Development of Windows 8 Metro-orientation, split screen, and semantic Scaling (2)

Split screen

Split screen allowedWindows 8The user splits the screen horizontally and runs twoMetroStyle applications. On the touch screen, drag your fingers gently from the left edge of the screen and temporarily stop when the split screen bar (a vertical split of the screen) is displayed, you can demonstrate the split screen function. (If there is no touch screen, you can pressWindows.) Figure10Displays the split screen effect in actual operations.Contoso cookbookOccupies the left-side320
Pixels, whileExplorerOccupies the remaining part. In this context,Contoso cookbookIs a "split screen application ",Internet
ExplorerIs "main application ". If needed, you can also drag the screen sharding column and switch the role of the application on the screen.

because Visual Studio
in CSS (generated for the Project) contoso cookbook already has some built-in split-screen behaviors. In this exercise, you will use simple changes to improve the user experience.

Note:To view the split screen function in the actual operation, you must set the screen resolution to no less1366 × 768Run on Pixel Devices
Metro.MetroWhy the team chooses
1366The minimum value is because it can be assigned to the split screen application.320
Shard with pixel width (many smartphones use the same width), which is allocated to the main application.1024Partition in pixels. The remaining pixels are occupied by the split pane. If you are running on a lower pixel screenProgram, Please useWindows SimulatorComplete this exercise and select at least
1366 × 768Pixel Analog Screen Resolution.Task1-run contosocookbook in split-screen mode

In this task, when the split screen is applied, you can view
Contoso cookbook.

1.First, pressF5SlaveVisual StudioTo start the application. Then return
WindowsStart the screen and start another application, suchInternet Explorer. Now, letInternet ExplorerOccupy the screen, place a finger at the left edge of the screen, and slowly drag the finger to the right. When
ContosocookbookWhen it appears below your finger, stop moving until the split screen bar appears. Then, lift your fingerContoso cookbookSplit the screen to a proper position.

2.WhenContoso cookbook
What is the difference between the start page and full screen display when only some screens are occupied?

3.On the start page, click a group name (for example,"ChineseTo view the Group details page in split-screen mode. What is the difference between it and full screen display?

4.Click a menu to view the project details page in split-screen mode. What is the difference between the page content and layout and full screen running?

5.ReturnVisual Studio
And stop debugging.

 

Task2-
Modify split-screen project details page

Visual Studio
The default split-screen layout is a good start, but you can further customize the layout if needed. InContoso cookbook
In the left-side navigation pane. Next let's modify the sub-screen project details page to include recipe ingredients.

1.OpenItemdetailpage.css
And find@ Media screen and (-MS-View-state:
Snapped).

Note:When the page is rotated to the vertical mode, the media query attribute exists.-MS-View-state: fullscreen-PortraitTo change the page layout. When the page is split, the media query attributes-MS-View-state: snappedYou can change the page layout.

2.Apply the highlighted changes to the clause. During screen splitting, most of the changes are to apply some new styles in the ingredients area of the page. Ingredients have been displayed before, because they are too far away from the right, so you cannot see them. By moving the ingredients to the second grid, the new style places the ingredients below the recipe image:

CSS

@ Media screen and (-MS-View-state: snapped ){

. Itemdetailpage
Section [role = Main] Article {

/*
Define a single column, vertically scrolling article in snapped mode .*/

-MS-grid-columns:
300px 1fr;

-MS-grid-row:
2;

-MS-grid-rows: 300px auto;

Display:
-MS-grid;

Height:
100%;

Margin-left:
20px;

Overflow-X:
Hidden;

Overflow-Y:
Auto;

Width:
300px;

}

 

. Itemdetailpage
Section [role = Main] Article. item-image {

/* Height: 140px; * // * Delete or comment out */

Width:
280px;

}

 

. Itemdetailpage
Section [role = Main] Article. item-content {

Padding-bottom:
60px;

}

 

. Itemdetailpagesection [role = Main] Article. Ingredients {

-MS-grid-row: 2;

-MS-grid-column:
1;

Margin-left:
0px;

Margin-top: 12px;

}

 

. Itemdetailpagesection [role = Main]
Article. ingredients. item-ingredients {

Margin-top: 4px;

}

 

. Itemdetailpage
Section [role = Main] Article. ingredients. item-ingredients. Ingredient {

Padding-bottom: 0px;

Font-size: 9pt;

}

}

3.Run againContoso cookbook
Application. Split it into screens so that it is on the left side of the screen, and next to another application. Then, go to the project details page and check that the sub-screen page shows the recipe ingredients,
11.

4.ReturnVisual StudioAnd stop debugging.

 

Note: ThisArticleThis is the script for Windows 8 online lab on msdn. It is for your reference only. If you want to experience the complete experiment, click the msdn online lab below

Http://msdn.microsoft.com/zh-cn/hh968278