Yu-Hsun Lin (Pou)

2014/04/24 - Global Community Webcast

Event

Tiles, Badges, Toastsand Action Center

poumason@live.comhttp://www.dotblogs.com.tw/pou/

Introduction to Tiles and Notifications

•How tiles enhance the Windows experience

• Tile template examples

• Tile terminology

• Sending notifications

•Managing notifications with the action center

This module…

Tiles: What Are They Good For?

Tiles are a defining Windows experience

Tiles across all screens

Initial interaction point for apps

Live tiles drive user engagement

Essential piece of the Windows

brand

The alternative to a “good tile” is not “no tile”

Users and Their Tiles

Full functionality tiles are #1

driver

in high app ratings

Secondary tiles a highly

sought-after feature among

Windows Phone users

Tile Types

Windows 8.1Tile Templates

Windows PhoneTile Templates

Tiles are cross-platform

40 cross platform tile templates available Full list: http://aka.ms/TileTemplates

Tile Terminology

PeekSecond part of an animated tile

Windows Phone

Peek Second part of an animated tile

Tile Terminology

Windows Phone

Peek Second part of an animated tile

Block Large number text

Tile Terminology

Windows

Phone

Peek Second part of an animated tile

Block Large number text

Image Collection

Tile Terminology

Windows Phone

My First Tile - appxmanifest

Set up primary tile in the Visual Assets section

How to customize Start screen tiles for desktop apps (Windows Runtime apps)

My First Tile

Square (71 x 71)

Square (150 x

150)

Wide (310 x

150)

Large (310 x

310)

Every size can set scale range: Scale 100, Scale 140, Scale 240.

My First Tile - BadgesBadge Phone Window

s

1-99

alert

attention

activity

available

away

busy

unavailable

newMessage

paused

playing

error

alarm

Badges can be:

Numbers

GlyphsWindows

Phone

Tile & Badge Template Sample

<tile> <visual version="2"> <binding template="TileSquare150x150PeekImageAndText01"> <image id="1" src="{image url}" alt="MyImage"/> <text id="1">One Sample Text</text> <text id="2">Two Sample Text</text> <text id="3">Three Sample Text</text> <text id="4">Four Sample Text</text> </binding> <binding> …… </binding> </visual></tile>

<badge version="1" value="alert" />

Tile XML

Badge XML Version 2 or 3 for Windows Phone-only

template

tile template catalog

Tile XML Schema

tile Base tile element, contains one “visual” element Defines one (1) tile template

visual Can contains multiple binding child elements, each of which defines a tile

binding Defines one (1) tile template

text Text used in the tile template.

image Image used in the tile template. Should match the size and shape image requirements for the template.

 

Tile Template Code

XmlDocument tileDoc = new XmlDocument();tileDoc.LoadXml("<my tile XML/>");

TileNotification myNewTile = new TileNotification(tileDoc);

TileUpdater myTileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();myTileUpdater.Update(myNewTile);

Demo: Creating Tiles Locally

Or… Use the NotificationExtensions

ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03();tileContent.TextHeadingWrap.Text = "Wide tile notification";

ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText02();tileContent.TextbodyWrap.Text = "Square tile notification";tileContent.SquareContent = squareContent;

TileNotification newTile = new TileNotification(tileContent.CreateNotification());TileUpdateManager.CreateTileUpdaterForApplication().Update(newTile);

