Live tiles (Live tiles) in Windows 8 (WinRT)
The UI of Windows 8 has been significantly reworked and a start-up screen with tiles has appeared (tiles — I will continue to use English terminology in parentheses). One of the main advantages of tiles over icons is the ability to “live” (live tile) and provide user-relevant information directly on the tile. In addition, it is possible to create secondary tiles (secondary tiles), which allows you to go to the application with certain parameters or to the page into the application. An example is the weather application that displays the weather on the main tile and the weather in selected cities on the secondary tiles.
Proper and high-quality implementation of tile support can significantly improve the functionality of your application and will encourage the user to go into the application, noticing on the tiles that there have been changes for it.
In this article we consider the following points.
1. Default tiles
2. Live tiles
2.1. Templates
2.2. Ways to implement tiles
2.3. Live tiles Full implementation.
2.4. Link to images in tiles.
3. Managing the lifetime of a live tile.
3.1. Disable tile
3.2. Set the time limit of the tile.
3.3. Setting the display of the tile on a schedule.
3.4. Managing the list of tiles according to the schedule (getting the list, deleting)
4. The queue of tiles.
5. Event Indicator (Badges) in Tiles
6. Periodic updating of tiles (from remote resources)
7. Secondary Tiles
7.1. Securing the secondary tile
7.2. Activating an application from a secondary tile
7.3. Removing pinned tile
7.4. "Reviving" the secondary tile
8. Managing Live Tiles via Background Task and Push Notification
')
In Win8, you can install tiles of two main sizes - square 150x150 (square) and wide 310x150 (wide).
By default, in the Package.appxmanifest application manifest, only a square tile is specified. To add support for a wide tile, just add a link to a 310x150 image. In this case, in the context menu of the icon, it is possible to switch the display mode - square or wide
Now, if we launch our application and go to the main page, we will see a wide Tile with the ability to switch to square and reverse.
The background color can be changed on the same page in the manifest, in the BackgroundColor property.
For example, for dark green, you can set the value to # 005500.
The default gray color is # 464646 which will be used later.
In Windows 8, there is support for "live" tiles, similar to live tiles in Windows Phone. "Live tiles" got its name because of the possibility of "reviving" the tile with priority information for the user.
The WinRT API provides 46 tile templates. Detailed description of each template can be found on the MSDN page.
There are 10 templates for square tiles and 36 for wide, if you do not plan to use wide tiles in an application, then 10 templates of square tiles are enough ...
In addition, you can divide all tiles into text, graphic and graphic with text. All square double-sided tiles are an animated tile that periodically replaces an image with text.
Square tile patterns
The selection of wide tiles is much more.
At the same time, there are only two graphics in a “pure” form, and there are also one-sided tiles with graphics and text on one tile.
Wide tile patterns
Adding live tile support is easy. Under the link in MSDN you can find a description of the xml template.
Consider an example of adding a square tile TileSquareBlock with a description of xml :
The template is best for displaying numerical information. Tags in the element are used to set the values we need.
Specify 25 for the first field and degrees for the second:
After we have decided on the template, let's start writing the code.
We have three different identical ways to implement a tile:
The essence of this method is that we manually create the necessary Xml document and create a tile based on it:
In WinRT laid ready-made templates. Using the WinRT API “TileUpdateManager.GetTemplateContent” we can load the XmlDocument of any template and change the values using the XmlDocument API.
Perhaps the most time-consuming option. It is necessary not only to remember about the structure of the template but also to write more code to set values.
In the official examples , the NotificationsExtensions library is provided, created to simplify working with tiles. The library is a wrapper over the WinRT API and collects the necessary xml document. Let's look at how the implementation of our tile will look like with the help of this library.
As we can see, the library somewhat simplifies working with tiles. Further in the article we will mainly consider the first method, since it gives a greater understanding of the processes and gives the necessary knowledge for the correct use of the second and third methods.
After we have decided on the method of implementation, we will add the following simple small logo to the manifest. (Small logo is optional and is optional).
Now, after launching our application, the main tile will “come to life”, and will change its image to a tile with our content (provided that the “square” tile mode is now):
For the "wide" tile, we will not have changes, we will consider further how to correctly implement tiles.
You may want to support not only a square tile but also a wide tile.
In order to add support for wide and square tiles at the same time, we need to combine them into one xml element.
Consolidation is easy enough - you need to combine the tags into one xml.
Those. if you selected a square tile pattern:
and a template for a wide tile:
then the combined version will look like this:
Add a small helper method that we will use later in the article to reduce the amount of code:
Now the implementation for a wide and square tile will look like this:
Since we now have content for a wide and square tile, when switching to the “wide” tile mode, we’ll see the following text:
The NotificationExtensions library also supports the ability to specify a wide and square tile. Consider a similar example using this library:
Here, a “bunch” of two types of tiles is performed by specifying a link to a square tile wideTile.SquareContent = squareTile;
Graphic information is often the main or important component of a live tile. Consider one of the templates that provides the ability to display graphics. Let it be TileWideImage for a wide tile and TileSquareImage for a square .
Consider how to display graphics from different sources.
Add a small helper method to display these images.
First of all, we will look at how to display the tile that we have in the application in the Assets folder
After which you can see the following tiles:
Instead of relative paths, it is also possible to gain access to resources in the project along the absolute path. So we get a similar result at the following addresses:
We also have the ability to display images from web resources. For example, let's take the same photo for flickr for a 150x150 square tile and a 320x159 wide tile.
The only thing you need to remember is that the pictures must be the right size. Too large images will not be displayed, and small tiles will be of poor quality after stretching.
It is also possible to refer to tiles in the local storage. To do this, use the ms-appdata prefix : /// local /
For example, let's add a small simple auxiliary method that saves a file from the specified address on the Internet to the file storage with the specified file name:
Now we can save the images to the local storage.
and refer to it when creating a live tile
As we have seen above, tiles receive any information. You may want to control the lifetime of this information and control the display time of tiles.
First of all, let's look at how you can turn off a tile:
After executing this method, the tiles are replaced with the default tile.
We can also set the lifetime of a tile when it is created. For example, this may be for events that lose relevance after some time (for example, displaying information about the current broadcast in the broadcast).
As an example, let's set the live tile off after 10 seconds.
After executing the code and minimizing the application, we can see how the live tile appears and disappears after 10 seconds.
For example, if an event starts in an hour, then maybe we want the tile to be displayed not right now, but in an hour, when this event comes.
For example, if we want to install a tile in 10 seconds, we will write the following code.
The ScheduledTileNotification method accepts an XmlDocument. (In this case, tile.Content contains an XmlDocument).
In the same way, we can combine a scheduled launch with a tile lifetime.
For example, the code that creates a tile after 10 seconds for 15 seconds looks like this:
If we plan to use several tiles at once according to the schedule, then we need to use the possibility of assigning identifiers to tiles:
We can get a list of all installed tiles by the schedule using the method TileUpdateManager.CreateTileUpdaterForApplication ()
Access to our tile, respectively, can be by ID
Now, for example, we can, if necessary, delete this tile.
In the WinRT API, we have the ability to queue up to 5 tiles that will be displayed cyclically.
All we have to do is enable the queue support method:
Accordingly, to disable the queue, we need to pass the value false.
Tiles can be of different patterns, but for simplicity, consider a small example with the same pattern.
Create a small helper method for installing the tile:
Now, let's set a queue of several tiles that will be displayed cyclically.
And we will be able to see how we cyclically 3 tiles replace each other. The Clear method is needed to clear the queue, otherwise the next time we run the code, we will have a stack of 5 tiles with two identical tiles, which will lead to the fact that periodically the tile will be replaced by the same tile.
When using this method, it is necessary to more carefully check the work of tiles that are installed on a schedule, since they also fall onto the stack in the same way and will “spin” with the previous tile.
We have the ability to display the event indicator on tiles (regardless of live or default tiles). The event indicator is displayed in the lower right corner and you can display a number (from 1 to 99 for example, the number of unread messages) or a glyph (application status).
You can read more about the event indicators on the MSDN page in Russian. Here we consider the implementation of the event indicator.
To work with indicators, we have a BadgeUpdateManager whose API is almost identical to the TileUpdateManager API.
Consider how to display the number 12 in the event indicator, for this we take the corresponding template from the MSDN page />
Now we can observe an indicator with a value of 12 both on the default tile and on the live tile:
In order to display the glyph, we need to replace the value 12 in the xml with one of the identifiers. For example on “attention”
In the same way as for tiles, we can set a lifetime limit for the event indicator:
And, similarly, we can remove the indicator
It is often necessary to update tiles with data from any service / site. For example, if the weather changes during the day, then we may want to update the current air temperature once an hour.
For simplicity, we will create a new Web application that gives us a tile with the current time. If this is an ASP.NET application, add the HttpHandler, which returns us the xml of the tile with the current time:
Now, for example, if the handler is located at localhost : 28457 / TileHandler.ashx, we can use this address to receive notifications.
The following code in the application starts checking and updating the tile every half hour:
We can start updating the tile not immediately, but after a specified time. For example, the following code starts checking and updating tiles after 3 hours:
Now, if we run the application, we will see the following tiles for a wide and square tile:
It is also possible to establish a "queue" of tiles (as described in the section "Queue of Tiles"). The syntax is almost identical and instead of a single Uri we have the ability to specify a collection of Uri up to 5 elements.
First of all, we need to enable queue support:
Updating event identifiers occurs in an identical way.
For example, if we have the address localhost : 28457 / BadgeHandler.ashx which returns xml of the form />
The following code will request and update the indicator state once every half hour.
Secondary tiles allow the application to run on certain pages with certain parameters. A fairly detailed example of working with secondary tiles can be downloaded from MSDN examples. Consider working with secondary tiles.
To fix the secondary tile is quite simple:
For example, if we have a button for attaching a tile, we will write the following handler to the button for attaching a tile (for simplicity, we use the same logos as for the default tile):
TileId is a unique identifier of a tile and is used later for work with a specific tile (delete, update, launch, etc.)
For the main tile, the unique identifier “App” is used. This identifier can be considered reserved and you can’t fix a tile with such an identifier (since obviously such a tile already exists). Attempting to delete a tile with such an identifier leads to the fact that we have lost links from the start screen and the list of programs, and the possibility of further work with secondary tiles is completely "falling off".
Obviously, this bug, and most likely it will be fixed, but in any case, it is strongly not recommended to use “App” as an identifier.
After clicking on the button, we will have the following dialog box for attaching the tile:
After we have created the secondary tile, it is necessary to process the activation of the application by the secondary tile.
To do this, in the AppXaml.cs method we can handle the args launch arguments. We can get from this parameter the TileId tile identifier and argument. For simplicity, we implement the script when a special page is opened in the application when activated on a tile.
To do this, in the same App.xaml.cs file in the OnLaunch method, we will add to the beginning of the method a code for switching to another page, provided that it is activated from the secondary tile
Now, when the application is activated from the secondary tile, the transition to the tile page will be made and the value used to pin the tile will be passed as an argument.
The above code has a significant drawback. After activating the application by the secondary tile and moving to a special page, when you try to start the application from the main tile, we will again be on the page for the secondary tile. This problem has many solutions. One of the solutions is to remember that the application was activated on the secondary tile, and on the next activation, on the main tile, try to go to the previous page, if it exists. Otherwise, run the application according to the default script.
The user can detach the tile from the start screen independently from the context menu of the tile. If necessary, we can request the detachment of the tile. The user clearly has to confirm the tile release.
Add a Unpin button and a handler to the button:
The SecondaryTile.Exists () method allows you to check for a pinned tile on your desktop.
When executing this code, the user must confirm that he wants to delete the secondary Tile, after which the tile will be deleted
Secondary tiles can also be made "alive". The API for the secondary tile is identical to the main tile.
To work with secondary tiles, use the TileUpdateManager.CreateTileUpdaterForSecondaryTile (tileId) method.
Similar example for secondary tile
The BackgroundTask and PushNotification themes deserve a separate article each.
Here we consider the principle of working with tiles for both topics.
A quick introduction to creating background tasks can be found in MSDN
In the OnCompleted method, when a background task is triggered, we can set LiveTile
Windows 8 push notification- .
WNS push notification MSDN . . :
public string PostToWns(string secret, string sid, string uri, string xml, string type = «wns/toast») {}
type “wns/tile”
xml tile.
Example:
— msdn Content-Type ContentLength:
WNS .
secret sid :
sid: «ms-app://s-1-23-2-3112458577-1770873644-3250801218-3829720502-2556658560-167841413-2364691272»;
secret: «DcQWqb7eL7oIwVCr8yIOo-aQQRplPDL3»;
API .
PS stasus petrishko , .
Proper and high-quality implementation of tile support can significantly improve the functionality of your application and will encourage the user to go into the application, noticing on the tiles that there have been changes for it.
In this article we consider the following points.
1. Default tiles
2. Live tiles
2.1. Templates
2.2. Ways to implement tiles
2.3. Live tiles Full implementation.
2.4. Link to images in tiles.
3. Managing the lifetime of a live tile.
3.1. Disable tile
3.2. Set the time limit of the tile.
3.3. Setting the display of the tile on a schedule.
3.4. Managing the list of tiles according to the schedule (getting the list, deleting)
4. The queue of tiles.
5. Event Indicator (Badges) in Tiles
6. Periodic updating of tiles (from remote resources)
7. Secondary Tiles
7.1. Securing the secondary tile
7.2. Activating an application from a secondary tile
7.3. Removing pinned tile
7.4. "Reviving" the secondary tile
8. Managing Live Tiles via Background Task and Push Notification
')
1. Default tiles
In Win8, you can install tiles of two main sizes - square 150x150 (square) and wide 310x150 (wide).
By default, in the Package.appxmanifest application manifest, only a square tile is specified. To add support for a wide tile, just add a link to a 310x150 image. In this case, in the context menu of the icon, it is possible to switch the display mode - square or wide
Now, if we launch our application and go to the main page, we will see a wide Tile with the ability to switch to square and reverse.
 |  |
