Windows Phone: Live tile changes with Mango

One of the unique features of the platform Windows Phone is the existence of a start page with tiles. Some of the tiles could be “live tiles” with some informations about the state of the Windows Phone app. For instance, a social network app could use the live tile to displays the number of unseen posts. The developer of a Windows Phone app can in the current version change the background image (local or remote image), title of the app and a counter (range 0-99) via Push Notifications.

Changes in Mango

With the new Mango release of Windows Phone we have the following changes:

• Possible creation of secondary tiles with deep linking to a URI within your application (with parameters)
• Access to your tiles with usage of ShellTile.ActiveTiles
• Manipulate the tile appearance directly without push notifications with the StandardTileData class
• Each tile now have a back page, which could have a image (remote or local), a separate title and a content text
• In combination with the new background agent you can now schedule local tile updates
• With the ShellTileSchedule class you can define that your tile image should be updated in the specified interval

Secondary live tiles

Adding a secondary tile to the start screen is done with the help of the ShellTile class. The StandardTileData class is used by tile creation or the tile update to hold the tile data.

// Check the existence of the new pinned tile

var shellTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("PartnerID=4711"));

if (shellTile != null)

{

    return;

}

// Create the tile data with some proeprties

var tileData = new StandardTileData

    {

        BackgroundImage = new Uri("Red.jpg", UriKind.Relative),

        Title = "Secondary Tile",

        Count = 12,

        BackTitle = "Back page",

        BackContent = "This is the back page",

        BackBackgroundImage = new Uri("Blue.jpg", UriKind.Relative)

    };

// create the tile at the start screen

ShellTile.Create(new Uri("/MainPage.xaml?PartnerID=4711", UriKind.Relative), tileData);

The pictures used for the live tile must be in PNG or JPG format and have the size of 173x173 pixels PNG or JPG. The properties of the files in the solution have to be set to Content and “copy if newer”. The BackgroundImage or BackBackgroundImage could also be web URLs, than the UriKind Absolute should be used.

Deep Linking

If you use a secondary tile with a other Uri than “/” the NavigationService automatically navigates to the given page. In the NavigatedTo-Event you can access via QueryString to the parameters of the tile (in this case “PartnerID=4711”).

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

{

    base.OnNavigatedTo(e);

    if (NavigationContext.QueryString.ContainsKey("PartnerId"))

    {

        // do something here

    }

}

Updates the tiles

To access a tile the ActiveTiles prooperty of the ShellTile class will be used.

To find the primary tile and update the back content property:

var tileToFind = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString() == "/");

if (tileToFind != null)

{

    var newTileData = new StandardTileData

        {

            BackContent = "Changes for the back"

        };

    tileToFind.Update(newTileData);

}

To find a secondary tile and make some updates:

Find a tile with a specific parameter or all with a deep link to a page (for example details.xaml"):

// Find the tile we want to update.

var tileToFind = ShellTile.ActiveTiles.FirstOrDefault

    (x => x.NavigationUri.ToString().Contains("PartnerID=4711"));

// If tile was found, then update the Title

if (tileToFind != null)

{

    var newTileData = new StandardTileData

    {

        Title = textBoxTitle.Text

    };

    tileToFind.Update(newTileData);

}

Delete a pinned tile

Delete a secondary or main tile:

var tileFound = ShellTile.ActiveTiles

    .FirstOrDefault(tile => tile.NavigationUri.ToString().Contains("Details"));

if (tileFound != null)

{

    tileFound.Delete();

}

 

Background worker

With the new concept of Mango to run scheduled background agents you can easily create a local update service for tiles.

Start the background agent with help of the ScheduledActionService class. In my sample I use a PeriodicTask which will be scheduled every 30 minutes to check for updates of the live tiles. More details about scheduled tasks you can find here: Scheduled Tasks Overview for Windows Phone

(1) Add a new SchedulerAgent project to your solution

(2) Start a new PeriodicTask by using the ScheduledActionService

private static void StartPeriodicAgent()

{

    var periodicTask = new PeriodicTask("PeriodicAgent")

        {

            // The description is required. This is the string that the user

            // will see in the background services Settings page on the device.

            Description = "Periodic task for updating the tile"

        };

    // If the agent is already registered with the system,

    // call the StopPeriodicAgent helper method.

    if (ScheduledActionService.Find(periodicTask.Name) != null)

    {

        StopPeriodicAgent();

    }

    ScheduledActionService.Add(periodicTask);

}

private static void StopPeriodicAgent()

{

    ScheduledActionService.Remove("PeriodicAgent");

}

(3) At the Invoke Event of the ScheduledTaskAgent update the tile:

           if (task is PeriodicTask)

           {

               var tileToFind = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString() == "/");

               if (tileToFind != null)

               {

                   var rand=new Random(0);

                   var newTileData = new StandardTileData 

                   { 

                       Count = rand.Next(0,99)

                   };

                   Debug.WriteLine("Updated " + DateTime.Now.ToShortTimeString());

                   tileToFind.Update(newTileData);

               }

           }

The user have in Windows phone settings page a list of the current running background agents and can stop them.