Glide

Last modified December 16, 2015

Required

Tutorials: First NETMF Project, Graphics, Namespaces, Resources

These examples only work with our 4.3 SDK.

Introduction

Glide is a graphical library for .NET Micro Framework that uses a graphical screen designer. Glide provides a more responsive experience than the built-in Windows Presentation Foundation with many additional features, from buttons and lists to keyboards and message boxes. As long as your device and display support graphics through the Bitmap class, you can use Glide (which now ships with our NETMF SDK).

Our interface designer can help you create interfaces that can then easily be loaded into your Glide program.

Buttons

This simple example show how to load a simple Glide window with one button and listen for events on that button.

Make sure that you reference have the GHI.Glide assembly and that you adjust all namespaces in the below examples to match your namespace, otherwise you will be unable to load resources.

All Glide programs are based around XML with a root element and a element within it. Windows and theirs contents are what get drawn on the display. In the following XML, you see that we define a single window with a single button inside.

<Glide>
	<Window Name="window" Width="320" Height="240" BackColor="dce3e7">
		<Button Name="btn" X="100" Y="104" Width="120" Height="32" Alpha="255" Text="Click me" Font="4" FontColor="000000" DisabledFontColor="808080" TintColor="000000" TintAmount="0"/>
	</Window>
</Glide>

In the below example, once you have added the above XML as a string resource to your project, we load the xml string resources as a window, find its btn child, and listen for tap events.

using GHI.Glide;
using GHI.Glide.Display;
using GHI.Glide.UI;
using Microsoft.SPOT;
using System.Threading;

namespace your_namespace
{
    public class Program
    {
        public static void Main()
        {
            Window window = GlideLoader.LoadWindow(Resources.GetString(Resources.StringResources.Window));

            GlideTouch.Initialize();

            Button btn = (Button)window.GetChildByName("btn");
            btn.TapEvent += OnTap;

            Glide.MainWindow = window;

            Thread.Sleep(-1);
        }

        private static void OnTap(object sender)
        {
            Debug.Print("Button tapped.");
        }
    }
}

Textblock

This example shows how to use a textblock. It renders a single textblock that changes its text to the current date and time when tapped.

<Glide>
  <Window Name="window" Width="320" Height="240" BackColor="dce3e7">
    <TextBlock Name="textBlock" X="110" Y="104" Width="100" Height="32" Alpha="255" Text="I'm a label." TextAlign="Center" Font="4" FontColor="000000"/>
  </Window>
</Glide>
using GHI.Glide;
using GHI.Glide.Display;
using GHI.Glide.UI;
using System;
using System.Threading;

namespace your_namespace
{
    public class Program
    {
        private static Window window;
        private static TextBlock textBlock;

        public static void Main()
        {
            window = GlideLoader.LoadWindow(Resources.GetString(Resources.StringResources.Window));

            GlideTouch.Initialize();

            textBlock = (TextBlock)window.GetChildByName("textBlock");
            textBlock.TapEvent += OnTap;

            Glide.MainWindow = window;

            Thread.Sleep(-1);
        }

        private static void OnTap(object sender)
        {
            textBlock.Text = DateTime.UtcNow.ToString();

            window.FillRect(textBlock.Rect);

            textBlock.Invalidate();
        }
    }
}

Calibration

Calibrating the screen through NETMF can be somewhat complicated. So, Glide provides a built in window that can be shown to calibrate the screen for you. The below example does this once you tap a button. 

<Glide>
  <Window Name="window" Width="320" Height="240" BackColor="dce3e7">
    <Button Name="btn" X="20" Y="20" Width="80" Height="32" Alpha="255" Text="Calibrate" Font="3" FontColor="000000" DisabledFontColor="808080" TintColor="000000" TintAmount="0"/>
  </Window>
</Glide>
using GHI.Glide;
using GHI.Glide.Display;
using GHI.Glide.UI;
using System.Threading;

namespace your_namespace
{
    public class Program
    {
        private static Window mainWindow;
        private static CalibrationWindow calibrationWindow;

        public static void Main()
        {
            mainWindow = GlideLoader.LoadWindow(Resources.GetString(Resources.StringResources.Window));

            GlideTouch.Initialize();

            var btn = (Button)mainWindow.GetChildByName("btn");
            btn.TapEvent += OnTap;

            calibrationWindow = new CalibrationWindow(false, false);
            calibrationWindow.CloseEvent += OnClose;

            Glide.MainWindow = mainWindow;

            Thread.Sleep(-1);
        }

        private static void OnTap(object sender)
        {
            Glide.MainWindow = calibrationWindow;
        }

        private static void OnClose(object sender)
        {
            Glide.MainWindow = mainWindow;
        }
    }
}
Leave feedback about this document.
Let us know if the information presented here was accurate, helpful and if you have any suggestions.
Leave feedback about this document.
Let us know if the information presented here was accurate, helpful and if you have any suggestions.

* Indicates required fields.
This form is only for feedback not support.
Review our how to find information guide on locating helpful resources.