Integral Design

By Marco Minerva (translated from Italian by Mike Dodaro)

Thanks to the tools provided by .NET Gadgeteer SDK, creating graphical interfaces with the touch screen is very simple. In fact, the Display object, besides the classic “primitive” functions to create images, geometric shapes, and text, exposes an object called WPFWindow with which it is possible to create objects with functionality similar to that of WPF.  The following example uses the GHI Electronics Display_T35 module.  First we define a SetupWindow function:

private Bitmap normalButton;
private Bitmap pressedButton;
private Image imgButton;
private Text txtMessage;

private void SetupWindow()
{
Font baseFont = Resources.GetFont(Resources.FontResources.NinaB);
normalButton = Resources.GetBitmap(Resources.BitmapResources.NormalButton);
pressedButton = Resources.GetBitmap(Resources.BitmapResources.PressedButton);

    Window window = display.WPFWindow;
    Canvas canvas = new Canvas();
    window.Child = canvas;

imgButton = new Image(normalButton);
imgButton.TouchDown += new TouchEventHandler(imgButton_TouchDown);
imgButton.TouchUp += new TouchEventHandler(imgButton_TouchUp);
canvas.Children.Add(imgButton);
Canvas.SetTop(imgButton, 50);
Canvas.SetLeft(imgButton, 90);

txtMessage = new Text(baseFont, "Button is NOT PRESSED");
canvas.Children.Add(txtMessage);
Canvas.SetTop(txtMessage, 200);
Canvas.SetLeft(txtMessage, 90);
}

In this example, we create a Canvas object in order to contain all the objects of the user interface.  As soon as objects are created, the display allows us to position the objects exactly where we want them. We create an image and then set up the events TouchDown and TouchUp.  As is easy to intuit from the names, these events are generated when the user touches the image and when the finger is taken off the screen.

Finally, we insert a Text object. Our goal is to change to the image and the text when the image is touched, therefore we must write the following code in the event handlers:

private void imgButton_TouchDown(object sender, TouchEventArgs e)
{
imgButton.Bitmap = pressedButton;
txtMessage.TextContent = "Button is PRESSED";
}

private void imgButton_TouchUp(object sender, TouchEventArgs e)
{
imgButton.Bitmap = normalButton;
txtMessage.TextContent = "Button is NOT PRESSED";
}

It is all very simple.  The framework inserts the objects in the specific position on the screen and identifies the coordinates of any point that the user touches to launch the corresponding events of the object found at that position.  Obviously, the number of objects available is limited, but the classes available, such as Canvas, Text, Image and ListBox, can be used to create more complex controls. In conclusion, the complete Program.cs lines of our application are as follows:

using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;

using GT = Gadgeteer;
using GTM = Gadgeteer.Modules;
using Gadgeteer.Modules.GHIElectronics;
using Microsoft.SPOT.Input;

namespace WPFWindowExample
{
    public partial class Program
    {
void ProgramStarted()
        {
SetupWindow();

            // Do one-time tasks here
            Debug.Print("Program Started");
        }

private Bitmap normalButton;
private Bitmap pressedButton;
private Image imgButton;
private Text txtMessage;

private void SetupWindow()
        {
Font baseFont = Resources.GetFont(Resources.FontResources.NinaB);
normalButton = Resources.GetBitmap(Resources.BitmapResources.NormalButton);
            pressedButton = Resources.GetBitmap(Resources.BitmapResources.PressedButton);

            Window window = display.WPFWindow;
            Canvas canvas = new Canvas();
            window.Child = canvas;

            imgButton = new Image(normalButton);
imgButton.TouchDown += new TouchEventHandler(imgButton_TouchDown);
imgButton.TouchUp += new TouchEventHandler(imgButton_TouchUp);
            canvas.Children.Add(imgButton);
            Canvas.SetTop(imgButton, 50);
            Canvas.SetLeft(imgButton, 90);

txtMessage = new Text(baseFont, "Button is NOT PRESSED");
canvas.Children.Add(txtMessage);
            Canvas.SetTop(txtMessage, 200);
            Canvas.SetLeft(txtMessage, 90);
        }

private void imgButton_TouchDown(object sender, TouchEventArgs e)
        {
            imgButton.Bitmap = pressedButton;
            txtMessage.TextContent = "Button is PRESSED";
        }

private void imgButton_TouchUp(object sender, TouchEventArgs e)
        {
            imgButton.Bitmap = normalButton;
            txtMessage.TextContent = "Button is NOT PRESSED";
        }
    }
}

The example application is available for download.