Creating A Live Tile Application In Windows 8

1. January 2013 11:20

C# Windows 

Developing application for Windows 8 is fun. I love the UI and the idea of having a live tile for my application. So I try building a live tile application, but unfortunately I can’t find a simple written article or a blog post. I even found MSDN to be a bit difficult for the newbies to get the grasp in first go. There are lot of things to understand and to worked on for creating a live tile in Windows 8. For this post I am just covering the main points. First, create a new Windows store application.

Now to implement in the live tile, there are 2 different ways. For this post I am showing one way using the built-in classes and another way using the NotificationExtensions library from Microsoft. For the tile color, application splash screen, logo and other properties in the package.appxmanifest file. I am not making any changes to this file and using the default values.

For the simplest implementation I have added a button and the code to change image on my tile. There are different types of tiles that you can select with using TileTemplateType enumeration. To keep it simple I am using TileSquareImage which will just show an image in a square tile. Here is the simplest way of using it: Add the below namespaces:

using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;

Add the below code on the click of the button:

XmlDocument xmltile = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);
XmlNodeList imgNode = xmltile.GetElementsByTagName("image");
imgNode[0].Attributes[1].NodeValue = "ms-appx:///Assets/pic.png";
TileNotification tileNotify = new TileNotification(xmltile);

At line number 1, I have used the enumeration TileTemplateType to select the tile type. After you choose the tile type the first line of code above will return the XML that will render the live tile. Depending on the type of tile you have selected the XML is generated and you need to supply the text and images to it to render it properly. You will face problem if you are not aware of the XML for the type of tile you have selected. I came up with a simple solution to overcome this. I declare a temporary string variable and then store the XML from the xmltile object using the GetXML() method. It look something like this:

string tempXml = xmltile.GetXml();

Put a breakpoint and get the XML. In my case where I am using TileSquareImage, therefore my XML looks something like this:

<binding template="TileSquareImage">
<image id="1" src=""/>

The code at line 2 and 3 will first get the node and set the image to be displayed on the tile. If you look in the solution explorer, you will see a folder labelled Assets. You can place the image file for the tile in this folder and then set the path of the image in the above code. After setting the XML for the tile, it now time to update the tile. I will now use TileNotification class and then pass XmlDocument object  (xmltile) as a parameter and then finally call the TileUpdateManager class to update the tile. Below is my live tile in action:

If you right click the tile, notice the option turn live tile off. This means that the tile is a live tile and you can turn off the live notifications if you wish.

For this post, this is it. In the next post I will show how to update the live tile using Notification Extension library and how to animate a tile. I hope this post helps you to understand and gets you started in building a live tile application.

 No Rating

SocialCounter.NET - .NET Library To Get Social Stats

4. January 2012 14:32

API C# Projects Web 

Few months back I have shared a code snippet on my blog which will get Twitter followers count, Facebook page like counts and Feed readers count. Now I have release a complete set of functions including Google plus counts, Facebook friends count and there will be more to come as I explore more.

You can read in more detail about the library here.

 No Rating

Getting Started With NETMF And Netduino

25. June 2011 08:59

.NET Micro Framework C# 

My Netduino card arrived this Sunday but I was not able to play with my new development board due to some serious "crap work" I was doing. Today I was able to run a small piece of code which blinks the user LED on the Netduino board. The code is simple enough and just like "hello world" example like we have for all other programming languages.
Here is my Netduino kit:
The best part of this development board is that it is the advanced version of the very famous Ardunio boards. Below is the detailed comparison of the three boards.
Netduino Arduino Uno Arduino Mega 2560
CPU Atmel ATSAM7X Atmel ATmega328 Atmel ATmega2560
Architecture 32-bit ARM7 8-bit AVR 8-bit AVR
Clock 48 Mhz 16 Mhz 16 Mhz
MIPS / Mhz 0.9 1 1
MIPS 43.2 16 16
Code 128 KB 32 KB 256 KB
RAM 60KB 2 KB 8 KB
Flash 512 KB 32 KB 256 KB
SRAM 128 KB 2 KB 8 KB
Pins 14 Dig. I/O (4 PWM) 14 Dig. I/O (6 PWM) 54 Dig. I/O (14 PWM)
  6 analog-in or digital I/O 6 analog-in 16 analog-in
UARTs 2 1 4
output limits 8 mA / pin & 40 mA per Pin 40 mA per Pin
16 mA / PWM
As you can see from the above comparison, the Netduino board is 3x faster than the Arduino and on the top it has 30x the RAM and check the processor 32-bit ARM7 awesome!!
Getting Started