The background color can be changed on the same page in the manifest, in the BackgroundColor property.
For example, for dark green, you can set the value to # 005500.
The default gray color is # 464646 which will be used later.
2. Live tiles
2.1. Templates
In Windows 8, there is support for "live" tiles, similar to live tiles in Windows Phone. "Live tiles" got its name because of the possibility of "reviving" the tile with priority information for the user.
The WinRT API provides 46 tile templates. Detailed description of each template can be found on the MSDN page.
There are 10 templates for square tiles and 36 for wide, if you do not plan to use wide tiles in an application, then 10 templates of square tiles are enough ...
In addition, you can divide all tiles into text, graphic and graphic with text. All square double-sided tiles are an animated tile that periodically replaces an image with text.
Square tile patterns
| Text | Graphic | Graphics and text (two-sided) |
| TileSquareBlock, TileSquareText01, TileSquareText02, TileSquareText03, TileSquareText04, | TileSquareImage | TileSquarePeekImageAndText01 TileSquarePeekImageAndText02 TileSquarePeekImageAndText03 TileSquarePeekImageAndText04 |
The selection of wide tiles is much more.
At the same time, there are only two graphics in a “pure” form, and there are also one-sided tiles with graphics and text on one tile.
Wide tile patterns
| Text | Graphic | Text and graphic |
| TileWideBlockAndText01 TileWideBlockAndText02 TileWideText01 TileWideText02 TileWideText03 TileWideText04 TileWideText05 TileWideText06 TileWideText07 TileWideText08 TileWideText09 TileWideText10 TileWideText11 | TileWideImage TileWideImageCollection | One sided TileWideImageAndText01 TileWideImageAndText02 TileWideSmallImageAndText01 TileWideSmallImageAndText02 TileWideSmallImageAndText03 TileWideSmallImageAndText04 TileWideSmallImageAndText05 Bilateral (animated transition) TileWidePeekImageCollection01 TileWidePeekImageCollection02 TileWidePeekImageCollection03 TileWidePeekImageCollection04 TileWidePeekImageCollection05 TileWidePeekImageCollection06 TileWidePeekImageAndText01 TileWidePeekImageAndText02 TileWidePeekImage01 TileWidePeekImage02 TileWidePeekImage03 TileWidePeekImage04 TileWidePeekImage05 TileWidePeekImage06 |
2.2. Ways to implement tiles
Adding live tile support is easy. Under the link in MSDN you can find a description of the xml template.
Consider an example of adding a square tile TileSquareBlock with a description of xml :
<tile> <visual> <binding template="TileSquareBlock"> <text id="1">Text Field 1</text> <text id="2">Text Field 2</text> </binding> </visual> </tile> The template is best for displaying numerical information. Tags in the element are used to set the values we need.
Specify 25 for the first field and degrees for the second:
<tile> <visual> <binding template="TileSquareBlock"> <text id="1">25</text> <text id="2">degrees</text> </binding> </visual> </tile> After we have decided on the template, let's start writing the code.
We have three different identical ways to implement a tile:
2.2.1. "Manual" implementation
The essence of this method is that we manually create the necessary Xml document and create a tile based on it:
var xml = @"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">25</text> <text id=""2"">Degrees</text> </binding> </visual> </tile>"; var xmlDocument = new XmlDocument(); xmlDocument.LoadXml(xml); var notification=new TileNotification(xmlDocument); TileUpdateManager.CreateTileUpdaterForApplication().Update(notification); 2.2.2. By preset pattern
In WinRT laid ready-made templates. Using the WinRT API “TileUpdateManager.GetTemplateContent” we can load the XmlDocument of any template and change the values using the XmlDocument API.
var xmlDocument = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareBlock); var nodes = xmlDocument.GetElementsByTagName("binding").First().ChildNodes; nodes[0].InnerText = "25"; nodes[1].InnerText = "Degrees"; var notification = new TileNotification(xmlDocument); TileUpdateManager.CreateTileUpdaterForApplication().Update(notification); Perhaps the most time-consuming option. It is necessary not only to remember about the structure of the template but also to write more code to set values.
2.2.3. Using the NotificationsExtensions Library
In the official examples , the NotificationsExtensions library is provided, created to simplify working with tiles. The library is a wrapper over the WinRT API and collects the necessary xml document. Let's look at how the implementation of our tile will look like with the help of this library.
ITileSquareBlock tileContent = TileContentFactory.CreateTileSquareBlock(); tileContent.TextBlock.Text = "25"; tileContent.TextSubBlock.Text = "Degrees"; TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification()); As we can see, the library somewhat simplifies working with tiles. Further in the article we will mainly consider the first method, since it gives a greater understanding of the processes and gives the necessary knowledge for the correct use of the second and third methods.
After we have decided on the method of implementation, we will add the following simple small logo to the manifest. (Small logo is optional and is optional).
Now, after launching our application, the main tile will “come to life”, and will change its image to a tile with our content (provided that the “square” tile mode is now):
For the "wide" tile, we will not have changes, we will consider further how to correctly implement tiles.
2.3. Live tiles Full implementation.
You may want to support not only a square tile but also a wide tile.
In order to add support for wide and square tiles at the same time, we need to combine them into one xml element.
Consolidation is easy enough - you need to combine the tags into one xml.
Those. if you selected a square tile pattern:
<tile> <visual> <binding template="TileSquareBlock"> <text id="1">25</text> <text id="2">degrees</text> </binding> </visual> </tile> and a template for a wide tile:
<tile> <visual> <binding template="TileWideText03"> <text id="1">25 degrees</text> </binding> </visual> </tile> then the combined version will look like this:
<tile> <visual> <binding template="TileSquareBlock"> <text id="1">25</text> <text id="2">degrees</text> </binding> <binding template="TileWideText03"> <text id="1">25 degrees</text> </binding> </visual> </tile> Add a small helper method that we will use later in the article to reduce the amount of code:
private TileNotification CreateNotification(string xml) { var xmlDocument = new XmlDocument(); xmlDocument.LoadXml(xml); return new TileNotification(xmlDocument); } Now the implementation for a wide and square tile will look like this:
var tile = CreateNotification(@"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">25</text> <text id=""2"">Degrees</text> </binding> <binding template=""TileWideText03""> <text id=""1"">25 degrees in Moscow</text> </binding> </visual> </tile>"); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); Since we now have content for a wide and square tile, when switching to the “wide” tile mode, we’ll see the following text:
The NotificationExtensions library also supports the ability to specify a wide and square tile. Consider a similar example using this library:
ITileSquareBlock squareTile = TileContentFactory.CreateTileSquareBlock(); squareTile.TextBlock.Text = "25"; squareTile.TextSubBlock.Text = "Degrees"; ITileWideText03 wideTile = TileContentFactory.CreateTileWideText03(); wideTile.TextHeadingWrap.Text = "25 degrees in Moscow"; wideTile.SquareContent = squareTile; TileUpdateManager.CreateTileUpdaterForApplication().Update(squareTile.CreateNotification()); Here, a “bunch” of two types of tiles is performed by specifying a link to a square tile wideTile.SquareContent = squareTile;
2.4. Link to images in tiles.
Graphic information is often the main or important component of a live tile. Consider one of the templates that provides the ability to display graphics. Let it be TileWideImage for a wide tile and TileSquareImage for a square .
Consider how to display graphics from different sources.
Add a small helper method to display these images.
private void ImageLiveTile(string squareImageUri, string wideImageUri) { var tile = CreateNotification(String.Format(@"<tile> <visual> <binding template=""TileSquareImage""> <image id=""1"" src=""{0}"" alt=""alt text""/> </binding> <binding template=""TileWideImage""> <image id=""1"" src=""{1}"" alt=""alt text""/> </binding> </visual> </tile>",squareImageUri,wideImageUri)); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); } First of all, we will look at how to display the tile that we have in the application in the Assets folder
ImageLiveTile(@"Assets\SquareTileLogo.png", @"Assets\WideTileLogo.png"); After which you can see the following tiles:
 |  |
