How to Build Lock Screen Notifications w/ Windows Phone 8

Introduction

What makes Windows Phone 8 platform different from its arch-rivals (iOS and Android) is the “personal” nature of the Operating system. There are numerous ways in which the platform allows customization, which makes the device seem more personal.

One of the new features in Windows Phone 8 is the ability to set lock screen notifications for any application. There was support for lock screen notifications for select applications in Windows Phone 7.1 platform, but Windows Phone 8 opens this up for all applications.

With Windows phone 8, applications can be developed in a way that provides the end-user with an ability to customize the lock screen notifications area.

Moreover, a user can choose to have a Windows Phone 8 application as the lock screen background image provider.

Enabling a Windows Phone 8 Application to Provide Lock Screen Notifications

Data for lock screen notifications is derived from the applications default tile. Any information that does not appear on the default Tile cannot be presented as a lock screen notification.

We first have to make a declaration in the Application Manifest file and provide a link to the application icon. Next, we need to set up the application as a provider of lock screen notifications in the “Lock screen Settings” for the phone.

Hands-on

Start Visual Studio 2012 and create a new Windows Phone Project titled “WindowsPhoneLockScreenDemo”.

Create a new Windows Phone Project

Choose Windows Phone OS 8.0  as the target platform.

Select the Windows Phone Platform

Now, open up WMAppManifest.xml in Visual Studio 2012 by clicking it.

Verify that Flip Tile Template is the Tile template selected.

Open up WMAppManifest.xml in Visual Studio 2012

Now, open up WMAppManifest.xml in a text editor. If you want to update in Visual Studio 2012 IDE, right click the file and select “View Code”.

Now, make the following change in the WMAppManifest.xml file

<?xml version="1.0" encoding="utf-8"?>
 
<Deployment xmlns="http://schemas.microsoft.com/windowsphone/2012/deployment" AppPlatformVersion="8.0">
  <DefaultLanguage xmlns="" code="en-US"/>
  <App xmlns="" ProductID="{43b8c92e-2d3c-4ecd-b649-89c3e46df2e1}" Title="WindowsPhoneLockScreenDemo" RuntimeType="Silverlight" Version="1.0.0.0" Genre="apps.normal"  Author="WindowsPhoneLockScreenDemo author" Description="Sample description" Publisher="WindowsPhoneLockScreenDemo" PublisherID="{c621a60f-9488-468d-a442-97aa551607dc}">
    <IconPath IsRelative="true" IsResource="false">Assets\ApplicationIcon.png</IconPath>
    <Capabilities>
      <Capability Name="ID_CAP_NETWORKING"/>
      <Capability Name="ID_CAP_MEDIALIB_AUDIO"/>
      <Capability Name="ID_CAP_MEDIALIB_PLAYBACK"/>
      <Capability Name="ID_CAP_SENSORS"/>
      <Capability Name="ID_CAP_WEBBROWSERCOMPONENT"/>
    </Capabilities>
    <Tasks>
      <DefaultTask  Name ="_default" NavigationPage="MainPage.xaml"/>
    </Tasks>
    <Tokens>
      <PrimaryToken TokenID="WindowsPhoneLockScreenDemoToken" TaskName="_default">
        <TemplateFlip>
          <SmallImageURI IsRelative="true" IsResource="false">Assets\Tiles\FlipCycleTileSmall.png</SmallImageURI>
          <Count>10</Count>
          <BackgroundImageURI IsRelative="true" IsResource="false">Assets\Tiles\FlipCycleTileMedium.png</BackgroundImageURI>
          <Title>WindowsPhoneLockScreenDemo</Title>
          <BackContent></BackContent>
          <BackBackgroundImageURI></BackBackgroundImageURI>
          <BackTitle></BackTitle>
          <DeviceLockImageURI></DeviceLockImageURI>
          <HasLarge></HasLarge>
        </TemplateFlip>
      </PrimaryToken>
    </Tokens>
    <ScreenResolutions>
      <ScreenResolution Name="ID_RESOLUTION_WVGA"/>
      <ScreenResolution Name="ID_RESOLUTION_WXGA"/>
      <ScreenResolution Name="ID_RESOLUTION_HD720P"/>
    </ScreenResolutions>
  </App>
</Deployment>

Next, we specify the lock screen image URI in the WMAppManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
 
<Deployment xmlns="http://schemas.microsoft.com/windowsphone/2012/deployment" AppPlatformVersion="8.0">
  <DefaultLanguage xmlns="" code="en-US"/>
  <App xmlns="" ProductID="{43b8c92e-2d3c-4ecd-b649-89c3e46df2e1}" Title="WindowsPhoneLockScreenDemo" RuntimeType="Silverlight" Version="1.0.0.0" Genre="apps.normal"  Author="WindowsPhoneLockScreenDemo author" Description="Sample description" Publisher="WindowsPhoneLockScreenDemo" PublisherID="{c621a60f-9488-468d-a442-97aa551607dc}">
    <IconPath IsRelative="true" IsResource="false">Assets\ApplicationIcon.png</IconPath>
    <Capabilities>
      <Capability Name="ID_CAP_NETWORKING"/>
      <Capability Name="ID_CAP_MEDIALIB_AUDIO"/>
      <Capability Name="ID_CAP_MEDIALIB_PLAYBACK"/>
      <Capability Name="ID_CAP_SENSORS"/>
      <Capability Name="ID_CAP_WEBBROWSERCOMPONENT"/>
    </Capabilities>
    <Tasks>
      <DefaultTask  Name ="_default" NavigationPage="MainPage.xaml"/>
    </Tasks>
    <Tokens>
      <PrimaryToken TokenID="WindowsPhoneLockScreenDemoToken" TaskName="_default">
        <TemplateFlip>
          <SmallImageURI IsRelative="true" IsResource="false">Assets\Tiles\FlipCycleTileSmall.png</SmallImageURI>
          <Count>10</Count>
          <BackgroundImageURI IsRelative="true" IsResource="false">Assets\Tiles\FlipCycleTileMedium.png</BackgroundImageURI>
          <Title>WindowsPhoneLockScreenDemo</Title>
          <BackContent></BackContent>
          <BackBackgroundImageURI></BackBackgroundImageURI>
          <BackTitle></BackTitle>
          <DeviceLockImageURI IsRelative="true" IsResource="false">Assets\ApplicationIcon.png</DeviceLockImageURI>
          <HasLarge></HasLarge>
        </TemplateFlip>
      </PrimaryToken>
    </Tokens>
    <ScreenResolutions>
      <ScreenResolution Name="ID_RESOLUTION_WVGA"/>
      <ScreenResolution Name="ID_RESOLUTION_WXGA"/>
      <ScreenResolution Name="ID_RESOLUTION_HD720P"/>
    </ScreenResolutions>
  </App>
</Deployment>

Now, we build and deploy our application. After the application is deployed, we pin the application to the start screen.

Pin the Application

Next, we go to the Lock screen Settings and configure our application as a provider for lock screen notifications.

Lock Screen Settings

Select “lock screen”.

We can now choose our application to either show detailed status or quick status.

Detailed or Quick Status

Select the application to provide quick status.

Now lock the screen. If you are on Windows Phone 8 emulator, you can press F12 twice to lock the screen.

You will notice that we see a small icon with “10” next to it. That is our quick status icon for our application. If we had chosen another icon, we could have seen this notification differently.

Small Icon with '10' Next to it

If we have more information in our application tile, we can also use our application to provide a detailed status.

Summary

In this article, we learned how to make a Windows Phone 8 application that provides lock screen updates. A sample code is available for our readers from here.

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com