Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Introducing AdaptiveTileExtensions for Windows 10

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:
WideTile

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

Advertisements

11 responses to “Introducing AdaptiveTileExtensions for Windows 10

  1. Pingback: Introducing AdaptiveTileExtensions for Windows 10

  2. Andrew Bares July 1, 2015 at 04:52

    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

    • scottisafool July 1, 2015 at 04:54

      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 🙂

  3. Peter August 18, 2015 at 17:00

    How do I get the tile’s xml as GetXml has been deprecated.

    • scottisafool August 18, 2015 at 17:02

      You shouldn’t need to get the xml now, you would call .GetNotification() which gets the actual notification object needed.

      • Peter August 18, 2015 at 17:08

        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 ?

      • scottisafool August 18, 2015 at 17:10

        Good point. I’ll look at reintroducing it then, or I’ll add another method for the ScheduledTileNotification as a result.

  4. Peter August 18, 2015 at 17:17

    OK Thanks, that would be great.
    Your extension is so far the best solution for working with adaptive tiles.

  5. DragonSpark Technologies August 23, 2015 at 01:13

    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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: