CODEWITHSUNDEEP
c#microsoft-metro
Mathias Lykkegaard Lorenzen
Mathias Lykkegaard Lorenzen

Reputation: 15886

Updating a live tile in its proper size?

When updating live tiles in Windows 8, I don't know how to update the tile in both the "large" and "small" size at the same time.

I would like users who have my app pinned in small mode to know how many items that are available in my program for viewing, and users who have my app pinned in large mode have both that, and some sample item titles too.

However, no matter what I do, it seems that only one of the tile updates arrive. How can I deliver a tile update based on the size of my tile, so that people who have either the small or large one won't be disappointed?

Upvotes: 2

Views: 1277

Answers (2)

msimons
msimons

Reputation: 505

The tile XML needs to be combined to look like this:

<tile>
    <visual version="3">
        <binding template="TileSquare150x150Block" fallback="TileSquareBlock">
            <text id="1">01</text> 
            <text id="2">Tue</text> 
        </binding>
        <binding template="TileWide310x150PeekImageAndText01" fallback="TileWidePeekImageAndText01">
            <image id="1" src="ms-appx:///Assets/WideLogo.png" /> 
            <text id="1">some text</text> 
        </binding>
    </visual>
</tile>

Now there are many ways you can use to get your XML into this form, but my favourite way is to use the use the NotificationsExtensions library as it encapsulates the XML manipilation.

Once you reference the library in your project your code should look like this:

// create the wide template
ITileWide310x150PeekImageAndText01 wideContent = TileContentFactory.CreateTileWide310x150PeekImageAndText01();
wideContent.TextBodyWrap.Text = "some text";
wideContent.Image.Src = "ms-appx:///Assets/WideLogo.png";

// create the square template and attach it to the wide template 
ITileSquare150x150Block squareContent = TileContentFactory.CreateTileSquare150x150Block();
squareContent.TextBlock.Text = "01";
squareContent.TextSubBlock.Text = "Tue";
wideContent.Square150x150Content = squareContent;

var tn = new TileNotification(wideContent.GetXml());
TileUpdateManager.CreateTileUpdaterForApplication("App").Clear();
TileUpdateManager.CreateTileUpdaterForApplication("App").Update(tn);

Upvotes: 1

Nathan Kuchta
Nathan Kuchta

Reputation: 14172

Content for both the square and wide tile format can (and should) be included in the XML defining each tile notification. Under the visual element, simply add two binding elements: one using a wide tile template, and one using a square tile template.

<tile>
    <visual lang="en-US">
        <binding template="TileWideText03">
            <text id="1">Hello World!</text>
        </binding>
        <binding template="TileSquareText04">
            <text id="1">Hello World!</text>
        </binding>
    </visual>
</tile>

The NotificationsExtensions library (found in the MSDN tiles sample) provides an object model to easily manipulate the XML and combine square and wide tile content:

// create the wide template 
ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03(); 
tileContent.TextHeadingWrap.Text = "Hello World!"; 

// create the square template and attach it to the wide template 
ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04(); 
squareContent.TextBodyWrap.Text = "Hello World!"; 
tileContent.SquareContent = squareContent;

Upvotes: 5

Related Questions