Cycle Tile template for Windows Phone 8

Article
05/20/2016

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

The cycle Tile template cycles through between one and nine images.

This template is specific to Windows Phone 8. For more info about Tiles in Windows Phone OS 7.1, see Windows Phone OS 7.1 Tile template.

Cycle Tile properties

The following image shows the API name associated with each aspect of the cycle Tile template. You use the CycleTileData class to update any of these properties.

Cycle Tile sizing info

The following image describes sizing info for the cycle Tile template.

Designing a cycle Tile

For more info about how to design a great looking cycle Tile, see Cycle Tile template design guidelines for Windows Phone.

Creating or updating a cycle Tile

You can create or update a cycle Tile using either XML or code.

Creating or updating a cycle Tile using XML

The following code example shows how to create or update a cycle Tile using XML.

<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification" Version="2.0">
  <wp:Tile Id="[Tile ID]" Template="CycleTile">
    <wp:SmallBackgroundImage [Action="Clear"]>[small Tile size URI]</wp:SmallBackgroundImage>
    <wp:CycleImage1 Action="Clear">[photo 1 URI]</wp:CycleImage1>
    <wp:CycleImage2 Action="Clear">[photo 2 URI]</wp:CycleImage2>
    <wp:CycleImage3 Action="Clear">[photo 3 URI]</wp:CycleImage3>
    <wp:CycleImage4 Action="Clear">[photo 4 URI]</wp:CycleImage4>
    <wp:CycleImage5 Action="Clear">[photo 5 URI]</wp:CycleImage5>
    <wp:CycleImage6 Action="Clear">[photo 6 URI]</wp:CycleImage6>
    <wp:CycleImage7 Action="Clear">[photo 7 URI]</wp:CycleImage7>
    <wp:CycleImage8 Action="Clear">[photo 8 URI]</wp:CycleImage8>
    <wp:CycleImage9 Action="Clear">[photo 9 URI]</wp:CycleImage9>
    <wp:Count Action="Clear">[count]</wp:Count>
    <wp:Title Action="Clear">[title]</wp:Title>
  </wp:Tile>
</wp:Notification>

Creating or updating a cycle Tile using code

The following code example shows how to create or update a cycle Tile using C# code.

CycleTileData cycleTile = new CycleTileData()
{
   Title = "Contoso",
   Count = 10,
   SmallBackgroundImage = new Uri("/Assets/Tiles/smallBackgroundImage.jpg", UriKind.Relative),
   CycleImages = new Uri[]
   {
      new Uri("/Assets/Tiles/cycleImage1.jpg", UriKind.Relative), 
      new Uri("/Assets/Tiles/cycleImage2.jpg", UriKind.Relative), 
      new Uri("/Assets/Tiles/cycleImage3.jpg", UriKind.Relative), 
      new Uri("/Assets/Tiles/cycleImage4.jpg", UriKind.Relative), 
      new Uri("/Assets/Tiles/cycleImage5.jpg", UriKind.Relative), 
      new Uri("/Assets/Tiles/cycleImage6.jpg", UriKind.Relative), 
      new Uri("/Assets/Tiles/cycleImage7.jpg", UriKind.Relative), 
      new Uri("/Assets/Tiles/cycleImage8.jpg", UriKind.Relative), 
      new Uri("/Assets/Tiles/cycleImage9.jpg", UriKind.Relative), 
   }
};

Clearing a cycle Tile

To clear a value for a property in XML, set the Action attribute to Clear for that property. To clear a value for a property in code, set the value to an empty string.