Integral Design

Continua la nostra rassegna dei controlli grafici per il display del .NET Gadgeteer (An English translation is available). Questa volta ci occupiamo del CommandButton, ovvero il classico pulsante di comando. Il codice della classe relativa è il seguente:

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

using GT = Gadgeteer;

namespace CommandButtonExample
{
    public class CommandButton : Border
    {
        private Text buttonText;

        public GT.Color BorderColor { get; set; }
        public GT.Color BackgroundColor { get; set; }
        public GT.Color PressedBorderColor { get; set; }
        public GT.Color PressedBackgroundColor { get; set; }

        public event EventHandler Click;

        private Canvas container;
        private int top;
        private int left;

        public CommandButton(Font font, string content)
            : this(font, content, null, 0, 0)
        { }

        public CommandButton(Font font, string content, Canvas canvas, int top, int left)
        {
            BackgroundColor = GT.Color.FromRGB(230, 230, 230);
            BorderColor = GT.Color.DarkGray;
            PressedBorderColor = GT.Color.DarkGray;
            PressedBackgroundColor = GT.Color.LightGray;

            this.HorizontalAlignment = HorizontalAlignment.Center;
            this.Background = new SolidColorBrush(BackgroundColor);
            this.BorderBrush = new SolidColorBrush(BorderColor);
            this.SetBorderThickness(2, 2, 2, 2);
            buttonText = new Text(font, content);
            buttonText.SetMargin(5);
            buttonText.HorizontalAlignment = HorizontalAlignment.Center;
            this.Child = buttonText;

            if (canvas != null)
                this.AddToCanvas(canvas, top, left);
        }

        protected override void OnTouchDown(Microsoft.SPOT.Input.TouchEventArgs e)
        {
            if (container != null)
                Canvas.SetTop(this, top + 1);

            this.Background = new SolidColorBrush(PressedBackgroundColor);
            this.BorderBrush = new SolidColorBrush(PressedBorderColor);
            base.OnTouchDown(e);
        }

        protected override void OnTouchUp(Microsoft.SPOT.Input.TouchEventArgs e)
        {
            if (container != null)
                Canvas.SetTop(this, top - 1);

            this.Background = new SolidColorBrush(BackgroundColor);
            this.BorderBrush = new SolidColorBrush(BorderColor);
            base.OnTouchUp(e);
            OnClick();
        }

        public void AddToCanvas(Canvas canvas, int top, int left)
        {
            this.container = canvas;
            this.top = top;
            this.left = left;

            canvas.Children.Add(this);
            Canvas.SetTop(this, top);
            Canvas.SetLeft(this, left);
        }

        public string Text
        {
            get { return buttonText.TextContent; }
            set { buttonText.TextContent = value; }
        }

        protected virtual void OnClick()
        {
            if (Click != null)
                Click(this, EventArgs.Empty);
        }
    }
}

Il CommandButton eredita da Border e definisce quattro proprietà, con cui è possibile specificare il colore del bordo e dello sfondo del pulsante, quando si trova nello stato normale (BorderColor e BackgroundColor) oppure quando viene premuto (PressedBorderColor e PressedBackgroundColor ). Tali proprietà sono inizializzate con una serie di valori di default, per cui non è obbligatorio impostarlo esplicitamente. Viene esposto inoltre l’evento Click, generato quando quando si solleva il dito dal pulsante.

Il controllo contiene anche il metodo AddToCanvas, che ha una doppia utilità: consente di aggiungere il pulsante ad un oggetto di tipo Canvas e salva le posizioni specificate, per poterle modificare nel momento in cui il pulsante viene premuto (eventi OnTouchDown e OnTouchUp), così da dare un feedback visivo dell’azione dell’utente. Questi stessi parametri possono essere passati direttamente nel costruttore dell’oggetto CommandButton.

Il suo utilizzo è immediato:

private Text txtMessage;

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

    Canvas canvas = new Canvas();
    window.Child = canvas;

    CommandButton cmdButton = new CommandButton(baseFont, "Push me, please!");
    cmdButton.AddToCanvas(canvas, 100, 100);
    cmdButton.PressedBackgroundColor = GT.Color.Red;
    cmdButton.Click += new EventHandler(cmdButton_Click);

    txtMessage = new Text(baseFont, string.Empty);
    canvas.Children.Add(txtMessage);
    Canvas.SetTop(txtMessage, 150);
    Canvas.SetLeft(txtMessage, 60);
}

private int clicks = 0;

private void cmdButton_Click(object sender, EventArgs e)
{
    clicks++;
    txtMessage.TextContent = "You clicked the button " + clicks + " times.";
}

Nel metodo SetupWindow creiamo un oggetto di tipo CommandButton, impostiamo il colore dello sfondo nel caso in cui il pulsante sia premuto e ci registriamo sull’evento Click. Nel gestore di quest’ultimo incrementiamo una variabile che tiene traccia del numero di clic effettuati e mostriamo il nuovo valore all’interno di un’etichetta di testo.

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;
using Gadgeteer.Modules.GHIElectronics;

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

        private Text txtMessage;

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

            Canvas canvas = new Canvas();
            window.Child = canvas;

            CommandButton cmdButton = new CommandButton(baseFont, "Push me, please!");
            cmdButton.AddToCanvas(canvas, 100, 100);
            cmdButton.PressedBackgroundColor = GT.Color.Red;
            cmdButton.Click += new EventHandler(cmdButton_Click);

            txtMessage = new Text(baseFont, string.Empty);
            canvas.Children.Add(txtMessage);
            Canvas.SetTop(txtMessage, 150);
            Canvas.SetLeft(txtMessage, 60);
        }

        private int clicks = 0;

        private void cmdButton_Click(object sender, EventArgs e)
        {
            clicks++;
            txtMessage.TextContent = "You clicked the button " + clicks + " times.";
        }
    }
}

L’applicazione di esempio è disponibile per il download.