Saturday, 15 July 2017

Primary Tile

The UWP has three types of tiles
  • Basic: Icon, short name
  • Semi-live: Icon, short name, badge
  • Live: Icon, short name, badge, content, app icon, badge
For semi and live tiles there are various ways to update them
  • Scheduled: schedule a datetime to update the tile
  • Periodic: pull from url to update the tile (30 min, 1h, 6h, 12h, 24h)
  • Local: from device foreground or background 
  • Push: from push service 
below we create a simple UI to update a semi-live tile's badge, that's the little count number that appears in the lower right corner

<Page
    x:Class="pc.BadgeUpdateExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBox x:Name="BadgeCount_TextBox" PlaceholderText="Badge Count"/>
            <Button x:Name="Update_Buton" Click="Update_Buton_Click" Content="Update"/>
        </StackPanel>
    </Grid>
</Page>

Just a text box for the tile number and an update button, Below we have the codebehind to update the tile/

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;

namespace pc.BadgeUpdateExample
{
    public sealed partial class MainPage : Page
    {
        public MainPage() { InitializeComponent(); }

        private void Update_Buton_Click(object sender, RoutedEventArgs e)
        {
            var type = BadgeTemplateType.BadgeNumber;
            var xmlDoc = BadgeUpdateManager.GetTemplateContent(type);
       
            var elements = xmlDoc.GetElementsByTagName("badge");
            var element = elements[0] as XmlElement;
            element.SetAttribute("value", BadgeCount_TextBox.Text);
           
            var notification = new BadgeNotification(xmlDoc);
            var updator = BadgeUpdateManager.CreateBadgeUpdaterForApplication();
            updator.Update(notification);
        }
    }
}


Updating the badge number is very simple, we can also still leverage the old templates here's a link to a library of them.

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Notifications;

namespace pc.TileUpdateExample
{
    public sealed partial class MainPage : Page
    {
        public MainPage() { InitializeComponent(); }

        private void Update_Buton_Click(object sender, RoutedEventArgs e)
        {
            var type = TileTemplateType.TileWide310x150Text02;
            var xmlDoc = TileUpdateManager.GetTemplateContent(type);
            var xmlString = xmlDoc.GetXml();
            /*
            <tile>
                <visual version="4">
                    <binding template="TileWide310x150Text02" fallback="TileWideText02">
                        <text id="1"></text>
                        <text id="2"></text>
                        <text id="3"></text>
                        <text id="4"></text>
                        <text id="5"></text>
                        <text id="6"></text>
                        <text id="7"></text>
                        <text id="8"></text>
                        <text id="9"></text>
                    </binding>
                </visual>
            </tile>
             */
            var nodeList = xmlDoc.GetElementsByTagName("text");
            var strings = new string[]
            { "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine" };

            for (int i = 0; i < nodeList.Length; i++)
                nodeList[i].InnerText = strings[i];

            var notification = new TileNotification(xmlDoc);
            var updator = TileUpdateManager.CreateTileUpdaterForApplication();
            updator.Update(notification);
        }
    }
}


In short just remember all of the old Tile templates are still available to you