Quickly build Windows 8 style apps 31-Build tiles

Original: Quick build Windows 8 style app 31-Build tile

Introduction

Tiles are one of the most important ways to attract users to use the app frequently. We can use tiles for better content in the app to show.

Another application tile is a core part of the application and most likely the most common part of the user, so use live tiles to entice users to use our app frequently!

This post focuses on how to create a basic tile (that is, the default tile) and how to update the tile with local notifications.

First, create a basic tile

The base tile can also be called the default tile. Usually we click on the basic tile to start or switch apps.

We can set the default static tile in the application manifest file, and the static tile is divided into two sizes:

Note: Both sizes of tiles can be dynamically updated. So how do we create the basic tiles in the app?

1. Create a Windows 8 store app;

2. Open the app manifest file (package.appxmanifest) and select the "Application UI" window;

3.

• Replace the default image with your own logo image path;
• Sets the short name of the app to appear on the tile. Note: The name cannot exceed 13 characters. If the name is too long, it will be truncated. Of course, we can choose to display the logo, the display name or both do not display;
• Select whether the text of the name uses a light or dark font (based on the background color);
• You can also set the background color, which is used to color other parts of your app, such as the button colors of the dialog box in any app, and the app details page in the Windows store;

So far, the basic tiles we've set up are done, and of course we can set up logos such as wide logos, small logos, store logos, and so on.

Second, local notification update tile

In fact, there are four ways to update the tile (you can refer to the option of notification delivery), and the application can use local notifications to update its tile, which is useful for applications that are running and where information is changed.

Applications can schedule tiles and Toast updates at precise points in time. In addition, the app can update the tile from the cloud when it's not running.

So we're updating tiles with local notifications?

1. Add a Namespace

   1:  using Windows.UI.Notifications;

   2:  using Windows.Data.Xml.Dom;

Where Windows.UI.Notifications contains the tile API.

2. Select the template and view the XML content

We can use the system-provided template Tiletemplatetypeto select a template for the application. Here is an example of a TileWideImageAndText01 template that requires an image and a text string.

   1:  XmlDocument tilexml = tileupdatemanager.gettemplatecontent ( TILETEMPLATETYPE.TILEWIDEIMAGEANDTEXT01);

Where the gettemplatecontent method retrieves a XmlDocument, the XML framework is as follows:

< Tile >

    < Visual >

        < binding Template = "TileWideImageAndText01" >

            < Image ID = "1" src ="" />

            < text ID = "1" ></ text >

        </ binding >

    </ Visual >

</ Tile >

3. Provide relevant text content

   1:  xmlnodelist tiletextattributes = tilexml.getelementsbytagname ("text");

   2:  "Hello!" Test Tile Update ~ ";

We first need to retrieve all the elements of the template named "Text". The TileWideImageAndText01 template contains only a single text string, and the code then assigns the string.

Note: You can wrap up to two lines in a string, so you should set the length of the string accordingly to avoid truncation.

4. Provide images

We first need to retrieve all the elements of the template named "Image". The TileWideImageAndText01 template contains a single image.

Note: Not all tile templates contain images, and some tile templates are text-only.

   1:  xmlnodelist tileimageattributes = tilexml.getelementsbytagname ("image");

Here we can get images from local images in the app's package, local storage of the app, or the web.

Note: In tile notifications that contain multiple images, images can use any combination of these images, and the image size in the template must be less than 200KB and pixels smaller than 1024x768. (Refer to: Tile and Toast image size)

• To use the local image in the application package:

   1:   ((XmlElement) tileimageattributes[0]). SetAttribute ("src""ms-appx:///assets/widelogo.png");

   2:   ((XmlElement) tileimageattributes[0]). SetAttribute ("alt""Red graphic");

• Use the app's local storage image:

   1:  ((XmlElement) tileimageattributes[0]). SetAttribute ("src""ms-appdata:///local/redwide.png");

   2:  ((XmlElement) tileimageattributes[0]). SetAttribute ("alt""Red graphic");

• Using images in the Web:

   1:  ((XmlElement) tileimageattributes[0]). SetAttribute ("src""http://www.contoso.com/redWide.png");

   2:  ((XmlElement) tileimageattributes[0]). SetAttribute ("alt""Red graphic");

5. Contains a square and wide version of the notification

First, when we send a notification, it is impossible to know whether the current application's tile status is square or wide. Therefore, it is best practice to include both square and wide versions when updating notifications.

A text-only square notification is defined with a text string used in wide-version notifications:

   1:  XmlDocument squaretilexml = tileupdatemanager.gettemplatecontent ( TILETEMPLATETYPE.TILESQUARETEXT04);

   2:  xmlnodelist squaretiletextattributes = squaretilexml.getelementsbytagname ("text");

   3:  squaretiletextattributes[0]. AppendChild (Squaretilexml.createtextnode ("Hello world! My very own tile notification "));

We then add a square tile to the load on the wide tile. Retrieves a binding element that defines a square tile in a square tilexml payload. Attaches the binding element as a sibling of the wide version tile.

   1:  ixmlnode node = Tilexml.importnode (Squaretilexml.getelementsbytagname ("binding" ) True);

   2:  tilexml.getelementsbytagname ("visual"). Item (0). AppendChild (node);

6. Create a notification

   1:  new tilenotification (tilexml);

7. Set Notification expiration date

By default, this tile and badge will not expire, but push notifications, periodic notifications, activation notifications expire after three days. Usually we set a reasonable expiration time.

Note: The tile content should be retained for no longer than the time when the content has relevance.

   1:  tilenotification.expirationtime = DateTimeOffset.UtcNow.AddSeconds (10);

8. Send Notifications

   1:  tileupdatemanager.createtileupdaterforapplication (). Update (tilenotification);

9. Clear the tile notification

If we set the notification expiration time, we do not need to show how to call the purge notification.

   1:  Windows.UI.Notifications.TileUpdateManager.CreateTileUpdaterForApplication (). Clear ();

Note: We cannot clear notifications through the cloud.

Although calling the clear method locally clears the tile regardless of the source of its notification, periodic notifications or push notifications can only update the tile to new content.

Finally achieve the effect:

• Square Notification:

• Wide-Version notifications:

For more information about tiles, refer to:

1. Create a superior tile experience (part 1th);
2. Create a superior tile experience (part 2nd);
3. APP tiles and Badges sample;

Quickly build Windows 8 style apps 31-Build tiles