WPF “Hello World” for the .NET Micro Framework

Screenshot of WPF Hello World application running within an emulator

The first time I heard that the .NET Micro Framework’s GUI framework was Windows Presentation Foundation (WPF) I was excited but wanted to know more. How could such a “big” framework be compressed for use on such a small device, with little to no OS for support?

This blog entry discusses the structure of simple WPF applications written for the .NET Micro Framework and outlines some of the differences when compared against the WPF framework found on the desktop.

The WPF implementation found within the .NET Micro Framework shares many of the same underlying structures and concepts as the desktop version of WPF, but the implementation and capabilities are completely different. For example there is no declarative markup language (XAML), no data binding, no visual form designer and the namespaces are slightly different.

Getting Started
To get started create a new .NET Micro Framework Console application from within Visual Studio 2005 and delete the contents of Program.cs. We would typically use the “Windows Application” template, but since we want to learn the purpose of the code generated by that template we will code it all from scratch.

We also need to add a couple of additional references to our Project in order for the compiler to find the WPF related classes:

  • Microsoft.SPOT.TinyCore
  • Microsoft.SPOT.Graphics

Creating a window
A window is represented by the Microsoft.SPOT.Presentation.Window class. Typically a subclass of this class will be produced to encapsulate as much window specific logic as possible for each type of window within our application. Since we don’t have a Visual Form designer or XAML we must hand code this in C# directly.

Our main window could be represented as follows:

using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Media;
 
public class MainWindow : Window
{
  public MainWindow() 
  { 
    // Make the window the same size as the LCD screen
    this.Width = SystemMetrics.ScreenWidth;
    this.Height = SystemMetrics.ScreenHeight;
 
    // Make the window have a red background
    this.Background = new SolidColorBrush((Color)0x0000FF);
  }
}

The constructor provides an ideal place to configure the look and feel of our window. In this example we configure the initial width and height of our window to be the same size as the LCD screen found on our device. We also give it a solid red background fill.

Creating an Application
A WPF application is represented by the Microsoft.SPOT.Application class. This class manages the display of windows and routes events from the hardware to the active window’s controls etc.

To display our main window on the screen we must create an instance of our application and call it’s Run method, passing in the main window. Like standard desktop .NET applications, the main entry point of an application is its static Main method and this provides an ideal place to perform this initialisation step as shown below:

using System; 
using Microsoft.SPOT; 
 
public class Program : Application 
{
  // This is the method the .NET Micro Framework
  // will call when our application starts running 
  public static void Main() 
  { 
    // Create an instance of the Application
    // and our main Window class
    Application myApplication = new Program(); 
    Window myWindow = new MainWindow(); 
 
    // Ask the application to display the
    // initial window, and don't return until
    // it is closed.
    myApplication.Run(myWindow);
  }
}

When you run this application you should see a solid red window covering the entire screen. It’s pretty boring! Since there is no way (presently) to close this window the call to myApplication.Run will never return.

Adding content
A window can hold a single control, this is because it derives from ContentControl. This class provides a Child property to specify the control which should be displayed within the client area of the window.

Most of the standard controls can be found within the Microsoft.SPOT.Presentation.Controls namespace. The two we will cover in this blog posting are the Text and Image controls.

Displaying Text
To place a string of text on a window we can use the following code snippet at the end of our Window’s constructor:

Font font = Resources.GetFont(Resources.FontResources.small);
this.Child = new Text(font, "Hello World!");

This code refers to a font called “small”. The .NET Micro Framework by default has no fonts, so we must include this font resource as an embedded resource within our application. We do this by following these steps:

  1. Open Resources.resx within the designer
  2. Open the Files section and select to add an existing file
  3. Navigate to the C:\Program Files\Microsoft .Net Micro Framework\v2.0.2036\Fonts\ directory and select “small.tinyfnt”.

By default there are only a couple of fonts to choose from. With Service Pack 1 of the .NET Micro Framework there is also a conversion utility which allows you to convert any TrueType font you may have into the required format.

Displaying an Image
To place an image on a window we make use of the Image control. The easiest way is to simply pass the bitmap we want to display in as a constructor parameter as shown in the below code snippet:

Bitmap bmp = Resources.GetBitmap(Resources.BitmapResources.sample);
Image img = new Image(bmp);
this.Child = img;

