S7 Tiles and Lock Screen Notifications.pdf

7/27/2019 S7 Tiles and Lock Screen Notifications.pdf

1/40

M7: Tiles and

Lock Screen Notifications

Andy Wigley | Microsoft Technical Evangelist

Rob Tiffany | Microsoft Enterprise Mobility Strategist


2/40

Target Agenda | Day 1

Module and Topic | 10-minute breaks after each session / 60-minute meal break

1a - Introducing Windows Phone 8 Application Development | Part 1 1b - Introducing Windows Phone 8 Application Development | Part 2

2 - Designing Windows Phone Apps

3 - Building Windows Phone Apps

4 - Files and Storage on Windows Phone 8

Meal Break | 60-minutes

5 - Windows Phone 8 Application Lifecycle

6 - Background Agents

7 - Tiles and Lock Screen Notifications

8 - Push Notifications

9 - Using Phone Resources on Windows Phone 8


3/40

Target Agenda | Day 2

Module and Topic | 10-minute breaks after each session / 60-minute meal break

10 - App to App Communication 11 - Network Communication on Windows Phone 8

12 - Proximity Sensors and Bluetooth

13 - Speech Input on Windows Phone 8

14 - Maps and Location on Windows Phone 8

15 - Wallet Support

16 - In App Purchasing

Meal Break | 60-minutes

17 - The Windows Phone Store

18 - Enterprise Applications in Windows Phone 8: Architecture and Publishing

19 - Windows 8 and Windows Phone 8 Cross Platform Development

20 Mobile Web


4/40

Tiles in Windows Phone 8

Local Tiles API

Updating Tiles from ShellTileSchedule

Updating Tiles from Background Agents

Lock screen notifications for Windows Phone

Lock screen background for Windows Phone

Module Agenda


5/40

12/4/2012

Tiles on

Windows Phone


6/40

Live Tiles on Windows Phone

Windows phone has the unique ability to provide the end user

glanceable access to the information they care most about, viaLive Tiles

Push Notifications offer developers a way to send timely

information

to their applications even when they are not running

In Windows Phone 7.1 and later, the Local Tiles API allows apps

to create and update tiles


7/40

Live Tiles 101

Shortcuts to apps

All apps have at least one tile, known as the default tile Created by user pinning your app to the Start Screen

Launch to app main page

Apps can create secondary tiles

Created programmatically

Launch to any page in your app

Static or dynamic

Tiles can be updated

Application code

Background agents

Push Notifications

In Windows Phone 7.1, only one tile size for third party apps

In Windows Phone 8.0, you can support three different tile sizes

7


8/40

Tile Templates and Tile Sizes

Windows Phone 8 supports three Tile

templates Flip flips from front to back (similar to the

WP 7.1 Tile template)

Iconic clean iconic layout designed to

reflect Windows Phone design principles

Cycle cycles through up to nine images

8


9/40

Tile Content

The Tile content is built up from a fixed set of data properties

Data Properties for Text elements, Count elements and Image elements Content that displays depends on the template you choose and the tile size

Not all elements need to be used

Not all elements used in all templates

WXGA resolution Image sizes

Automatically scaled for WVGA and 720p

9

Tile Size Flip and Cycle Images Ic

Small 159 x 159 pixels 159 x 159 pixels 110 x 11

Medium 336 x 336 pixels 336 x 336 pixels 202 x 20

Wide 691 x 336 pixels 691 x 336 pixels N/A


10/40

Flip Tile Template

Flips from front to back

Small size does not flip

Medium size is the same

as the WP7.1 tile template


11/40

Cycle Tile Template

Cycles between from 1 to 9 images

Small tile does not cycle


12/40

Iconic Tile Template

Displays a small image in the center of the Tile and is designed to reflect Wi

design principles


13/40

Primary and Secondary Tiles

Application Tile

Can be created only when user taps and holds the application name in the

Application List and then selects pin to start

Tile template and Properties are set initially in the Application Manifest

Template cannot be changed programmatically

Secondary Tile

Can be created only as the result of user input in an application

The application then uses the Create(Uri, ShellTileData) method to create aTile on Start

Because the UI will navigate to Start when a new secondary Tile is created,

only one secondary Tile can be created at a time


