Integral Design

Nel precedente post abbiamo visto come creare interfacce grafiche sul display della piattaforma .NET Gadgeteer. In tale occasione abbiamo accennato al fatto che i controlli disponibili possono essere facilmente estesi per ottenere interfacce anche molto complesse. Vediamo quindi come creare la base per realizzare una schermata “Windows-like”, ovvero con barra del titolo e barra di stato.

Creiamo una classe di nome MainWindow, che estende l’oggetto Canvas: essa rappresenterà la base della nostra finestra.

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

Questa classe contiene un metodo di nome AddTitleBar (con vari overload), per creare la barra del titolo della finestra.  Le diverse versioni del metodo permettono di specificare il testo da mostrare, il suo font e il suo colore, nonché il colore o i colori di sfondo della barra: nel caso in cui se ne indichino due, verrà creata una barra il cui sfondo sfuma dal primo al secondo colore.

C’è poi il metodo AddStatusBar (anch’esso con vari overload), per aggiungere una barra di stato. Esso prende in ingresso un oggetto di tipo UIElement. Ciò significa che la barra di stato può comprendere oggetti semplici, come l’oggetto Text, oppure contenitori: ad esempio, possiamo utilizzare uno StackPanel, per mostrare testo a sinistra e un’icona sulla destra. Anche questo metodo, inoltre, permette di specificare i colori di sfondo, come nel caso di AddTitleBar.

Infine, la classe fornisce anche un metodo di utilità, AddChild, con cui è possibile aggiungere un oggetto alla finestra ed impostarne la posizione con una sola istruzione.

Grazie a questa classe, creare un’interfaccia con barra del titolo e barra di stato è molto semplice:

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 conclusione, il file Program.cs completo della nostra applicazione è il seguente:

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

L’applicazione di esempio è disponibile per il download.