Skip to main content

HelloTiles – A Simple C# Xaml Application for WinRT/Windows8 to demonstrate Metro Tile Updates

image 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"
    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"/>

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()

        private void Button_Click(object sender, RoutedEventArgs e)

        void ClearTileNotification()
            // the same TileUpdateManager can be used to clear the tile since 
            // tile notifications are being sent to the application's default tile

        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(&quot;text&quot;);

            // create the notification from the XML
            var tileNotification = new TileNotification(tileXml);

            // send the notification to the app's default tile

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!!

Popular posts from this blog

Top 7 Coding Standards & Guideline Documents For C#/.NET Developers

Some time back, I collated a list of 7 Must Read, Free EBooks for .NET Developers, and a lot of people found it useful. So, I thought about putting together a list of Coding Standard guidelines/checklists for .NET /C# developers as well.As you may already know, it is easy to come up with a document - the key is in implementing these standards in your organization, through methods like internal trainings, Peer Reviews, Check in policies, Automated code review tools etc. You can have a look at FxCop and/or StyleCop for automating the review process to some extent, and can customize the rules based on your requirements.Anyway, here is a list of some good Coding Standard Documents. They are useful not just from a review perspective - going through these documents can definitely help you and me to iron out few hidden glitches we might have in the programming portion of our brain. So, here we go, the listing is not in any specific order.1 – IDesign C# Coding StandardsIDesign C# coding stand…

Creating a quick Todo listing app on Windows using IIS7, Node.js and Mongodb

As I mentioned in my last post, more and more organizations are leaning towards Web Oriented Architecture (WOA) which are highly scalable. If you were exploring cool, scalable options to build highly performing web applications, you know what Node.js is for.After following the recent post from Scott Hanselman, I was up and running quickly with Node.js. In this post, I’ll explain step by step how I’ve setup Node.js and Mongodb to create a simple Todo listing application.Setting up Node.jsThis is what I’ve done.1 – Goto, scroll down and download node.exe for Windows, and place it in your c:\node folder2 – Goto IIS Node project in Git at, download the correct ‘retail’ link of IIS Node zip file (I downloaded the already built retail package, otherwise you can download and build from the source).3 – Extract the zip file some where, and run the install.bat or install_iisexpress.bat depending on your IIS Version. If you don’t have IIS in…

MVVM - Binding Multiple Radio Buttons To a single Enum Property in WPF

I had a property in my View Model, of an Enum type, and wanted to bind multiple radio buttons to this.

Firstly, I wrote a simple Enum to Bool converter, like this.

public class EnumToBoolConverter : IValueConverter { #region IValueConverter Members public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { if (parameter.Equals(value)) return true; else return false; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { return parameter; } #endregion }

And my enumeration is like

public enum CompanyTypes { Type1Comp, Type2Comp, Type3Comp } Now, in my XAML, I provided the enumeration as the ConverterParameter, of the Converter we wrote earlier, like