14/40

Defining the Application Tile

Define your images

The standard new project templates already containplaceholder images of the correct size

FlipCycleTile*.png used for the Flip and Cycle Tile

templates

IconicTile*.png used for the Iconic Tile templates

Replace these images with your own artwork


15/40

Defining the Application Tile in the Application Man

Double-click WMAppManifest.xml to open using the new Manifest Editor

On the Application UI tab, set the Tile Template, optional Title and Tile Imag


16/40

Demo 1: Application Tile


17/40


18/40

Creating Tilespublicstaticvoid SetTile(RecipeDataItem item, string NavSource)

{

FlipTileData tileData = newFlipTileData()

{//Front square data

Title = item.Title,

BackgroundImage = newUri("ms-appx:///background1.png", UriKind.Relative),

SmallBackgroundImage = newUri("ms-appx:///smallbackground1.png", UriKind.Relative),

//Back square data

BackTitle = item.Title,

BackContent = item.Ingredients,

BackBackgroundImage = newUri("ms-appx:///backbackground1.png", UriKind.Relative),//Wide tile data

WideBackgroundImage = newUri("ms-appx:///widebackground1.png", UriKind.Relative),

WideBackBackgroundImage = newUri("ms-appx:///widebackbackground1.png", UriKind.Relat

WideBackContent = item.Directions

};

// Create Tile and pin it to Start. Causes a navigation to Start and a deactivation of ou

ShellTile.Create(newUri("/RecipePage.xaml?DefaultTitle=FromTile",UriKind.Relative), til

}


19/40

Updating Tiles

// Find the Tile we want to update.

ShellTileTileToFind=ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("DefaultTitle=FromTile"));

// If the Tile was found, then update the Title.

if (TileToFind != null)

{

FlipTileDataNewTileData = newFlipTileData

{

Title = textBoxTitle.Text

};TileToFind.Update(NewTileData);

}


20/40

Updating the Application Tilepublicstaticvoid UpdateMainTile(RecipeDataGroup group)

{

//Get application's main tile application tile always first item in the ActiveTiles

//whether it is pinned or not

var mainTile = ShellTile.ActiveTiles.FirstOrDefault();

IconicTileData tileData = newIconicTileData()

{

Count = group.RecipesCount,

BackgroundColor = Color.FromArgb(255, 195, 61, 39),

Title = "Contoso Cookbooks",

IconImage =

newUri("ms-appx:///local/shared/shellcontent/newMedLogo.png", UriKind.Relati

SmallIconImage =

newUri("ms-appx:///local/shared/shellcontent/newSmlLogo.png", UriKind.Relati

WideContent1 = "Recent activity:",

WideContent2 = "Browsed " + group.Title + " group",

WideContent3 = "with total of " + group.RecipesCount + " recipes"

};

mainTile.Update(tileData);

}


21/40

Demo 2: Tile API

Create, Update, Delete


22/40

Updating Tiles From a Background Agent

In Windows Phone OS 7.0, only way of updating Live Tiles was from a Tile Sc

or from Push Notifications Tile Schedule needs to fetch images from a web URI

Push Notifications require you to implement a backend service

To have control of shell tiles when the app is not running without using Push

a good solution is a Background Agent

Use the ShellTile API to locate and update tiles


23/40

Demo 3:

Updating Tiles From

a Background Agent


24/40

Lock screen notifications

on Windows Phone


25/40

Lock Screen on Windows Phone 7

On Windows Phone 7, Notifications area was reserved to

first party apps Next Calendar Appointment

Icons and counts for missed calls, new email, new SMS

User could select background image

From supplied Wallpapers

From their own pictures

NOTIFICATIONSAREA


26/40

Lock Screen on Windows Phone 8

End user can now select any app that has

been enabled for lock screen notifications toshow detailed status

Select any five apps to show quick status

(icon and count)

For your app to be included in the

notifications area, all you have to do is Create an icon

Declare the apps intent in the application

manifest file


27/40

Creating a lock screen icon

Create a 24 x 24 pixel PNG image that will be used to identify your app on t

Contain only white pixels and transparent background Default name is LockIcon.png

Use this name and you do not have to explicitly declare it in the applicatio

If you use another name,

Edit WMAppManifest.xml using

the XML editor Change the DeviceLockImageURI

element which is listed inside the

Tokens element:


28/40

Updating the Application Manifest File

Edit WMAppManifest.xml with the XML editor

Find the element. If not there, create it immediately follow element.

Inside the element, create elements for each

want to support: Icon Count and/or Text


29/40

How to Update the Icon Count and Text

Lock Screen Icon Count and Text is taken directly from your applications prim

Secondary tiles are not used for this feature Information is only displayed on the lock screen if the tile contains the infor

For example, a count will only be displayed if the tile displays it

Primary tile does not need to be pinned to the Start Screen for lock screen n

be enabled

Update Primary Tile content in the usual way Local Shell Tiles API

Push Notifications


30/40

Testing with the Simulation Dashboard

Simulation Dashboard allows you to display the Lock Screen

on the emulator

Access the Simulation Dashboard from the Visual Studio Tools menu


31/40

Demo 4: Lock Screen

Notifications


32/40

Lock Screen Background


33/40

Lock Screen Background on Windows Phone 8

End user can choose a background image from

their own photos or search for one on Bing

In addition, they can choose an app to be the

background image provider

For your app to be a lock screen background

provider, all you have to do is

Declare the apps intent in the application

manifest file Write code to change the background image


34/40

Updating the Application Manifest File

Edit WMAppManifest.xml with the XML editor

Find the element. If not there, create it immediately follow

element.

Inside the element, create an element for

LockScreen_Background


35/40

Write Code to Change the Lock Screen Backgroundprivateasyncvoid lockHelper(Uri backgroundImageUri, stringbackgroundAction)

{

try

{

//If you're not the provider, this call will prompt the user for permission.

//Calling RequestAccessAsync from a background agent is not allowed.var op = awaitLockScreenManager.RequestAccessAsync();

//Check the status to make sure we were given permission.

bool isProvider = LockScreenManager.IsProvidedByCurrentApplication;

if (isProvider)

{

//Do the update.

Windows.Phone.System.UserProfile. LockScreen.SetImageUri(backgroundImageUri);

System.Diagnostics.Debug.WriteLine("New current image set to {0}", backgroundImageUri.ToString

}

else

{MessageBox.Show("You said no, so I can't update your background.");

}

}

catch (System.Exception ex)

{

System.Diagnostics.Debug.WriteLine(ex.ToString());

}

}


36/40

Call to LockScreenManager.RequestAccessAsync

is required

Checks if your app is already the selected lock screen

background provider

If not, prompts user for permission to make your app

the selected provider

User Confirmation

//If you're not the provider, this call will prompt the

user for permission.

//Calling RequestAccessAsync from a background agent is

not allowed.

var op = awaitLockScreenManager.RequestAccessAsync();


37/40

Accessing Local Images

To use an image that you shipped in your app, use ms-appx:///

Uri imageUri = newUri("ms-appx:///background1.png", UriKind.RelativLockScreen.SetImageUri(imageUri);

To use an image stored in the Local Folder, use ms-appdata:///local/shared

Must be in or below the /shared/shellcontent subfolder

Uri imageUri = newUri("ms-appdata:///local/shared/shellcontent/back

UriKind.RelativeOrAbsolute);

LockScreen.SetImageUri(imageUri);


38/40

Demo 5: Lock Screen

Background

R i


39/40

Review

Shell Tile API allows easy manipulation of tiles from within an application

Tiles can have a front and a back, and apps can have secondary tiles Tiles and Toasts can launch into a specific page within the app

Only the user can decide to pin an apps primary tile to the Start Screen, not

App can declare in the App manifest that it can be a lock screen notification

User must select apps to display lock screen notifications from phone Settin

Optionally supply count and/or text these are pulled directly from the prim

App can also declare that it can be a lock screen background provider

Code used to request permission from the user and to change the lock scre


40/40

The information herein is for informational

purposes only an 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.

2012 Microsoft Corporation.

All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION

IN THIS PRESENTATION.

Date post:	02-Apr-2018
Category:	Documents
Upload:	edmundo-lozada
View:	221 times
Download:	0 times

S7 Tiles and Lock Screen Notifications.pdf

Documents