Integral Design

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;
}

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;
        }
    }
}