Search code examples
windows-8microsoft-metrowindows-runtimelive-tile

TileWidePeekImageCollection - which image is shown with text


In my Metro app, I have some code that builds up a TileWidePeekImageCollection06 (I assume this question applies to TileWidePeekImageCollection05, too), as shown here.

If I supply 6 images, then the sixth is shown in the "peek" along with the text, if I supply 5 then it looks like the fifth is shown with the text. However, if I supply less than 5 images, I can't seem to determine which is shown.

What are the rules for this? I need to know because the text shown in the "peek" with a single image needs to relate specifically to that image.


Solution

  • The documentation isn't very explicit, but you could find this out pretty easily through experimentation. Alternatively, you could use the object model that provides friendly names in the NotificationsExtensions helper library in the tiles sample on MSDN (or look directly at the source mapping the friendly names to the identifiers in the helper library source: TileContent.cs).

    For the specific template you mentioned, example XML is provided below with details about each image provided in the alt tag.

    <tile>
      <visual>
        <binding template="TileWidePeekImageCollection06">
          <image id="1" src="image1.png" alt="Main image on top"/>
          <image id="2" src="image2.png" alt="Small image - row 1, column 1"/>
          <image id="3" src="image3.png" alt="Small image - row 1, column 2"/>
          <image id="4" src="image4.png" alt="Small image - row 2, column 1"/>
          <image id="5" src="image5.png" alt="Small image - row 2, column 2"/>
          <image id="6" src="image6.png" alt="Image with text"/>
          <text id="1">Text Header Field 1</text>
        </binding>  
      </visual>
    </tile>