Matthias Shapiro @matthiasshapAndy Wigley @andy_wigley

Tiles, Notifications and Action Center

Click to place personal photo

WinRT Apps +Silverlight

8.1

30 April 2014

Building Apps for Windows Phone 8.1 Jump Start

2

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 and Badges for Windows

4

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”

5

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

6

Tile Types

Tiles are cross-platform

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

Windows 8.1Tile Templates

Windows PhoneTile Templates

Tile Terminology

• PeekSecond part of an animated tile

Windows Phone

Tile Terminology

• PeekSecond part of an animated tile

• BlockLarge number text

Windows

Phone

Tile Terminology

• PeekSecond part of an animated tile

• BlockLarge number text

• Image Collection Windows Phone

My First Tile – appxmanifest

Set up primary tile in the Visual Assets section

My First Tile

Square (71 x 71)

(70 x 70)Square (150 x

150)Wide (310 x 150)

Large (310 x 310)

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

13

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);

Creating Tiles Locally

demo

Or… Use the NotificationExtensions

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

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);

18

NotificationsAlways on apps

Notifications

Lots of ways to display notifications

Tile ToastBadge

Raw(background

task)arbitrary

string

Toast NotificationsEnable toast in manifestSend 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>

Toast Rendering

Windows Phone

Notifications

Lots of ways to send notifications

Scheduled- Set tile template and time

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

LocalUpdate from within application (foreground or background)

PushUsing 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

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

29

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

Push Notification Simulation

demo

40

Action Centermanaging your notification space

Action Center – User Experience

20 Notifications per app

Persistent notifications for 7 days (or shorter)

Users can - “chase” (tap) a notification (removes it from the action center)- remove a group of notifications- remove all notifications

Available on Phone only (not Windows)

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)

Tags, Groups, And Replacing NotificationsMatching Tag and Group will trigger replacement

Scenario – hourly stock price

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

Set Expiration for NotificationScenario – Limited time price, time-sensitive information

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

Remove NotificationsScenario – sold out deal

Example

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

Set “Ghost Toast” (suppress toast popup)Scenario – low priority social notifications

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

Action Center in Action

demo

48

Go Forth And Notify!

©2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.