Windows 8 Hands-on Experiment Tutorial Experiment 7: Magnetic stickers and notifications

Hands-on experiment

Experiment 7: Magnetic stickers and Notices

September 2012

Brief introduction

Magnets are an important element in the application of the user experience in the Windows application store. When an application is installed, its tiles will be created at the Windows 8 Start screen. The tile (called the primary tile) is used as a shortcut to start the application. By default, the primary tile image is from the Logo.png file, which is included in the window Application store project by Visual Studio. The image size is 150x150 pixels, and it creates a square tile. However, by adding a 310x150 image to the project and specifying it as a "wide logo" in the application manifest, you can include a wide tile in your application at the same time. If the application supports wide tiles, the user can switch between a square tile and a wide tile on the start screen.

The Windows Store application also contains options for creating additional tiles, called secondary tiles. A secondary tile is used as a shortcut to start an application, while providing a predefined location and state for the application. Weather applications, for example, allow users to create secondary tiles for locations such as Redmond, Washington, and Georgia State Atlanta. The user can then start the application by simply clicking on the secondary tile and view the weather in Redmond or Atlanta.

You can create a secondary tile by using the Windows.UI.StartScreen.SecondaryTile class in the Windows runtime. Tile creation is usually initiated by the user, such as clicking on a command in the application bar. Applications that have the ability to create secondary tiles provide a number of parameters, including the Uniform Resource Identifier (URI) of the tile background image and a string containing the activation parameters. When an application starts from a secondary tile, the operating system passes the activation parameters to the application. These parameters provide initialization information for the application. For weather applications, the activation parameter may be just a zip code.

When a tile is created, it does not have to remain stationary. Windows application Store applications enjoy many dynamic and compelling ways to make the content of a tile by updating and pushing notifications. For example, an application can update the contents of a tile using the Windows.UI.Notifications.TileUpdater class. These updates can optionally be queued. When queues are enabled, the operating system rotates the latest five updates every few seconds, making the tiles fresh and vivid.

Of course the application needs to update the tiles using the Tileupdater class at run time. However, the tiles can even be updated when the application is not running (via Windows Notification Service, WNS). Imagine that weather applications need to display bad weather alerts even when they are not running. With Windows Notification Service, the weather application's server can send push notifications to update the tile on the start screen.

Push notifications are not limited to updating tiles. They can also eject a Toast note window containing user messages (for example, "bad weather detected in your area") and display a lock-screen reminder (numeric or predefined glyphs) on a tile. For example, imagine a mail application that alerts users to new messages in their inbox.

In this experiment you will get a first-hand experience of them by adding secondary tiles, push notifications, and toast to Contoso cookbook. At the end, the user will be able to view the updates and toast of the tiles through the Windows Notification Service by fixing the favorite recipes on the start screen with a secondary tile.

Translator Note: Toast refers to toast, bread block, here refers to the shape of bread-like rectangular area of the message displayed.

Goal

This experiment will show you how to:

Create a secondary tile.

Use push notifications to update the primary tiles.

Use scheduled toast to notify the user even if the application is not running.

System Requirements

You need the following software to complete this experiment:

Microsoft Windows 8

Microsoft Visual Studio 2012

Set up

You must perform the following steps to prepare the computer for this experiment:

1. Install Microsoft Windows 8.

2, install Microsoft Visual Studio 2012.

Practice

This hands-on experiment includes the following exercises:

1, combined (incorporate) auxiliary magnetic paste

2. Merge Push notification

3. Merger Plan Toast

Estimated time of completion of this experiment: 30-40 minutes.

Exercise 1: Combine auxiliary tiles

In this exercise you will add commands to the application bar of the item-detail page to allow users to use secondary tiles to fix favorite recipes at the start screen. You will also add logic to Contoso cookbook so that the appropriate recipes can be displayed when an application is activated from a secondary tile.

Task to change the application bar

The first task that needs to be done is to add a fixed command to the application bar. Then we write a handler for it to create a secondary tile, and click on the tile to display the currently displayed recipes.

1, open the Contosocookbook project that you completed in experiment 6 in Visual Studio. If you have not completed experiment 6 or want to start with a reference copy, you can find the completed version of the experiment in the start material.

2. Open Itemdetailpage.xaml and add the following statement at the end of the "Leftcommands" section of the application bar.

Xaml

<button x:name= "Pinrecipebutton" horizontalalignment= "left" style= "{StaticResource Pinappbarbuttonstyle}" Click= "Onpinrecipebuttonclicked"/>

3, open Standardstyles.xaml and navigate to the keyword Pinappbarbuttonstyle in the annotated style element. Uncomment so that the code looks like this.

Xaml

 <!--<style x:key= "Renameappbarbuttonstyle" targettype= buttonbase "basedon=" {staticres Ource Appbarbuttonstyle} "> <setter property=" Automationproperties.automationid "value=" RenameAppBarButton " > <setter property= "automationproperties.name" value= "Rename"/> <setter property= "Content" Va Lue= "& #xE13E;"/> </Style>--> <style x:key= "Pinappbarbuttonstyle" targettype= "Buttonba" Se "basedon=" {StaticResource Appbarbuttonstyle} "> <setter property=" Automationproperties.automationi D "value=" Pinappbarbutton "/> <setter property=" automationproperties.name "value=" Pin "/> ter property= "Content" value= & #xE141; "/> </Style> <!--<style x:key=" Musicinfoappbarbuttonsty Le "targettype=" buttonbase "basedon=" {StaticResource Appbarbuttonstyle} "

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/Programming/net/