For 1511, we’ve added a number of small features and improvements to Adaptive Tile Templates. This post summarizes everything that’s new. See the Adaptive Tile Templates documentation to learn more.
Circle crop for peek and background images
You can now use the hint-crop=”circle” attribute on peek and background images. Previously you could only use it on inline images.
Use both peek and background image
You can now use both a peek and a background image on a Tile notification. Previously, you could only have one or the other. To use this, simply specify both a background image and a peek image in your notification payload.
hint-overlay can be used on peek image
We heard feedback that peek images sometimes made the Tile’s display name unreadable due to the peek image being bright. You used to only be able to apply an overlay on your background image. We’ve added support for overlay to peek images now!
|With 20% Overlay||Without Overlay|
This means there are some new places you can use hint-overlay… if specified on the <binding> element (which was all that we previously allowed), your overlay will be applied to both the background and the peek image. You can also apply hint-overlay on an <image> element that has placement=”peek” or placement=”background”, so that you can have a specific overlay for your background and your peek image (say, 30% for your background and only 10% for the peek). If you don’t specify any overlay, your background image will default to 20% and your peek image will default to 0% (same as before).
People Tile Template
You can use the same template the People app uses for their live Tile, to display photos as circles animating around on the Live Tile. For more info, see People Tile Template.
We’ve made a number of small bug fixes in Adaptive Tile Templates.
Wrapping text will still display even if all lines can’t fit
Previously, if you had wrapping text, and all the text couldn’t be displayed, the text might be dropped completely, even if the hint-minLines (which defaults to 1) can be displayed. This is not the desired behavior and resulted in Tiles as seen in the RTM column. We’ve fixed this so that as long as the hint-minLInes can be satisfied, the text element will be displayed.
... <binding template="TileWide"> <group> <subgroup hint-weight="33"> <image src="http://binged.it/1aYCfS8" /> </subgroup> <subgroup> <text hint-style="body">Fable Legends</text> <text hint-style="captionSubtle" hint-wrap="true">Fable is an awesome game that everyone in the world should be playing!</text> </subgroup> </group> </binding> ...
Circle images use same vertical stretch-to-fit as normal images
Previously, circle-cropped images didn’t use the same vertical stretch-to-fit as non-cropped images. We’ve made them behave the same now. The correct image behavior (which applies to all images regardless of cropping now) is that images will stretch to fill their width, but if when filling their width, they can’t fit vertically, they will stretch to fit vertically. Obviously assigning hint-align will still negate this behavior (hint-align causes images to display at native size, no stretching is performed).
hint-overlay works without having text on Tile
Previously, we only applied your hint-overlay value to your background image if you actually had text on your Tile. However, there’s definitely scenarios where you want to have a background image with an overlay (so you can see the display name) but not have any other text content on the Tile.
So in 1511, if you specify a hint-overlay, it will always be respected.