Photos tile template in Windows 10


The photos tile template allows you to display a slideshow of photos on your live tile. The template is supported on all tile sizes (including small), and looks/behaves the same on each tile size.

An example of a medium tile using the photos template is embedded above. The template uses a zoom and cross-fade animation to cycle through your specified photos, and continues to loop forever.

How to use the photos template

Using the photos template is easy if you’ve installed the Windows 10 version of NotificationsExtensions. You can use raw XML, but I highly recommend using NotificationsExtensions so that you don’t have to worry about generating valid XML or XML-escaping content.

<!--

To use the Photos template...

 - On any adaptive tile binding (like TileMedium or TileWide)
   - Set the hint-presentation attribute to "photos"
   - Add up to 12 images as children of the binding (Mobile only displays up to 9).
   
-->

<tile>
  <visual>
    
    <binding template="TileMedium" hint-presentation="photos">
      
      <image src="Assets/1.jpg" />
      <image src="ms-appdata:///local/Images/2.jpg"/>
      <image src="http://msn.com/images/3.jpg"/>
      
      <!--TODO: Can have 12 images total-->
      
    </binding>
    
    <!--TODO: Add bindings for other tile sizes-->
    
  </visual>
</tile>
/*

To use the Photos template...

 - On any TileBinding object
   - Set Content property to new instance of TileBindingContentPhotos
   - Add up to 12 images to Images property of TileBindingContentPhotos (Mobile only displays up to 9).

*/

TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        TileMedium = new TileBinding()
        {
            Content = new TileBindingContentPhotos()
            {
                Images =
                {
                    new TileBasicImage()
                    {
                        Source = "Assets/1.jpg"
                    },

                    new TileBasicImage()
                    {
                        Source = "ms-appdata:///local/Images/2.jpg"
                    },

                    new TileBasicImage()
                    {
                        Source = "http://unsplash.it/200"
                    }

                    // TODO: Can have 12 images total
                }
            }
        }

        // TODO: Add other tile sizes
    }
};

Max number of images

You can only include up to 12 photos per tile size, however Mobile will only display up to 9. Desktop displays all 12. Also, your entire XML payload must be less than 5 KB.

Sending the notification

For sending the tile notification, see this documentation about sending notifications.

Comments (12)

  1. Dave says:

    Have you tried using the  hint-presentation="photos" in conjunction with queued notifications?  Odd things seem to happen.

  2. andrewbares7 says:

    Hey Dave, do you have a scenario that requires using the notification queue with the photos template? We never intended for these to be used in conjunction, but if you have a scenario that would require/benefit from it, we'd be interested to hear it!

  3. Dave says:

    Hey Andrew,

    For example, I have a tile which may cycle through a few pictures, then show a tile with some text, and they cycle through some other pictures.  

    Or say I wanted to do something like the Photo tile does, but I want more than the 12 limit of photos you indicated above, I would like to do a queued notification when another set of 12 photos

    And while I got you, if you set an expiry date on a Tile Notification does it just stop showing?  So, if I had a couple photo tiles used in notifications when they expired would they cease to show?

    Thanks

  4. andrewbares7 says:

    @Dave – One constraint you might run into is the fact that Start pauses tile queue animations after the user has been inactively looking at the Start Screen for about 40 seconds (it will stop flipping through notifications in the queue).

    Also, given that the photos template spends about 5 seconds on each photo, in your described scenario, the user would have to look at their start screen for 10-15 seconds until they see the text… Do you think your users are really just going to be staring at their Start screen for that long?

    Here's my two proposals…

    1) Only use the Photos template. Custom render your text message as an image (you can render XAML objects to a PNG, web search it), and set that as the second image in the Photos template. Then the user will see their first photo for 5 seconds, then the text, and then the rest of their photos.

    2) Don't use the Photos template – Instead, use a series of 5 notifications, where each one is simply one photo (other than the text notification). You can create a notification that's just a photo by only setting the background image on the adaptive tile template payload.

    For your other scenario: "but I want more than the 12 limit of photos" – I'd recommend changing the photos that are displayed periodically, like maybe every day? You can use a background task to send a new Photos template (or you could also use ScheduledTileNotification and schedule them in advance).

    For the expiration time on the TileNotification – Yes, once the expiration time is reached, that specific notification is removed from the tile and not displayed anymore.

  5. Dave says:

    Thanks Andrew, very helpful info!

  6. Sabir says:

    Okay but if we try setting all the 12 images with all size template then we are exceeding the xml size. Is there any other way we can achieve this?

  7. andrewbares7 says:

    Correct Sabir, the XML payloads are limited to 5 KB in size.

    To minimize your payload size, you can use the baseUri attribute. Look at the baseUri attribute here: goo.gl/nYiHQC

    Example…

    <tile>

    <visual baseUri="hiking.andrewbares.net/…/">

      <binding template="TileSmall" hint-presentation="photos">

        <image src="p193jj6k4b2t21dj91qvtm2g138h4.jpg"/>

         …

    Use it to share redundant leading strings on your image URIs. You can use it for ms-appx and ms-appdata URI's too.

    Also, you can actually only have up to 9 images. Build 10240 used to support 12, but in TH2 10586, only 9 are supported. I've updated the documentation. Include more than 9 and your images won't display.

  8. Shubhan Chemburkar says:

    Hi Andy,

    Hope your doing good. I found a issue with this template in the start screen. It does not seem to load pictures from ms-appdata:///localcache although it works with the notification visualizer app.

    The medium tile works the wide tile does not.

    1. andrewbares7 says:

      Hey Shubhan, I just looked into this, and it seems like “localcache” for ms-appdata isn’t officially supported. You should be able to use the normal LocalFolder (“local”) with the photos template and it will work.

      If you would like support for localcache, please submit that request to our UserVoice!

  9. Bonnie B Goldberg says:

    Accidently Deleted Photo Tile from Start Menu. How do I reinstall

    1. andrewbares7 says:

      Hey Bonnie! To re-pin the photos tile, open your Start menu, type “Photos”, right click the first result (which is the Photos app), and then click “Pin to Start”

      Then you’ll see the Photos tile on your Start menu again!

  10. Paul says:

    Hello Andrew

    I have a question about this template – i just created app with this template and got issue – the tile can freeze with image at any time. I didn’t set any expire time or something else (and as I know expire time just remove photos from tile and showing default tile). Sometimes it happens after 1 day, sometimes after 1 hour… And one action can start tile “move” again is “disable and enable” live tile option. Open and closing app doesn’t help.

Skip to main content