Live tiles Developers guide to Windows 10 Insider

Live tiles Developer's guide to Windows 10 Insider Preview Andy & Jerry

Agenda Tile basics Tile templates Adaptive samples Toast Interactive toast http: //windows. Microsoft. com

Tile basics

Tile anatomy Basic State Semi-Live State Plate Content App Logo App Icon Short Name Badge App Icon Short Name App Logo Content Plate http: //windows. Microsoft. com

Updating tiles Scheduled Set template and time with “Scheduled. Tile. Notification” Periodic Pull from URL 30 m / 6 h / 12 h / 24 h Local Update from (foreground/background) app Push Use push services Update badge http: //windows. Microsoft. com

Update tile badge // build badge var type = Badge. Template. Type. Badge. Number; var xml = Badge. Update. Manager. Get. Template. Content(type); // updte element var elements = xml. Get. Elements. By. Tag. Name("badge"); var element = elements[0] as Windows. Data. Xml. Dom. Xml. Element; element. Set. Attribute("value", "47"); // send to lock screen var updator = Badge. Update. Manager. Create. Badge. Updater. For. Application(); var notification = new Badge. Notification(xml); updator. Update(notification); http: //windows. Microsoft. com

Responsive tiles Low density High density example Tiles are not always the same size Tiles adapt to the screen they are on Since the Start grid has different densities and adapts to the screen size of your device, so do our tiles and the content within them. http: //windows. Microsoft. com

Tile templates

http: //windows. Microsoft. com

Legacy templates If a template meets your needs, go ahead and use it. Previous templates remain Phone and Windows templates have been merged There are over 80 templates available http: //windows. Microsoft. com

