How to setup medium, large and wide LiveTile in one Notification?

Question

Hi,

I am trying to setup LiveTiles for my W8.1 app. While medium and wide tiles work without any problem the large tile is not shown. I use the following code to setup the tiles:

XmlDocument mediumTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare150x150Image);
XmlNodeList mediumTileImageAttributes = mediumTileXml.GetElementsByTagName("image");
((XmlElement)mediumTileImageAttributes[0]).SetAttribute("src", "ms-appdata:///local/" + fileNameMedium);
((XmlElement)mediumTileImageAttributes[0]).SetAttribute("alt", "AltString");

XmlDocument largeTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare310x310Image);
XmlNodeList largeTileImageAttributes = mediumTileXml.GetElementsByTagName("image");
((XmlElement)largeTileImageAttributes[0]).SetAttribute("src", "ms-appdata:///local/" + fileNameLarge);
((XmlElement)largeTileImageAttributes[0]).SetAttribute("alt", "AltString");

XmlDocument wideTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWide310x150Image);
XmlNodeList wideTileImageAttributes = wideTileXml.GetElementsByTagName("image");
((XmlElement)wideTileImageAttributes[0]).SetAttribute("src", "ms-appdata:///local/" + fileNameWide);
((XmlElement)wideTileImageAttributes[0]).SetAttribute("alt", "AltString");


IXmlNode largeNode = mediumTileXml.ImportNode(largeTileXml.GetElementsByTagName("binding").Item(0), true);
mediumTileXml.GetElementsByTagName("visual").Item(0).AppendChild(largeNode);

IXmlNode wideNode = mediumTileXml.ImportNode(wideTileXml.GetElementsByTagName("binding").Item(0), true);
mediumTileXml.GetElementsByTagName("visual").Item(0).AppendChild(wideNode);

            
TileNotification tileNotification = new TileNotification(mediumTileXml);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

All files (fileNameMedium, fileNameWide and fileNameLarge) are definitely in place. When the largeTile is not added to the notification the large default (=not live) tile is shown. Thus the notification seems to set the large tile, but not correctly. No AltString is shown, just a blank tile in the default tile color.

Where is the error?

Answer 1

See Troubleshooting tile notifications

My first guess is that the tile's file size is too large.

If you need more specific help please share a link to a minimal repro sample on your OneDrive.

--Rob

Answer 2

well i created an template based on text tiles (didnt had the images) and this is working:

 string xmlText = @"<tile><visual version=""2"">
<binding template=""TileSquare150x150Text02"" fallback=""TileSquareText02""><text id=""2"">update</text></binding>
<binding template=""TileSquare310x310TextList01""><text id=""2"">update</text></binding>
<binding template=""TileWide310x150Text01"" fallback=""TileWideText01""><text id=""2"">update</text></binding>
</visual></tile>";

            XmlDocument doc = new XmlDocument();
            doc.LoadXml(xmlText);

            TileNotification tileNotification = new TileNotification(doc);
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

so are you sure the images are available ?

---

Microsoft Certified Solutions Developer - Windows Store Apps Using C#

Answer 3

I tried to create the notification manually but this did not work at all:

string xmlText = @"
                <tile>
                    <visual version=""2"">
                        <binding template=""TileSquare150x150Image"" fallback=""TileSquareImage"">
                            <image id=""1"" src=""ms-appdata:///local/" + fileNameMedium + @""" alt=""MoneyControl""/>
                        </binding>  
                    </visual>

                    <visual version=""2"">
                        <binding template=""TileSquare310x310Image"">
                            <image id=""1"" src=""ms-appdata:///local/" + fileNameLarge + @""" alt=""MoneyControl""/>
                        </binding>  
                    </visual>

                    <visual version=""2"">
                        <binding template=""TileWide310x150Image"" fallback=""TileWideImage"">
                            <image id=""1"" src=""ms-appdata:///local/" + fileNameWide + @""" alt=""MoneyControl""/>
                        </binding>  
                    </visual>
                </tile>";

XmlDocument doc = new XmlDocument();
doc.LoadXml(xmlText);

TileNotification tileNotification = new TileNotification(doc);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

When creating the notification this way, no live tile is shown at all.

Yes, the files are 100% in place. The file size is about 15KB which should not be any problem.

I have uploaded a Demo to my OneDrive:
http://1drv.ms/1fJZ7A5

Run the App and place the app icon/tile on the start screen. Click the "Set Live Tiles" Button and leave the app. While the Medium and Wide tile are displayed correctly the Large tile only shows a blank tile.

Answer 4

Typo in your code. You're copying the largeTileImageAttributes from the mediumTileXml instead of from the largeTileXml:

XmlDocument largeTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare310x310Image);
XmlNodeList largeTileImageAttributes = mediumTileXml.GetElementsByTagName("image");
((XmlElement)largeTileImageAttributes[0]).SetAttribute("src", "ms-appdata:///local/" + fileNameLarge);
((XmlElement)largeTileImageAttributes[0]).SetAttribute("alt", "AltString");

Answer 5

I tried to create the notification manually but this did not work at all:

string xmlText = @"
                <tile>
                    <visual version=""2"">
                        <binding template=""TileSquare150x150Image"" fallback=""TileSquareImage"">
                            <image id=""1"" src=""ms-appdata:///local/" + fileNameMedium + @""" alt=""MoneyControl""/>
                        </binding>  
                    </visual>

                    <visual version=""2"">
                        <binding template=""TileSquare310x310Image"">
                            <image id=""1"" src=""ms-appdata:///local/" + fileNameLarge + @""" alt=""MoneyControl""/>
                        </binding>  
                    </visual>

                    <visual version=""2"">
                        <binding template=""TileWide310x150Image"" fallback=""TileWideImage"">
                            <image id=""1"" src=""ms-appdata:///local/" + fileNameWide + @""" alt=""MoneyControl""/>
                        </binding>  
                    </visual>
                </tile>";

XmlDocument doc = new XmlDocument();
doc.LoadXml(xmlText);

TileNotification tileNotification = new TileNotification(doc);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

When creating the notification this way, no live tile is shown at all.

Yes, the files are 100% in place. The file size is about 15KB which should not be any problem.

I have uploaded a Demo to my OneDrive:
http://1drv.ms/1fJZ7A5

Run the App and place the app icon/tile on the start screen. Click the "Set Live Tiles" Button and leave the app. While the Medium and Wide tile are displayed correctly the Large tile only shows a blank tile.

and in this snippt you have multiple <visual> elements which is wrong too.

---

Microsoft Certified Solutions Developer - Windows Store Apps Using C#

Answer 6

Thanks a lot! I checked the code several times but sometime one is simply blind to see his own mistakes...