Posts
To get the taste of Windows8 and WinRT, Let us develop a quick C# + Xaml application that sends notifications to the Metro UI Tiles. Before jumping in, make sure you read about
So, let us create a quick app. Here we go.
About Tiles
As you might have already seen in the Demos, Windows 8 start screen features Tiles, as start points of the application. Your applications can send notifications to tiles, so that they are displayed in the start screen, above the tile. The types for Tile manipulations are in the namespace Windows.UI.Notifications
Basically, we are interested in three classes.
- TileNotification
- Defines an update to a tile, including its visuals, identification tag, and expiration time.
- TileUpdateManager
- Creates TileUpdater objects used to change and update Start menu tiles. This class also provides access to the XML content of the system-provided tile templates so that you can customize that content for use in updating your tiles.
- TileUpdater
- Changes the appearance or content of the specific tile that the updater is bound to.
About Our HelloTiles Application
The Samples pack that comes with Windows 8 SDK has a Javascript/HTML sample for basic and advanced tile manipulation, so I thought about putting together a quick C#/XAML application along the same lines. So, you can see our tile, just under the “Weather” tile, with notification “tiles are cool”.
So, to start with, we’ll create a simple C#/XAML application for Windows RT, with a very simple Textbox and Button, and when the user enter some notification and click Send, the tile will be updated in the Start screen. This is just a demo scenario, and you know how to do better in an actual application –i.e, you can send a notification when something interesting happens in your application. Tiles are just one way to notify the user, but for now, let us keep things simple and create a quick notifier application, some what like this.
Creating The Project and Punching in some code
Time for some action. Let us fire up Visual Studio 2011, and create a new C#/XAML Metro application. Name it HelloTiles.
The project will get created, and you’ll find the App.xaml and MainPage.xaml files in the Project explorer. This should not surprise you if you have worked with Silverlight/WPF projects earlier. How ever, as I mentioned in my earlier article remember that the Xaml libraries are now directly part of WinRT and no longer run on top of the CLR, so most of the Xaml controls and types are now moved under Windows.UI* namespaces.
Along with the Xaml files, you’ll also find a Package.appxmanifest file. Open that and change the “Initial Rotation” to Landscape. Also, specify a suitable image for the wide logo so that the notification display will work correctly (by default it is not there, add a new image of the specified dimension to the images, and pick it against the wide logo field).
Now, let us write some code.
1 – The UI Code
The UI code is very minimal, let us open MainPage.xaml and replace the Xaml code there with this. Basically, we have a very simple stack panel, and a text box and a button.
<UserControl x:Class="HelloTiles.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="LayoutRoot" >
<TextBlock Text="Tile Notifier" FontSize="100" VerticalAlignment="Center"/>
<StackPanel Orientation="Vertical" Margin="20" >
<TextBox Text="Message to send" Name="txtMain" Width="500" VerticalAlignment="Center" Margin="2"/>
<Button Content="Send Notification" Click="Button_Click" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</UserControl>
2 – Code behind for sending notifications
Now, let us send the notification to the tile when ever the user clicks the button. See that we already have a Button_Click event handler as part of the XAML, so now let us add some meat behind. Open Manpage.xaml.cs, and add the button handler, and the ClearTileNotification and SendTileNotification methods there. I had a look at the Javascript example, and almost did a quick line by line translation. Remember, we are accessing WinRT types and methods from here as well as from Javascript, so it was very easy. using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Notifications;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
namespace HelloTiles
{
partial class MainPage
{
public MainPage()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
ClearTileNotification();
SendTileTextNotification(this.txtMain.Text,30);
}
void ClearTileNotification()
{
// the same TileUpdateManager can be used to clear the tile since
// tile notifications are being sent to the application's default tile
TileUpdateManager.CreateTileUpdaterForApplication().Clear();
}
void SendTileTextNotification(string text, int secondsExpire)
{
// Get a filled in version of the template by using getTemplateContent
var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
// You will need to look at the template documentation to know how many text fields a particular template has
// get the text attributes for this template and fill them in
var tileAttributes = tileXml.GetElementsByTagName("text");
tileAttributes[0].AppendChild(tileXml.CreateTextNode(text));
// create the notification from the XML
var tileNotification = new TileNotification(tileXml);
// send the notification to the app's default tile
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
}
}
}
The app is pretty simple, what we are doing is,
- Getting the Tile Template type by calling GetTemplateContent as an Xml document
- Modify the text in the Xml
- Create a tile notification using that Xml
- Sending that to the Tile.
As I mentioned in the above step, make sure you are setting a valid logo for the Wide logo, and changing the initial rotation to Landscape. For available tile formats, you can refer the Tile schema if you are interested to see the available tile templates and how they look like.
Run the application, enter something in the textbox, and click the button. Now, hit your Win key and go to the Start screen, you should see the notification there. Ensure that your tile is in landscape mode, you can right click a tile to modify it’s properties or to un-install the application. Happy Coding!!
