Cycle Tile template for Windows Phone 8

August 06, 2014

Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 only

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.

Windows Phone Cycle Tile template showcase image

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.

Windows Phone CycleTiles_ Tile template properties

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

Windows Phone Cycle Tile template size information

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

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.

Show:
© 2014 Microsoft