Quickstart: Using the NotificationsExtensions library in your code (Windows Runtime apps using C#/VB/C++ and XAML)

http://www.nuget.org/packages/windows8.notifications

NotificationsAlways On Apps

Notifications

Lots of ways to display notifications

Tile ToastBadge

Raw(background

task)arbitrary

string

Toast Notifications

Enable toast in manifest

Send a toast notification

User taps on toast notification to launch app

<toast> <visual> <binding template="ToastText02">

<text id="1">headline text</text> <text id="2">body text</text>

</binding> </visual></toast>

Activated, Dissmiss, Failed

Toast Rendering

Windows Phone

Notifications

Lots of ways to send notifications

Scheduled

- Set tile template and time

Periodic

pull from URL every half hour / hour / 6 hours / 12 hours / day.

Local

Update from within application (foreground or background)

Push

Using WNS Push Services

ScheduledTileNotificationScheduledToastNotification

Scheduled updates

var scheduleToast = new ScheduledToastNotification( xmlDoc, DateTimeOffset.UtcNow + TimeSpan.FromDays(1.0) );var toastNotify = ToastNotificationManager.CreateToastNotifier();toastNotify.AddToSchedule(scheduleToast);

System Schedule

Queue

My App

Background Task

Scheduled notification

API

HTTP request for XML payloadPeriodic updates

Tile and Badge Updater APIs

My App

Background Task

Windows Services

System process 30m – 24 hour

frequency

Developer

service

var periodic = TileUpdateManager.CreateTileUpdaterForApplication();Uri myTileFeed = new Uri("http://mysite.com/tileRSS.xml");periodic.StartPeriodicUpdate(myTileFeed, PeriodicUpdateRecurrence.Hour);

Windows System Services

Periodic updates (the easy way)

Open Package.appxmanifest

<tile> <visual version="2"> <binding template="TileSquare150x150Text04" fallback="TileSquareText04"> <text id="1">Hello world!</text> </binding> </visual> </tile>

Local Updates

Tile and Badge Updater APIs

Toast APIs

My App

Background Task

BadgeNotification newBadge = new BadgeNotification(badgeDoc);BadgeUpdater update = BadgeUpdateManager.CreateBadgeUpdaterForApplication();update.Update(newBadge);

WNS Platform Options

Notification type

Scheduled

Local Periodic Push

Tile ✔ ✔ ✔ ✔

Badge ✔ ✔ ✔

Toast ✔ ✔ ✔

Raw ✔

Notification Queueing

Tiles can cycle notifications

Up to five (5) notifications in queue

Can replace tiles in the queue

Set expirations for tiles in queue

Support local, scheduled, push notifications and periodic updates

Push NotificationsOne Push For All Devices

Windows Notification Service

One service across Windows devices

One process to register an app for push

One tile template to push to Windows & Phone apps

WNS – Push Architecture

1. Request Channel URI

2. Register with your Cloud Service

3. Authenticate & Push Notification

Windows Phone 8.1

Windows Notification

Client Platform

My Windows Phone App

My Developer Service

Windows Push Notification

Service

1

2

3

3

Setting Up An App For Push

Setting Up An App For Push

Setting Up An App For Push

Setting Up An App For Push

Setting Up An App For PushGet Channel URL

void gotNotification(PushNotificationChannel sender, PushNotificationReceivedEventArgs args){ Debug.WriteLine(args.NotificationType.ToString());}

var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();SaveUriForNotificationService(channel.Uri); channel.PushNotificationReceived +=channel_PushNotificationReceived;

Sending Push Notifications

Sample Project for Push Notifications[URL for notification sample service project, visible at http://pushtestserver.azurewebsites.net/wns/ ]

Use Azure Notification Hub

Cross device notifications

http://aka.ms/notifyhub

Notifications Simulation Engine

http://msdn.microsoft.com/en-us/windows/ Login your windows live account

Create a application

Open the services Click online service get the application setting

Copy SID and Application identify

Options Add SID/Application identify to Azure Mobile Service Or 3rd Server

How get WNS

Demo: Push Notification Simulation

Action Centermanaging your notification space

Action Center

20 Notifications per app

Persistent notifications for 7 days (or shorter)

Users can

- “chase” (tap) a notification (which removes the notification)

- remove a group of notifications

- remove all notifications

Available on Phone only

Action Center Management APIs

Manage app notifications

Developers can Remove one or many notifications Tag and group notifications Replace a notification with a new one Set an expiration on notifications Send “Ghost Toast” notifications (only show up in the notification center)

Add Context To Notification

Example

ToastNotification toasty = new ToastNotification(doc);toasty.Tag = "Windows Phone";toasty.Group = "JumpStart";

Set Expiration for Notification

ToastNotification toasty = new ToastNotification(doc);toasty.Tag = "Windows Phone";toasty.Group = "JumpStart";toasty.ExpirationTime = (DateTimeOffset.Now + TimeSpan.FromHours(2));

Example

Set “Ghost Toast” (suppress toast popup)

ToastNotification toasty = new ToastNotification(doc);toasty.Tag = "Windows Phone";toasty.Group = "JumpStart";toasty.ExpirationTime = (DateTimeOffset.Now + TimeSpan.FromHours(2));toasty.SuppressPopup = true;

Example

Remove Notifications

ToastNotificationHistory tnh = ToastNotificationManager.History;tnh.Remove("WindowsPhone");tnh.RemoveGroup("JumpStart");

Example

Demo: Action Center In Action

References

Tiles, badges, and notifications (Windows Runtime apps)

Working with tiles, badges, and toast notifications (Windows Runtime

apps using JavaScript and HTML)

How to customize Start screen tiles for desktop apps (Windows Runti

me apps)

Quickstart

: Creating a default tile using the Microsoft Visual Studio manifest edit

or (Windows Runtime apps) (Windows)

Quickstart

: Sending a badge update (Windows Runtime apps using C#/VB/C++

and XAML)

References

Quickstart

: Pinning a secondary tile (Windows Runtime apps using C#/VB/C++ a

nd XAML)

Quickstart

: Sending a tile update (Windows Runtime apps using C#/VB/C++ and

XAML)

How to schedule a tile notification (Windows Runtime apps using C#/V

B/C++ and XAML)

How to schedule a toast notification (Windows Runtime apps using C#

/VB/C++ and XAML)

References

Quickstart

: Setting up periodic notifications (Windows Runtime apps using C#/V

B/C++ and XAML)

Using the notification queue (Windows Runtime apps)

Thank you for listeningSample code： http://1drv.ms/1mgCrNW