Metro Nuggets
Bitesized tidbits for building Modern (Metro) apps.
Introducing AdaptiveTileExtensions for Windows 10
Posted by on May 11, 2015
One of the things shown off at Build recently was this new thing for updating tiles, called Adaptive Tiles. The notion is, that like your Universal Windows Apps can adapt to different sizes on different platforms, so, too, should your tiles. So Adaptive tiles allows you, with one bit of XML tell your tile how to behave at different sizes. For more information, you should definitely watch the Build session on all this
The problem is, it means crafting the XML. And who likes XML?
The Solution
Inspired by the NotificationsExtension you can use in Windows 8.1/Windows Phone 8.1 apps, that allows for easy creation of old school tiles and notifications, I decided to write my own little helper to aid the creation of said XML.
So, enough jibber jabber, let’s see some code!
Your Code
var tile = AdaptiveTile.CreateTile();
var binding = TileBinding.Create(TemplateType.TileWide);
binding.Branding = Branding.None;
var header = new Text("You have mail")
{
Style = TextStyle.Body
};
var content = new Text("Someone likes you!")
{
Style = TextStyle.Caption
};
var logo = new TileImage(ImagePlacement.Inline)
{
Source = "http://fc02.deviantart.net/fs71/i/2013/359/a/4/deadpool_logo_1_fill_by_mr_droy-d5q6y5u.png"
};
var logoSubGroup = new SubGroup {Width = 40};
logoSubGroup.AddImage(logo);
var subgroup = new SubGroup();
subgroup.AddText(header);
subgroup.AddText(content);
binding.Add(logoSubGroup);
binding.Add(subgroup);
tile.Tiles.Add(binding);
var xml = tile.GetXml();
The Generated XML
The above code would then create the XML you requested so you can update your tile. The XML looks as follows:
<tile version="3">
<visual>
<binding template="TileWide" branding="None">
<group>
<subgroup hint-weight="40">
<image placement="Inline" src="http://fc02.deviantart.net/fs71/i/2013/359/a/4/deadpool_logo_1_fill_by_mr_droy-d5q6y5u.png" />
</subgroup>
<subgroup>
<text hint-style="Body">You have mail</text>
<text hint-style="Caption">Someone likes you!</text>
</subgroup>
</group>
</binding>
</visual>
</tile>
The Resulting Tile
The XML I requested above, when used in a tile, would result in a tile looking like this:
Adaptive tiles is a very cool, very powerful way for you to drive some really dynamic content on your tiles, and being able to set multiple sizes for your tile in one go is very handy. I hope my little tool helps.
Nuget: https://www.nuget.org/packages/AdaptiveTileExtensions/
Source: https://github.com/ScottIsAFool/adaptivetileextensions
SL
Pingback: Introducing AdaptiveTileExtensions for Windows 10
Hey, this is Andrew, a Microsoft PM from the notifications team… thanks for writing this extension! Awesome to see people already using adaptive tile templates!!
I just published a blog post documenting all the features of adaptive, I’m sure you and your readers will find it helpful: http://blogs.msdn.com/b/tiles_and_toasts/archive/2015/06/30/adaptive-tile-templates-schema-and-documentation.aspx
I have literally just been reading it. Going to dissect that blog post and see if there’s anything that needs adding to this extension 🙂
How do I get the tile’s xml as GetXml has been deprecated.
You shouldn’t need to get the xml now, you would call .GetNotification() which gets the actual notification object needed.
Hi thanks for the quick response.
Scheduled updates takes an XmlDocument as an argument
ScheduledTileNotification scheduledTile = new ScheduledTileNotification(tileXml, DateTime.Now.AddMinutes(1));
where tileXml is the XmlDoc.
What am I missing ?
Good point. I’ll look at reintroducing it then, or I’ll add another method for the ScheduledTileNotification as a result.
OK Thanks, that would be great.
Your extension is so far the best solution for working with adaptive tiles.
This works.
var tileXml = tile.GetNotification().Content;
Ahh, excellent. I think I’ll leave that as the mechanism then, might update the docs though.
First off, I would like to share my appreciation for your attempts here at handling what I perceive to be an offensive design: using XML to define *anything* in a Xaml-based system. I cannot fathom why anyone would want to ever pass in an XML object into another object — EVER. Unless of course it was for transformation via XSLT or some such. Passing in XML to an object fully feels like an anti-pattern.
Secondly, I saw a tweet by @windowsdev showcasing this article, and I spent the day accounting for this perceived issue and making it more (as in fully!) Xaml-based. If interested, you can check out my PR here: https://github.com/ScottIsAFool/AdaptiveTileExtensions/pull/6
Thank you for any consideration/support/conversation/dialogue around this!