Universal Windows Platform | Live tiles & Push Notification

Live tiles and push notification are the essential features of Universal Windows Platform Application. These are the key features of Modern Application. Also, this show important information without opening the application which runs in background. So, it’s really helpful for getting the needed information just looking at the phone or get notified when new messages or updates arrived.

Live tiles

Live tiles usually show some information of the application just glancing at the screen. It updates automatically. In Universal Windows Platform Application, there are four types of tiles available (e.g., small, medium, wide and large).

To implement Live tiles in your application is really an easy task. Firstly, create a simple button control.

  1. <StackPanel>  
  2.     <Buttonx:Name="button" Height="Auto" Width="Auto" Content="Notification Agent" Click="button_Click" Margin="10,10,0,0" />  
  3. </StackPanel>  
Listing: 1

Then, for Live tiles, we need to create a new instance of SecondaryTile and we want to show the current date-time on that. So, the code behind is given below.
  1. vartileID = "DateTile";  
  2.   
  3. SecondaryTile tile = new SecondaryTile(tileID, DateTime.Now.ToString(), "args", newUri("ms-appx:///Assets/DefaultSecondaryTileAssests/Medium.png"), TileSize.Default);  
  4. tile.VisualElements.Square71x71Logo = newUri("ms-appx:///Assets/DefaultSecondaryTileAssests/Small.png");  
  5. tile.VisualElements.Wide310x150Logo = newUri("ms-appx:///Assets/DefaultSecondaryTileAssests/Wide.png");  
  6. tile.VisualElements.Square310x310Logo = newUri("ms-appx:///Assets/DefaultSecondaryTileAssests/Large.png");  
  7. tile.VisualElements.ShowNameOnSquare150x150Logo = true;  
  8. tile.VisualElements.ShowNameOnSquare310x310Logo = true;  
  9. tile.VisualElements.ShowNameOnWide310x150Logo = true;  
  10.   
  11. awaittile.RequestCreateAsync();  
Listing: 2

Here, we’ve created a tileID, which is unique for any tile. After that, we’ve created a new instance of SeocondaryTile and pass the tileID, current date-time, set the medium tile image for that. Next, we’ve set three different sizes of square logos for that and made their visibility true. Finally, we’ve set the RequestCreateAsync for the specific tile. Most importantly, the button click method is not async initially, so we’ve to modify it as an async method because the RequestCreateAsync method is an await operation. Now, if you run the application, after click the button, a new window will pop up because we’ve set that in the Secondary tile constructor. Click yes and the tile will appear in your start menu.
fig1

Toast Notification

A Toast Notification is a window element which display some message or information for Universal Windows Platform Application. It will also navigate to the related window of the notified segment. Similar to the Live tiles, just make a button control (see listing 1) or you can use the same code block for this.

The implementation is quite easy. It has mainly three steps, firstly make the template, secondly put the information you want to display, lastly the toast.
  1. var template = ToastTemplateType.ToastText01;  
  2. var xml = ToastNotificationManager.GetTemplateContent(template);  
  3. xml.DocumentElement.SetAttribute("launch""Args");  
  4.   
  5. var text = xml.CreateTextNode(DateTime.Now.ToString());  
  6. var elements = xml.GetElementsByTagName("text");  
  7. elements[0].AppendChild(text);  
  8.   
  9. var toast = newToastNotification(xml);  
  10. varnotifier = ToastNotificationManager.CreateToastNotifier();  
  11. notifier.Show(toast);  
Listing: 3

So, we made a single text template and define the template like an XML template. We set the text of today’s date and time and pass the xml template to the toast notification.

If you run the application, it’ll look like this.
fig

You can also find it in the ACTION CENTER.

fig

Closure

Hopefully you understand, the procedure and implementation of Live tiles and Toast Notification agent. These are really helpful and make your application more complete and professional. Happy coding!

Download the source code.

 


Similar Articles