To get started, you first need to set up your machine with some SDKs from Microsoft and Netduino. Below is the list of the SDKs you need to install on your development machine:
This is it and you are good to go with your first Netduino application. Fire Visual Studio and create new project under Micro Framework and select Netduino Application.
I have named the project Blink because we are going to blink the LED on board. As you can see there are two LEDs on the board. The one near the micro-USB indicates power (white) and the one near the onboard button is user LED (blue).
We are going to blink the user LED and for this I am going to use the code from the getting started guide form Netduino (nothing fancy here from my side) I am just re-using the code. below is the code you have to put inside you main method:
OutputPort led = new OutputPort(Pins.ONBOARD_LED, false);
while (true)
        led.Write(true); // turn on the LED
        Thread.Sleep(250); // sleep for 250ms
        led.Write(false); // turn off the LED
        Thread.Sleep(250); // sleep for 250ms

Now before you hit F5 go to project properties and under .NET Micro Framework change the Transport mode from Emulator to USB. As soon as you change the Transport mode you will notice the Device has been changed from Microsoft Emulator to Netduino_Netduino. Now press F5 and the application will get deployed to your Netduino board.


Here is a short video of the same deployed application on my board.


This is just a simple thing to do with a small but powerful development board. There are people around the globe building some amazing things with Netdunio and Arduino shields. In my next post I will show you how to erase Netduino memory for other application to deploy.

Below are some of the resources that I think you may find useful:



 No Rating

Syntax Highlighter In WPF

9. May 2011 16:55

C# Code Snippets Projects Visual Studio WPF 

If you are writing code for a while now then by now you must have a lot of code snippets which you will be using in your application development, and you use them because they save a lot of development time. At this moment I have now a huge collection of code snippets which includes functions, classes, extension methods and functions that I have extracted from different open source applications.
As I was progressing towards building an application in WPF which helps me managing all my code, a thought ran into my mind that it would be good if I could use syntax highlighting in the code. As usual I began my search to find a control in WPF which supports syntax highlighting and what I found, I was and I am at present satisfied. The control called AvalonEdit is a part of the free IDE called SharpDevelop for C# and VB.NET and Boo projects.
Languages support by the control:
  • HTML
  • JavaScript
  • XML
  • XMLDoc
  • VB.NET
  • C#
  • C++
  • Coco
  • Java
  • PHP
  • Patch
  • Boo
  • TeX
  • Custom Highlighting
I am a .NET guy so I will be using it for highlighting C# code. Fire Visual Studio and create a new WPF project. Add ICSharpCode.AvalonEdit.dll in the reference of your project.

After adding the reference in your project, add below XAML code on the window where you have your code window.
<Window x:Class="SyntaxHighlighter.MainWindow"
        Title="MainWindow" Height="401" Width="617" Loaded="Window_Loaded">
<avalonEdit:TextEditor  Name="txtCode"
At line 4, we will use custom mapping (because it is a third-party control) so we can use the control in our project. At line 7, I have used TextEditor class of the AvalonEdit namespace. The font name and size is the same as of the source code text editor in Visual Studio 2010.
To get the control working with least configuration set some namespaces on the top, and two lines of code on window load for syntax highlighting and to show line numbers respectively.
using ICSharpCode.AvalonEdit.CodeCompletion;
using ICSharpCode.AvalonEdit.Folding;
using ICSharpCode.AvalonEdit.Highlighting;
txtCode.SyntaxHighlighting = HighlightingManager.Instance.GetDefinition("C#");
txtCode.ShowLineNumbers = true;
If you wish to change the language, then just change the name of the language which is passed as a parameter in the GetDefinition method. The code in the Window_Loaded method will allow you to set syntax highlighting specifically for C#, pretty simple but not very useful. Check out the other way where the text editor will load the file and by reading the file extension, it will set the syntax highlighting. Above method will be useful if the user wants to set syntax highlighting of his choice. But if you want to detect the language and get the syntax highlighting automatically, then use the below code.
txtCode.SyntaxHighlighting = HighlightingManager.Instance.GetDefinitionByExtension(System.IO.Path.GetExtension("D:\\Data.cs"));
txtCode.ShowLineNumbers = true;
The first line of code will Load the file and the second file will first get the extension of the file loaded, set the instance of the HighlightingManager class and in the end set the syntax highlighting. This is what I got in the end (I am using the second way to load the file).

Note: To make sure that the second method work, you need to make sure that the file should have a language extension like .cs for C#, cpp for C++, xml for XML files etc. AvalonEdit is an open source code, so you can play around with it and can have your own customizations. There are lots of in-built configurations that you can do to set up your syntax highlighting control. I strongly recommend you to download the below files and take a look at the sample application.
Related Links:
Currently rated 2.5 by 4 people

Use Extension Methods To Extend Your Applications

1. May 2011 14:09

.NET Framework C# Code Snippets 

What MSDN has to say about Extension Methods

Extension methods enable you to "add" methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type. Extension methods are a special kind of static method, but they are called as if they were instance methods on the extended type.

A friend of mine started blogging a months ago and he wrote a blog post showing the usage of Extension Methods. I do some of the search and I found a website called ExtensionMethod.NET with a nice collections of extension methods. You can submit your own extension methods to share with other people among the community. ExtensionMethod is a initiative project started by Fons Sonnemans and Loek van den Ouweland.


 No Rating