Flip 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 flip Tile template flips from front to back.

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.

Flip Tile properties

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

Flip Tile sizing info

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

Designing a flip Tile

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

Creating or updating a flip Tile

You can create or update a flip Tile using either XML or code. There’s no way to know which Tile size your customer has pinned to Start, so you should include all elements.

Creating or updating a flip Tile using XML

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

<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification" Version="2.0">
  <wp:Tile Id="[Tile ID]" Template="FlipTile">
    <wp:SmallBackgroundImage [Action="Clear"]>[small Tile size URI]</wp:SmallBackgroundImage>
    <wp:WideBackgroundImage Action="Clear">[front of wide Tile size URI]</wp:WideBackgroundImage>
    <wp:WideBackBackgroundImage Action="Clear">[back of wide Tile size URI]</wp:WideBackBackgroundImage>
    <wp:WideBackContent Action="Clear">[back of wide Tile size content]</wp:WideBackContent>
    <wp:BackgroundImage Action="Clear">[front of medium Tile size URI]</wp:BackgroundImage>
    <wp:Count Action="Clear">[count]</wp:Count>
    <wp:Title Action="Clear">[title]</wp:Title>
    <wp:BackBackgroundImage Action="Clear">[back of medium Tile size URI]</wp:BackBackgroundImage>
    <wp:BackTitle Action="Clear">[back of Tile title]</wp:BackTitle>
    <wp:BackContent Action="Clear">[back of medium Tile size content]</wp:BackContent>
  </wp:Tile>
</wp:Notification>

Creating or updating a flip Tile using code

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

FlipTileData TileData = new FlipTileData()
{
   Title = "[title]",
   BackTitle = "[back of Tile title]",
   BackContent = "[back of medium Tile size content]",
   WideBackContent = "[back of wide Tile size content]",
   Count = [count],
   SmallBackgroundImage = [small Tile size URI],
   BackgroundImage = [front of medium Tile size URI],
   BackBackgroundImage = [back of medium Tile size URI],
   WideBackgroundImage = [front of wide Tile size URI],
   WideBackBackgroundImage = [back of wide Tile size URI],
};

Clearing a flip 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.

Share via