Development of Windows 8.1 applications on XAML / С #. Part 2. Working with tiles

We continue to upgrade the application that we created in the last article .

Today we will analyze how to create tiles (Tile) for Windows 8.1 applications and how to implement dynamic content change on them.

Tiles - this is what you see, being on the main screen of windows 8 or windows 8.1. These are not just icons. They are interactive. They may contain textual and graphical information about changes in the content of the application, attract the user's attention and encourage you to use your application more often.
')


Why are tiles so important? The tile is the door to your application, the user should like it and not annoy it. Otherwise, he will detach it from the start screen and soon forget about the application.

You can use the following types of tiles for your applications:

• Large tile (310 x 310 pixels);
• Medium tile (310 x 150 pixels);
• Medium tile (150 x 150 pixels);
• Small tile (30 x 30 pixels).

All of them are shown in the picture below.



You can find ready-made options for tiles and placing information on them in the catalog of tile templates .

Customize tiles for the app

Use the default settings to create simple tiles.

1. Open the application from the previous article or create a new Windows 8.1 application in Visual Studio 2013.
2. Double-click on package.appxmanifest . The manifest editor window opens.
3. Specify tile information:

• Select the Visual Assets tab in the manifest editor.
• Replace default images on the way to your images.
• Specify whether to display the short application name on the tile.
• Depending on the background color, choose a light or dark font for the title text.
• Accept the default background color or specify your own color string.

4. Start the application and experiment with the tiles.



As you can see, the tiles work and display the prepared pictures.

Now it's time to add interactivity and learn how to dynamically update the contents of the tile.

Update tile info

There are several ways to implement the update information on the tile:

• Local update - updating the tile directly while the application itself is running.
• At a specified time - update the tile at the time you specified.
• Periodically - updating tiles on a schedule, by polling external services to get new content.
• Using Push Notifications - updating tiles by sending notifications from external services or systems to our application.

Depending on the tasks and requirements for your application, you can choose one of these options or combine their use.

Now consider each of the options in more detail.

Local tile update

To implement the update of the tile, directly from the application, we will add an event handler for the "Buy" button in the product catalog. When you click on the button, the tile application will be updated with information about the selected product.

1. Open the application from the previous article.
2. In Solution Explorer, open the HubPage.xaml file and add a Click event handler for the Buy button and a parameter with the identifier of the item being ordered.



3. An empty event handler was automatically generated in the HubPage.xaml.cs file. Let's write the following code there:

private void Button_Click(object sender, RoutedEventArgs e) { string TileXmlString = "<tile>" + "<visual version='2'>" + "<binding template='TileSquare150x150Text04' fallback='TileSquareText04'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileWide310x150Text03' fallback='TileWideText03'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileSquare310x310Text09'>" + "<text id='1'>{0}</text>" + "</binding>" + "</visual>" + "</tile>"; var group = (SampleDataGroup)this.DefaultViewModel["Group1Items"]; if (group != null && group.Items.Count > 0) { IEnumerable<SampleDataItem> dataItems = group.Items.Where(item => item.UniqueId == ((Button)sender).CommandParameter); if (dataItems != null && dataItems.Count() > 0) { XmlDocument tileDOM = new XmlDocument(); tileDOM.LoadXml(string.Format(TileXmlString, " : " + dataItems.FirstOrDefault().Title)); TileNotification tile = new TileNotification(tileDOM); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); } } } 

To indicate what type our new tile will be and what will be written on it - we used xml, taken from one of the standard tile patterns in the catalog.

TileNotification class - creates a message object for updating a tile.

The actual update itself is done by calling the TileUpdateManager.CreateTileUpdaterForApplication (). Update (tile);

4. Now you can start the application, click on the "buy" button and find information about the selected product on the tile.

Update tile at a specified time

It is possible to change the tile not immediately, but after some time.
For example, you can make it change 3 hours after the occurrence of an event. To do this, you can modify the Button_Click event handler by adding the following code instead of the last lines:

 Int16 dueTimeInHours = 3; DateTime dueTime = DateTime.Now.AddHours(dueTimeInHours); ScheduledTileNotification scheduledTile = new ScheduledTileNotification(tileXml, dueTime); scheduledTile.Id = "Future_Tile"; TileUpdateManager.createTileUpdaterForApplication().AddToSchedule(scheduledTile); 

Periodic tile update

Periodic updates are a great way to deliver tile updates to a large audience of users. This method is a bit more complicated to implement and requires a web service on the Internet that implements the logic for generating and transmitting tiles to the client Windows application. The web service should return XML content in a specialized format.

Now we will create a WCF REST service that will provide information for updating the tile.

