Design and Development of Windows 8 Metro-settings and preferences (1)

In this experiment, you will add the "about" and "Preferences" commands to the settings pane of the contoso cookbook. You can display a simple user preference that you can use to switch between check boxes. You can also use roaming settings to store this preference, so that it can be accompanied by users wherever they go.

 

Add "about" Page

In this exerciseOntoso cookbookAdd a simple"About"Page.

Task1-IsOnsettingsEvent addition ProcessingProgram

DirectionMetroThe first step to add commands in the settings pane isWinjs. application. onsettingsEvent registers a handler. This event is triggered whenever the display settings pane is displayed. The event handler can add commands to the settings menu.

1.Open your experiment5MediumVisual StudioCompleted inContosocookbookProject. If you have not completed the experiment5Alternatively, you can find the complete version of the experiment in the raw material if you want to start with the reference copy.

2.OpenDefault. jsAndApp. StartAdd the following statement before:

 

 

Javascript

App. onsettings = function (eventobject ){

Eventobject. Detail. applicationcommands = {

// Add an about command

"About ":{

Href: "/html/about.html ",

Title: "about"

}

}

 

Winjs. UI. settingsflyout. populatesettings (eventobject );

};

3.PressF5Start the application.

4.Show the super button bar and select"Settings".

5.The verification settings pane contains"About"Command,1.

Figure1

With"About"Command settings pane

6.Click"About"What will happen to the command?

7.ReturnVisual StudioAnd stop debugging.

 

 

Task2-AddAbout.htmlWebpage Control

The event handler you added in the previous Task added a"About"Command, and point it/Html/about.htmlBut the page does not exist until now. This is why you choose"About. Let's solve this problem by adding a new webpage control to the project.

1.InSolution ExplorerRight-clickHtmlFolder, andAdd-new item"Command to addAbout.htmlWeb page control,2.

Figure2

Add webpage Control

2.SetAbout.cssMove to projectCSSFolderAbout. jsMove to projectJSFolder.

3.OpenAbout.htmlChange the pathAbout.cssAndAbout. jsTo reference their new locations:

Html

<Link href = "/CSS/about.css" rel = "stylesheet">

<Scriptsrc = "/JS/about. js"> </SCRIPT>

4.SetIDForAbout Fragment"DivReplace with the followingCode:

Html

<Div id = "about" data-win-control = "winjs. UI. settingsflyout" data-win-Options = "{width: 'narrow'}">

<Div class = "settingspane">

<Div class = "Win-label">

<Button onclick = "winjs. UI. settingsflyout. Show ()" class = "Win-backbutton">

</Button>

<SPAN class = "settingstitle"> about </span>

</Div>

<Article class = "settingscontent">

<H2> contoso cookbook </H2>

<H4> trial version </H4>

</Article>

</Div>

</Div>

Note:DivOnId = "about"Attribute is critical because it maps back to1PassApp. onsettingsIn the HandlerDetail. applicationcommands"About". The current page tells the user that this isContosocookbook. In the lab8, You will useWindows RuntimeStorageAPISimulate the purchase of an application. Once the purchase is complete, replace the trial version with the license information.

5.OpenAbout. CSAnd add the followingCSSClass:

CSS

. Settingspane {

Margin-top:36px;

Margin-left:48px;

}

 

. Settingstitle {

Margin-left:36px;

}

 

. Settingscontent {

Margin-top:24px;

}

 

 

Task3-Test Results

Test the changes now.MetroThe style of the page.

1.PressF5Run the application.

2.Show the super button bar and select"Settings".

3.Select"About"Command.

4.Confirm that the page appears,3.

Figure3

Contoso cookbookAbout the page

5.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