Yu-Hsun Lin (Pou)
2014/04/24 - Global Community Webcast
Event
Tiles, Badges, Toastsand Action Center
[email protected]://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
Top Related