Instead of relative paths, it is also possible to gain access to resources in the project along the absolute path. So we get a similar result at the following addresses:
ImageLiveTile(@"ms-appx:///Assets/SquareTileLogo.png", @"ms-appx:///Assets/WideTileLogo.png"); We also have the ability to display images from web resources. For example, let's take the same photo for flickr for a 150x150 square tile and a 320x159 wide tile.
ImageLiveTile(@"http://farm5.staticflickr.com/4019/4529892979_23bcdc7b1e.jpg", @"http://farm5.staticflickr.com/4019/4529892979_23bcdc7b1e_n.jpg");  |  |
The only thing you need to remember is that the pictures must be the right size. Too large images will not be displayed, and small tiles will be of poor quality after stretching.
It is also possible to refer to tiles in the local storage. To do this, use the ms-appdata prefix : /// local /
For example, let's add a small simple auxiliary method that saves a file from the specified address on the Internet to the file storage with the specified file name:
private async Task SaveImage(string url, string fileName) { var client = new HttpClient(); var bytes = await client.GetByteArrayAsync(url); var file= await ApplicationData.Current.LocalFolder.CreateFileAsync(fileName,CreationCollisionOption.ReplaceExisting); var writeStream = await file.OpenAsync(FileAccessMode.ReadWrite); var streamWriter = new BinaryWriter(writeStream.AsStreamForWrite()); streamWriter.Write(bytes); streamWriter.Flush(); } Now we can save the images to the local storage.
await SaveImage(@"http://farm5.staticflickr.com/4019/4529892979_23bcdc7b1e.jpg", "squareTile.jpg"); await SaveImage(@"http://farm5.staticflickr.com/4019/4529892979_23bcdc7b1e_n.jpg", "wideTile.jpg"); and refer to it when creating a live tile
ImageLiveTile(@"ms-appdata:///local/squareTile.jpg", @"ms-appdata:///local/wideTile.jpg"); 3. Managing the lifetime of a live tile.
As we have seen above, tiles receive any information. You may want to control the lifetime of this information and control the display time of tiles.
3.1. Disable tile
First of all, let's look at how you can turn off a tile:
TileUpdateManager.CreateTileUpdaterForApplication().Clear(); After executing this method, the tiles are replaced with the default tile.
3.2. Set the time limit of the tile.
We can also set the lifetime of a tile when it is created. For example, this may be for events that lose relevance after some time (for example, displaying information about the current broadcast in the broadcast).
As an example, let's set the live tile off after 10 seconds.
var tile = CreateNotification(@"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">40</text> <text id=""2"">Degrees</text> </binding> <binding template=""TileWideText03""> <text id=""1"">40 degrees in Moscow</text> </binding> </visual> </tile>"); tile.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); After executing the code and minimizing the application, we can see how the live tile appears and disappears after 10 seconds.
3.3. Setting the display of the tile on a schedule.
For example, if an event starts in an hour, then maybe we want the tile to be displayed not right now, but in an hour, when this event comes.
For example, if we want to install a tile in 10 seconds, we will write the following code.
var tile = CreateNotification(@"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">10</text> <text id=""2"">Degrees</text> </binding> <binding template=""TileWideText03""> <text id=""1"">10 degrees in Moscow</text> </binding> </visual> </tile>"); var scheduledTileNotification = new ScheduledTileNotification(tile.Content, DateTimeOffset.UtcNow.AddSeconds(10)); TileUpdateManager.CreateTileUpdaterForApplication().AddToSchedule(scheduledTileNotification); The ScheduledTileNotification method accepts an XmlDocument. (In this case, tile.Content contains an XmlDocument).
In the same way, we can combine a scheduled launch with a tile lifetime.
For example, the code that creates a tile after 10 seconds for 15 seconds looks like this:
var scheduledTileNotification = new ScheduledTileNotification(tile.Content, DateTimeOffset.UtcNow.AddSeconds(10)); scheduledTileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(25); TileUpdateManager.CreateTileUpdaterForApplication().AddToSchedule(scheduledTileNotification); 3.4. Managing the list of tiles according to the schedule (getting the list, deleting)
If we plan to use several tiles at once according to the schedule, then we need to use the possibility of assigning identifiers to tiles:
scheduledTileNotification.Id = "1"; We can get a list of all installed tiles by the schedule using the method TileUpdateManager.CreateTileUpdaterForApplication ()
var scheduledTiles = TileUpdateManager.CreateTileUpdaterForApplication(); Access to our tile, respectively, can be by ID
var tile = scheduledTiles.FirstOrDefault(i => i.Id == "1"); Now, for example, we can, if necessary, delete this tile.
if(tile!=null) { TileUpdateManager.CreateTileUpdaterForApplication().RemoveFromSchedule(tile); } 4. The queue of tiles.
In the WinRT API, we have the ability to queue up to 5 tiles that will be displayed cyclically.
All we have to do is enable the queue support method:
TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true); Accordingly, to disable the queue, we need to pass the value false.
Tiles can be of different patterns, but for simplicity, consider a small example with the same pattern.
Create a small helper method for installing the tile:
private void SetTile(int value) { var tile = CreateNotification(String.Format(@"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">{0}</text> <text id=""2"">Degrees</text> </binding> <binding template=""TileWideText03""> <text id=""1"">{0} degrees in Moscow</text> </binding> </visual> </tile>",value)); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); } Now, let's set a queue of several tiles that will be displayed cyclically.
TileUpdateManager.CreateTileUpdaterForApplication().Clear(); TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true); SetTile(15); SetTile(25); SetTile(35); And we will be able to see how we cyclically 3 tiles replace each other. The Clear method is needed to clear the queue, otherwise the next time we run the code, we will have a stack of 5 tiles with two identical tiles, which will lead to the fact that periodically the tile will be replaced by the same tile.
When using this method, it is necessary to more carefully check the work of tiles that are installed on a schedule, since they also fall onto the stack in the same way and will “spin” with the previous tile.
5. Event Indicator (Badges) in Tiles
We have the ability to display the event indicator on tiles (regardless of live or default tiles). The event indicator is displayed in the lower right corner and you can display a number (from 1 to 99 for example, the number of unread messages) or a glyph (application status).
You can read more about the event indicators on the MSDN page in Russian. Here we consider the implementation of the event indicator.
To work with indicators, we have a BadgeUpdateManager whose API is almost identical to the TileUpdateManager API.
Consider how to display the number 12 in the event indicator, for this we take the corresponding template from the MSDN page />
var xmlDocument = new XmlDocument(); xmlDocument.LoadXml(@"<badge value=""12""/>")); var badgeNotification = new BadgeNotification(xmlDocument); BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeNotification); Now we can observe an indicator with a value of 12 both on the default tile and on the live tile:
 |  |
In order to display the glyph, we need to replace the value 12 in the xml with one of the identifiers. For example on “attention”
xmlDocument.LoadXml(@"<badge value=""attention""/>")); In the same way as for tiles, we can set a lifetime limit for the event indicator:
badgeNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10); And, similarly, we can remove the indicator
BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear(); 6. Periodic updating of tiles (from remote resources)
It is often necessary to update tiles with data from any service / site. For example, if the weather changes during the day, then we may want to update the current air temperature once an hour.
For simplicity, we will create a new Web application that gives us a tile with the current time. If this is an ASP.NET application, add the HttpHandler, which returns us the xml of the tile with the current time:
public class TileHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/xml"; context.Response.Write(String.Format(@"<tile> <visual> <binding template=""TileSquareText02""> <text id=""1"">{0}</text> <text id=""2"">current time</text> </binding> <binding template=""TileWideText03""> <text id=""1"">Time: {0}</text> </binding> </visual> </tile> ",DateTime.Now.ToShortTimeString())); } public bool IsReusable {get { return false; }} } Now, for example, if the handler is located at localhost : 28457 / TileHandler.ashx, we can use this address to receive notifications.
The following code in the application starts checking and updating the tile every half hour:
TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(new Uri("http://localhost:28457/TileHandler.ashx"),PeriodicUpdateRecurrence.HalfHour); We can start updating the tile not immediately, but after a specified time. For example, the following code starts checking and updating tiles after 3 hours:
TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(new Uri("http://localhost:28457/TileHandler.ashx"), DateTimeOffset.UtcNow.AddHours(10), PeriodicUpdateRecurrence.HalfHour); Now, if we run the application, we will see the following tiles for a wide and square tile:
 |  |
