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”.

tilesarecool

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.

ui

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.

image

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

image

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

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…

Hack Raspberry Pi – How To Build Apps In C#, WinForms and ASP.NET Using Mono In Pi

Recently I was doing a bit of R&D related to finding a viable, low cost platform for client nodes. Obviously, I came across Raspberry Pi, and found the same extremely interesting. Now, the missing piece of the puzzle was how to get going using C# and .NET in the Pi. C# is a great language, and there are a lot of C# developers out there in the wild who are interested in the Pi.In this article, I’ll just document my findings so far, and will explain how develop using C# leveraging Mono in a Raspberry Pi. Also, we’ll see how to write few minimal Windows Forms & ASP.NET applications in the Pie as well.Step 1: What is Raspberry Pi?Raspberry Pi is an ARM/Linux box for just ~ $30. It was introduced with a vision to teach basic computer science in schools. How ever, it got a lot of attention from hackers all around the world, as it is an awesome low cost platform to hack and experiment cool ideas as Pi is almost a full fledged computer.  More About R-Pi From Wikipedia.The Raspberry Pi

5 Awesome Learning Resources For Programmers (To help you and your kids to grow the geek neurons)

Happy New Year, this is my first post in 2012. I’ll be sharing few awesome learning resources I’ve bookmarked, and will be pointing out some specific computer/programming related courses I've found interesting from these resources.Also, thought about saving this blog post for my kids as well - instead of investing in these Child education schemes (though they are too small as of today, 2 years and 60 days respectively ). Anyway, personally my new year resolution is to see as much videos from this course collections (assuming I can find some free time in between my regular job && changing my babies diapers).1 – Khan AcademyAs I mentioned some time back, you and your kids are missing some thing huge if you havn’t heard about Khan Academy.  It is an awesome learning resource, especially if you want to re-visit your basics in Math, Science etc.With a library of over 2,600 videos covering everything from arithmetic to physics, finance, and history and 268 practice exercises, th…