Creating a web service:

1. Open Solution Explorer and select Add New Project from the context menu of the solution.
2. As a project template, select the WCF Service Application and give it a name.



3. As a result, a web service project was created, containing the interface and the web service class itself.
4. Open the Service1.cs file and replace the interface code:

  [ServiceContract] public interface IService1 { [WebGet(UriTemplate = "/Tile")] [OperationContract] XElement GetTile(); } 

5. Rename the Service1.svc file to TileService.svc and replace its code:

  public class TileService : IService1 { private const string TileXmlString = "<tile>" + "<visual version='2'>" + "<binding template='TileSquare150x150Text04' fallback='TileSquareText04'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileWide310x150Text03' fallback='TileWideText03'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileSquare310x310Text09'>" + "<text id='1'>{0}</text>" + "</binding>" + "</visual>" + "</tile>"; public XElement GetTile() { string xml = string.Format(TileXmlString, "    " ); return XElement.Parse(xml); } } 

With this code, we generate xml in a format understandable for tiles.

4. Run the web service project and call the method. The web service must process and return the xml.

Setting up a web service call in a Windows application:

1. In Solution Explorer, open Package.appxmanifest and specify the tile update settings:

• Web service address;
• Service call interval.

2. Now you can run the application, wait 30 minutes and see the changes on the tile.



You can also call the web service and update the tiles programmatically.
This code creates or updates the task of periodically updating the tile from the web service once every half hour:

 var tileupdater = TileUpdateManager.CreateTileUpdaterForApplication(); tileupdater.StartPeriodicUpdate(new Uri("http://localhost:32298/TileService.svc/Tile"), PeriodicUpdateRecurrence.HalfHour); 

Attention: the task will be executed even if you remove the tile from the main screen. Most likely you will need to remove the task of updating the tile for some events, for this you need to run the following code:

 var tileupdater = TileUpdateManager.CreateTileUpdaterForApplication(); tileupdater.StopPeriodicUpdate(); 

Update tiles using push notifications

Push notifications - perfect for updating tiles in real time. For example, an order in a store changed status or a new message appeared in the social network.
Push notifications require an external service that will manage the flow of notifications and deliver them to client applications using Windows Push Notification Services (WNS) .

We will use Windows Azure Mobile Services to create and manage push notifications. You can enjoy a free trial month using Windows Azure.

You can configure Windows Azure Mobile Service for Windows applications without leaving Visual Studio:

1. Open Solution Explorer . In the context menu of the project, select Add / Push Notification .



2. Fill in the wizard that opens. In the process, you will need to use an existing or create a new Windows Store developer account.



3. At the end of the wizard, a mobile service will be created in Windows Azure. We will return to it later.



4. Pay attention to what happened with the project.
The class push.register.cs was added to the project to enable interaction with the mobile service.



5. In the App.xaml.cs file, in the application launch event, a change was also made.
This is where the push notification channel is initialized.

 public static Microsoft.WindowsAzure.MobileServices.MobileServiceClient nokiaproductsClient = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient( "https://nokiaproducts.azure-mobile.net/", "LKcaeBgDWQTEJFiifTiRzhZBdfIkLM35"); //… protected override async void OnLaunched(LaunchActivatedEventArgs e) { //… eShop.nokiaproductsPush.UploadChannel(); //… } 

6. Now we need to teach the mobile service to send notifications to the application.
7. To do this, go to the Windows Azure Control Panel (https://manage.windowsazure.com/), then Mobile Services , select the mobile service, go to the Data tab and select an available data transfer channel.



8. On the page that opens, click on the Script tab.
9. A JavaScript file will open in which you can write code and generate notifications.



10. Edit the file, replacing the code with the following:

 function insert(item, user, request) { request.execute({ success: function() { request.respond(); sendNotifications(); } }); function sendNotifications() { var channelsTable = tables.getTable('channels'); channelsTable.read({ success: function(devices) { devices.forEach(function(device) { push.wns.sendTileWideText04(device.channelUri, { text1: '  ' }, { success: function(pushResponse) { console.log("Sent tile:", pushResponse); } }); }); } }); } } 

11. Save the script.



12. Return to Visual Studio and run the application.



The tile will instantly change to what was specified in the script.

So, we learned how to implement dynamically updated tiles for Windows applications in various ways. In the following articles, we will continue to comprehend the development of Windows 8.1 applications with simple examples.

Download the resulting application on SkyDrive at the link: http://sdrv.ms/1gKm4IJ

Useful materials

Making tiles
Catalog of ready-made tile patterns
Choosing a notification delivery method
General information about periodic notifications
Understanding Push Notifications