Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Flip Tile template for Windows Phone 8

August 19, 2014

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

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.

Windows Phone Flip Tile template showcase image

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.

Windows Phone Flip Tile template properties

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

Windows Phone Flip Tile template size information

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

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.

Show:
© 2014 Microsoft