We could use the bitmap drawing techniques discussed last time to dynamically create a bitmap to display, or we could embedded an image into our executable. To embedded an image such as the “sample” image in the above example, we follow a similar process to adding a font to our resources.resx file, only this time we select the “Image” section instead of the “Files” section.

By default the image or text will be rendered in the top left corner of the area provided by the window. By changing the HorizontalAlignment and VerticalAlignment properties we can modify this to move the image into the center of the area given to the control. For example to center the image in the previous example we could add the following two lines of code to the Window’s constructor:

img.VerticalAlignment = VerticalAlignment.Center; 
img.HorizontalAlignment = HorizontalAlignment.Center;

Sample Application

[Download wpf-hello-world.zip - 6.7 KB]

A small sample application is available for download. This application demonstrates the techniques outlined within this blog entry and displays the classic “Hello World” message to the user.

The next post on the .NET Micro Framework will discuss how to add more than one control to a window and how to control the size and location of these controls. After that posting we will finally be at the stage where we are ready to discuss how to generate and respond to keyboard or button press events. This will also enable us to discuss how to create multiple windows and close them etc.

4 Responses to “WPF “Hello World” for the .NET Micro Framework”

  1. Hi,

    I to am searching for tutorials or documentation, which is quite skimpy. I am a .net developer and just began tinkering with electronics. I just did my first electronics project, How to shoot a paintbal gun with a laser, you can watch the video and tutorial on how it was made by clicking my name above.

    Anyway, while searching for some info for next project, on books24×7.com I came across

    Embedded Programming with the Microsoft .NET Micro Framework
    by Donald Thompson and Rob S. Miles
    Microsoft Press © 2007 (288 pages)
    ISBN:9780735623651

    I was excited to see that microsoft had the platform, and I have never heard of. Unfortunately, the book is aimed at the beginning .net programmer and doesnt really have real world examples. Another is problem is the book uses the Freescale i.MXS development kit which runs almost $500 USD. To that’s just not feasible… If you are going to make a product or device that cost over $500 dollars then it should have more features than an Iphone, of PS3

    Altough the Basic Stamp 2 controller allows you to program the microconctroller in a very VB like language (PBasic), It is a properietary technology. You can integrate other third party electronics, but you need to know your stuff.

    I am just a beginner in electronics. I am trying to find tutorials, not basic .net programing, but eletronic setups, schematics, etc..

    I guess this field is still in its infancy, but it looks promising. I am trying to learn how to move forward…

  2. Sorry about the typos, I sound like an illerate mumbling fool. Anyway, I guess that’s what happens when you up at 3:30 in the morning and you mind is just racing with these ideas, and you cant go to sleep.. TTYL

  3. Hi Alexander,

    This is actually an area that I have a personal interest in as well. I have a copy of the Embedded Programming with the Microsoft .NET Micro Framework book and use it along with an Embedded Fusion Tahoe development board. I agree that the book is mainly targeted for existing electrical engineers and/or .NET developers. It would be difficult to learn both subjects from a complete beginners point of view from this book alone (although it makes good reference material).

    I’ve been toying with the idea of producing a device with similiar interfacing capabilities as a Basic Stamp 2 device but powered by the .NET Micro Framework.

    One thing the Basic Stamp has going for it is the many Educational Texts available for the platform. Having a “book” similar to one of those Education Texts but targeting a small device powered by the .NET Micro Framework would be a great way to introduce people to C# and the .NET Framework in a fun way etc, while also covering simple electronics.

  4. Stephan says:

    Hi Chris,

    Excellent Blog you have going here!!

    I have recently bought myself the HTC Diamond and I have written my first application using the .Net compact framework. I have always been interested in mobile and embedded development but never had the opportunity. I previously had a SE P910 and P990 and it’s just too much of a mission to develop for Symbian UIQ.

    I have played around with PIC and AVR programming before, and I must admin, I enjoy it more than my everyday software development job ;-)

    Another thing that caught my attention is the fact that you live in NZ…I am currently in the process of emigrating to NZ with my wife. We have recently received PR Visa status :) and we would love to settle in Christchurch.

    Anyway, I’m glad to see that there is a mobile and embedded programming community in NZ.

    Keep up the good work!!
    Stephan

    PS. Apologies for contacting you through the “comments” feature, you contact form is unavailable.

Leave a Reply