locked
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?

    Thursday, March 20, 2014 1:01 PM

Answers

  • 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");
    

    • Marked as answer by Agenor Friday, March 21, 2014 10:41 AM
    Friday, March 21, 2014 12:54 AM
    Owner

All replies

  • 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

    Thursday, March 20, 2014 2:22 PM
    Owner
  • 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#

    Thursday, March 20, 2014 2:27 PM
  • 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.

    Thursday, March 20, 2014 3:44 PM
  • 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");
    

    • Marked as answer by Agenor Friday, March 21, 2014 10:41 AM
    Friday, March 21, 2014 12:54 AM
    Owner
  • 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#

    Friday, March 21, 2014 7:41 AM
  • Thanks a lot! I checked the code several times but sometime one is simply blind to see his own mistakes...
    Friday, March 21, 2014 10:42 AM