It is also possible to establish a "queue" of tiles (as described in the section "Queue of Tiles"). The syntax is almost identical and instead of a single Uri we have the ability to specify a collection of Uri up to 5 elements.
First of all, we need to enable queue support:
TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true); Uri[] uriCollection=new [] { new Uri("http://localhost:28457/TileHandler1.ashx"), new Uri("http://localhost:28457/TileHandler2.ashx"), new Uri("http://localhost:28457/TileHandler3.ashx"), new Uri("http://localhost:28457/TileHandler4.ashx"), new Uri("http://localhost:28457/TileHandler5.ashx"), }; TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdateBatch(uriCollection,PeriodicUpdateRecurrence.HalfHour); Updating event identifiers occurs in an identical way.
For example, if we have the address localhost : 28457 / BadgeHandler.ashx which returns xml of the form />
The following code will request and update the indicator state once every half hour.
BadgeUpdateManager.CreateBadgeUpdaterForApplication().StartPeriodicUpdate(new Uri("http://localhost:28457/TileBadgeHandler.ashx"),PeriodicUpdateRecurrence.HalfHour); 7. Secondary Tiles
Secondary tiles allow the application to run on certain pages with certain parameters. A fairly detailed example of working with secondary tiles can be downloaded from MSDN examples. Consider working with secondary tiles.
7.1. Securing the secondary tile
To fix the secondary tile is quite simple:
For example, if we have a button for attaching a tile, we will write the following handler to the button for attaching a tile (for simplicity, we use the same logos as for the default tile):
private async void PinToStart_Click(object sender, RoutedEventArgs e) { SecondaryTile secondaryTile = new SecondaryTile() { TileId = "MyTileId", ShortName = "Tile short name", DisplayName = "Tile display name", Arguments = "MyTileArgument", TileOptions = TileOptions.ShowNameOnLogo | TileOptions.ShowNameOnWideLogo, Logo = new Uri("ms-appx:///assets/SquareTileLogo.png"), WideLogo = new Uri("ms-appx:///assets/WideTileLogo.png"), }; bool isPinned = await secondaryTile.RequestCreateAsync(); } TileId is a unique identifier of a tile and is used later for work with a specific tile (delete, update, launch, etc.)
For the main tile, the unique identifier “App” is used. This identifier can be considered reserved and you can’t fix a tile with such an identifier (since obviously such a tile already exists). Attempting to delete a tile with such an identifier leads to the fact that we have lost links from the start screen and the list of programs, and the possibility of further work with secondary tiles is completely "falling off".
Obviously, this bug, and most likely it will be fixed, but in any case, it is strongly not recommended to use “App” as an identifier.
After clicking on the button, we will have the following dialog box for attaching the tile:
7. 2. Activation of the application from the secondary tile
After we have created the secondary tile, it is necessary to process the activation of the application by the secondary tile.
To do this, in the AppXaml.cs method we can handle the args launch arguments. We can get from this parameter the TileId tile identifier and argument. For simplicity, we implement the script when a special page is opened in the application when activated on a tile.
To do this, in the same App.xaml.cs file in the OnLaunch method, we will add to the beginning of the method a code for switching to another page, provided that it is activated from the secondary tile
protected override void OnLaunched(LaunchActivatedEventArgs args) { var tileId= args.TileId; if (tileId == "MyTileId") { if(Window.Current.Content ==null) { Window.Current.Content=new Frame(); } var secondaryTileArgument = args.Arguments; ((Frame)Window.Current.Content).Navigate(typeof(SecondaryTilePage), secondaryTileArgument); Window.Current.Activate(); return; } … } Now, when the application is activated from the secondary tile, the transition to the tile page will be made and the value used to pin the tile will be passed as an argument.
The above code has a significant drawback. After activating the application by the secondary tile and moving to a special page, when you try to start the application from the main tile, we will again be on the page for the secondary tile. This problem has many solutions. One of the solutions is to remember that the application was activated on the secondary tile, and on the next activation, on the main tile, try to go to the previous page, if it exists. Otherwise, run the application according to the default script.
7. 3. Deleting a fixed tile
The user can detach the tile from the start screen independently from the context menu of the tile. If necessary, we can request the detachment of the tile. The user clearly has to confirm the tile release.
Add a Unpin button and a handler to the button:
private async void UnPinFromStart_Click(object sender, RoutedEventArgs e) { if(Windows.UI.StartScreen.SecondaryTile.Exists("MyTileId")) { SecondaryTile secondaryTile = new SecondaryTile("MyTileId"); bool unpinned = await secondaryTile.RequestDeleteAsync(); } } The SecondaryTile.Exists () method allows you to check for a pinned tile on your desktop.
When executing this code, the user must confirm that he wants to delete the secondary Tile, after which the tile will be deleted
7. 4. "Revitalization" of the secondary tile
Secondary tiles can also be made "alive". The API for the secondary tile is identical to the main tile.
To work with secondary tiles, use the TileUpdateManager.CreateTileUpdaterForSecondaryTile (tileId) method.
Similar example for secondary tile
var tile = CreateNotification(@"<tile> <visual> <binding template=""TileSquareBlock""> <text id=""1"">25</text> <text id=""2"">Degrees</text> </binding> <binding template=""TileWideText03""> <text id=""1"">25 degrees in Moscow</text> </binding> </visual> </tile>"); TileUpdateManager.CreateTileUpdaterForSecondaryTile("MyTileId").Update(tile); 8. Managing Live Tiles via Background Task and Push Notification
The BackgroundTask and PushNotification themes deserve a separate article each.
Here we consider the principle of working with tiles for both topics.
8.1. Background Task
A quick introduction to creating background tasks can be found in MSDN
In the OnCompleted method, when a background task is triggered, we can set LiveTile
void OnCompleted(BackgroundTaskRegistration sender, BackgroundTaskCompletedEventArgs args) { var tile = CreateNotification(String.Format(@"<tile> <visual> <binding template=""TileSquareText04""> <text id=""1"">{0}</text> <text id=""2""></text> </binding> <binding template=""TileSquareText02""> <text id=""1"">{0}</text> <text id=""2""></text> </binding> </visual> </tile>", DateTime.Now.ToString("hh:mm:ss"))); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); } 8. 2. Push Notification
Windows 8 push notification- .
WNS push notification MSDN . . :
public string PostToWns(string secret, string sid, string uri, string xml, string type = «wns/toast») {}
type “wns/tile”
xml tile.
Example:
string xml = @"<tile> <visual> <binding template=""TileSquareText04""> <text id=""1"">Tile text1</text> <text id=""2"">Tile text2</text> </binding> <binding template=""TileSquareText02""> <text id=""1"">Tile text1</text> <text id=""2"">Tile text2</text> </binding> </visual> </tile>"; — msdn Content-Type ContentLength:
request.Headers.Add("X-WNS-Type", type); request.Headers.Add("Authorization", String.Format("Bearer {0}", accessToken.AccessToken)); request.ContentType = "text/xml"; request.ContentLength = xml.Length; WNS .
secret sid :
sid: «ms-app://s-1-23-2-3112458577-1770873644-3250801218-3829720502-2556658560-167841413-2364691272»;
secret: «DcQWqb7eL7oIwVCr8yIOo-aQQRplPDL3»;
API .
PS stasus petrishko , .
Source: https://habr.com/ru/post/149219/
All Articles