Create a secondary tile var tile. Id = "Details. Tile"; var pinned = Secondary. Tile. Exists(tile. Id); if (!pinned) { var tile = new Secondary. Tile(tile. Id) { Display. Name = "Record details", Arguments = "123" }; // extra details var success = await tile. Request. Create. Async(); } http: //windows. Microsoft. com

Use secondary tiles to deep-link into your app

http: //windows. Microsoft. com

Please don’t say more templates.

Adaptive templates

Adaptive tiles <tile> <visual> <binding template="Tile. Medium"> <group> <subgroup> <text hint-style="subtitle">John Doe</text> <text hint-style="subtle">Photos from our trip</text> <text hint-style="subtle">Thought you might…</text> </subgroup> </group> <subgroup> … </subgroup> </binding> </visual> </tile> Min. Med Size Max Med. Size http: //windows. Microsoft. com

Adaptive tiles <tile> <visual> <binding template="Tile. Medium"> <image source="Assetsimage. png" placement="background" /> <text hint-wrap="true"> Microsoft Holo. Lens: A Sensational Vision of the PC’s Future </text> </binding> </visual> </tile> Min. Med Size Max Med. Size http: //windows. Microsoft. com

Adaptive samples

Sample: Small Tile <binding template="Tile. Small" branding="none" hint-text. Stacking="center"> </binding> http: //windows. Microsoft. com

Sample 1: Medium Tile <binding template="Tile. Medium" branding="Name" display. Name="Hipstame"> <text hint-style="caption"> 9: 50 AM, Wednesday</text> <text hint-style="captionsubtle" hint-wrap="true"> 263 Grove St, San Francisco, CA 94102</text> </binding> http: //windows. Microsoft. com

Sample: Wide Tile <binding template="Tile. Wide" display. Name="Hipstame"> <group> <subgroup hint-weight="33"> <image placement="inline" src="http: //image. jpg" /> </subgroup> <text hint-style="caption"> 9: 50 AM, Wednesday</text> <text hint-style="captionsubtle" hint-wrap="true" hint-max. Lines="3"> 263 Grove St, San Francisco, CA 94102</text> </subgroup> </binding> http: //windows. Microsoft. com

Sample: Large Tile <binding template="Tile. Large" display. Name="Hipstame"> <group> <subgroup hint-weight="33"> <image placement="inline" src="http: //image. jpg" /> </subgroup> <text hint-style="caption"> 9: 50 AM, Wednesday</text> <text hint-style="captionsubtle" hint-wrap="true" hint-max. Lines="3"> 263 Grove St, San Francisco, CA 94102</text> </subgroup> </group> <image placement="inline" src="http: //map. jpg"/> </binding> http: //windows. Microsoft. com

Adaptive Templates http: //windows. Microsoft. com

Toast

Toasts Glance (consume) See new information from your apps. Act (chase, or take actions) Toasts invite you to begin or complete a task. The toast is the app’s door by chasing (clicking) it. Additional actions enable users to perform simple tasks without context switching. http: //windows. Microsoft. com

Toast states Collapsed state Action center chevron Mobile default Expanded state Action center chevron Desktop default http: //windows. Microsoft. com

Toast templates If a template meets your needs, go ahead and use it. Previous templates remain Phone and Windows templates have been merged Adaptive template Same XML syntax as tiles http: //windows. Microsoft. com

Sending toast Scheduled Set template and time with “Scheduled. Toast. Notification” Toast can also be set to be recurring. Local Send from (foreground/background) app This includes desktop apps with “App. User. Model. ID” Push Use push services http: //windows. Microsoft. com

Sending toast // build toast var template = Toast. Template. Type. Toast. Text 01; var xml = Toast. Notification. Manager. Get. Template. Content(template); xml. Document. Element. Set. Attribute("launch", "Args"); // set value var text = xml. Create. Text. Node(content); var elements = xml. Get. Elements. By. Tag. Name("text"); elements[0]. Append. Child(text); // show toast var toast = new Toast. Notification(xml); var notifier = Toast. Notification. Manager. Create. Toast. Notifier(); notifier. Show(toast); http: //windows. Microsoft. com

Sending toast // build toast // show toast var notifier = Toast. Notification. Manager. Create. Toast. Notifier(); notifier. Show(toast); http: //windows. Microsoft. com

Handling activation if (args. Kind == Activation. Kind. Launch && args. Arguments != null && args. Tile. Id != "App") { /* handle toast */ } if (args. Kind == Activation. Kind. Launch && args. Arguments == null && args. Tile. Id != "App") { /* handle primary tile (or toast) */ } http: //windows. Microsoft. com

Interactive toast

Interactive toast http: //windows. Microsoft. com

Special Toast Scenarios Alarm Reminder Incoming Call http: //windows. Microsoft. com

Toast notifications <toast> <visual> <binding template="Toast. Generic"> <image placement="app. Logo. Override" src="Torrance Shum. png" /> <text>Torrance Shum</text> <text>Media content attached. </text> <image placement="inline" src="attachment. png" /> <text>Hey check out this photo. Isn’t it awesome? </text> </binding> </visual> </toast> http: //windows. Microsoft. com

Toast input <toast>. . . <actions> <input title=“Snooze for” id="snooze. Time" type="selections" default. Selection=“ 5"> <selection id="5" content="5 minutes" /> <selection id="10" content="10 minutes" /> <selection id="20" content="20 minutes" /> </input>. . . </actions> </toast> http: //windows. Microsoft. com

Toast action <toast>. . . <actions>. . . <action activation. Type="system" arguments="snooze" hint-input. Id="snooze. Time" content=""/> <action activation. Type="system" arguments="dismiss" content=""/> </actions> </toast> http: //windows. Microsoft. com

Alarms are Toasts <toast scenario=“alarm”. . . > <visual>. . . </visual> <actions> <action activation. Type='system' arguments='snooze' content='' /> <action activation. Type='system' arguments='dismiss' content=''/> </actions> </toast> http: //windows. Microsoft. com

Toast customization <toast>. . . <image placement="app. Logo. Override" src="Logo. png" />. . . <actions>. . . <action activation. Type="background" arguments="dismiss" image. Uri="send. png" hint-input. Id="1" /> </actions> </toast> http: //windows. Microsoft. com

New activation types & activations <action activation. Type="foreground" /> Tap button App launches Retrieve Args Take actions <action activation. Type="background" /> Tap button Task launches <action activation. Type="protocol" /> Tap button Protocol activates Web / app <action activation. Type="system" /> Tap button System handles http: //windows. Microsoft. com

Review Tile basics Tile templates Adaptive samples Toast Interactive toast http: //windows. Microsoft. com

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U. S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.