locked
Binding three tile size notifications

    Question

  • I am updating a Windows 8 app to Windows 8. and would like to support the large (310x310) tile size.

    My Windows 8 notifications code is as follows

                    // Setup Wide Tile
                    template = self.wideTileType;
                    var tileXml = Windows.UI.Notifications.TileUpdateManager.getTemplateContent(template);
                    var tileImageElements = tileXml.getElementsByTagName("image");
                    if (tileImageElements && tileImageElements.length>0) {
                        tileImageElements[0].setAttribute("src", post.imgThumbUrl);
                        tileImageElements[0].setAttribute("alt", "Post Image");
                    }
                    var tileTextElements = tileXml.getElementsByTagName("text");
                    if (tileTextElements && tileTextElements.length > 0)
                        tileTextElements[0].appendChild(tileXml.createTextNode(post.title));
    
                    // Setup Square Tile
                    template = self.squareTileType;
                    var squareTileXml = Windows.UI.Notifications.TileUpdateManager.getTemplateContent(template);
                    var squareTileImageElements = squareTileXml.getElementsByTagName("image");
                    if (squareTileImageElements && squareTileImageElements.length > 0) {
                        squareTileImageElements[0].setAttribute("src", post.imgThumbUrl);
                        squareTileImageElements[0].setAttribute("alt", "Post Image");
                    }
                    var squareTileTextElements = squareTileXml.getElementsByTagName("text");
                    if (squareTileTextElements && squareTileTextElements.length > 0)
                        squareTileTextElements[0].appendChild(squareTileXml.createTextNode(post.title));
    
                    // Add Square to Long tile
                    var binding = TileXml.getElementsByTagName("binding").item(0);
                    var node = tileXml.importNode(binding, true);
                    tileXml.getElementsByTagName("visual").item(0).appendChild(node);
    
                    items[i].tile = new Windows.UI.Notifications.TileNotification(tileXml);

    This successfully binds the small and wide tile. I have added variables for the large tile:

     // Setup Large Tile
                    var template = self.largeTileType;
                    var largetileXml = Windows.UI.Notifications.TileUpdateManager.getTemplateContent(template);
                    var largetileImageElements = largetileXml.getElementsByTagName("image");
                    if (largetileImageElements && largetileImageElements.length > 0) {
                        largetileImageElements[0].setAttribute("src", post.imgThumbUrl);
                        largetileImageElements[0].setAttribute("alt", "Post Image");
                    }
                    var largetileTextElements = largetileXml.getElementsByTagName("text");
                    if (largetileTextElements && largetileTextElements.length > 0)
                        largetileTextElements[0].appendChild(largetileXml.createTextNode(post.title));

    However, I do not know how to bind all three tile sizes. Upon running my app, the large tile is blank - it does not display notifications.

    Could you help?

    Saturday, January 25, 2014 2:32 PM

Answers

All replies