Windows-like Interface for the .NET Gadgeteer Display (English)

by Marco Minerva (translated from Italian by Mike Dodaro)

In the preceding post we created graphical interfaces using the display platform of .NET Gadgeteer.  We have seeen how the controls available are extensible in the implementation of complex user interfaces. We would like to realize a shielded “Windows-like” UI, that is, with title bar and status bar.

We create a class named MainWindow, which the Canvas object extends: it will represent the base of our window.

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

using GT = Gadgeteer;

namespace MainWindowExample
{
    public class MainWindow : Canvas
    {
        public Border AddTitleBar(string title, Font font, GT.Color foreColor,
							GT.Color backgroundColor)
        {
            return AddTitleBar(title, font, foreColor, backgroundColor, backgroundColor);
        }

        public Border AddTitleBar(string title, Font font, GT.Color foreColor, GT.Color startColor,
										GT.Color endColor)
        {
            Brush backgroundBrush = null;
            if (startColor == endColor)
                backgroundBrush = new SolidColorBrush(startColor);
            else
                backgroundBrush = new LinearGradientBrush(startColor, endColor);

            return AddTitleBar(title, font, foreColor, backgroundBrush);
        }

        public Border AddTitleBar(string title, Font font, GT.Color foreColor, Brush backgroundBrush)
        {
            Border titleBar = new Border();
            titleBar.Width = 320;
            titleBar.Height = 27;
            titleBar.Background = backgroundBrush;

            Text text = new Text(font, title);
            text.Width = 320;
            text.ForeColor = foreColor;
            text.SetMargin(5);
            titleBar.Child = text;

            AddChild(titleBar, 0, 0);

            return titleBar;
        }

        public Border AddStatusBar(UIElement element, GT.Color backgroundColor)
        {
            return AddStatusBar(element, backgroundColor, backgroundColor);
        }

        public Border AddStatusBar(UIElement element, GT.Color startColor, GT.Color endColor)
        {
            Brush backgroundBrush = null;
            if (startColor == endColor)
                backgroundBrush = new SolidColorBrush(startColor);
            else
                backgroundBrush = new LinearGradientBrush(startColor, endColor);

            return AddStatusBar(element, backgroundBrush);
        }

        public Border AddStatusBar(UIElement element, Brush backgroundBrush)
        {
            Border statusBar = new Border();
            statusBar.Width = 320;
            statusBar.Height = 27;
            statusBar.Background = backgroundBrush;

            int left, top, right, bottom;
            element.GetMargin(out left, out top, out right, out bottom);
            left = System.Math.Max(left, 5);
            top = System.Math.Max(top, 5);
            bottom = System.Math.Max(bottom, 5);
            element.SetMargin(left, top, right, bottom);
            statusBar.Child = element;

            AddChild(statusBar, 215, 0);

            return statusBar;
        }

        public void AddChild(UIElement element, int top, int left)
        {
            Children.Add(element);
            Canvas.SetTop(element, top);
            Canvas.SetLeft(element, left);
        }
    }
}

This class contains a method named AddTitleBar with several overloads, in order to create the title bar for the window. The several versions of the method specify the text to show, the font, and the color, and also the color or the colors of background of the bar; in the event that two are indicated, it will be created a bar whose background vanishes from the first according to color.

Then there is the AddStatusBar method, also with several overloads, to add a status bar.  The methods take an object of UIElement type. This means that the state bar can comprise simple objects, like the Text object, or containers, or for example, we can use a StackPanel to show text on the left and an icon on the right.  Also this method allows us to specify the background colors, for example, in the AddTitleBar event handler.

Finally, the class supplies another useful method, AddChild, with which it is possible to add an object to the window and to set up the position with a single instruction.

Thanks to this class, creating a user interface with title bar and status bar is very easy:

private void SetupWindow()
{
    Window window = display.WPFWindow;
    Font baseFont = Resources.GetFont(Resources.FontResources.NinaB);

    MainWindow mainWindow = new MainWindow();
    mainWindow.AddTitleBar("MainWindow Example (by Marco Minerva)", baseFont,
                GT.Color.White, GT.Color.Blue, GT.Color.White);

    Text txtMessage = new Text(baseFont, "Custom StatusBar message");
    mainWindow.AddStatusBar(txtMessage, GT.Color.LightGray);

    window.Child = mainWindow;
}

In conclusion, the complete Program.cs file of our application is shown in the following code block:

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;

namespace MainWindowExample
{
    public partial class Program
    {
        void ProgramStarted()
        {
            SetupWindow();
            Debug.Print("Program Started");
        }

        private void SetupWindow()
        {
            Window window = display.WPFWindow;
            Font baseFont = Resources.GetFont(Resources.FontResources.NinaB);

            MainWindow mainWindow = new MainWindow();
            mainWindow.AddTitleBar("MainWindow Example (by Marco Minerva)", baseFont,
                        GT.Color.White, GT.Color.Blue, GT.Color.White);

            Text txtMessage = new Text(baseFont, "Custom StatusBar message");
            mainWindow.AddStatusBar(txtMessage, GT.Color.LightGray);

            window.Child = mainWindow;
        }
    }
}

This example is available for download.

MainWindowExample.zip

About these ads

,

  1. Gadgeteer Home Automation System « Integral Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: