A Command Push-Button for .NET Gadgeteer

Translated by Mike Dodaro from the Italian version by Marco Minerva
We continue discussion of the graphical controls for the .NET Gadgeteer display. This time we implement the CommandButton, that is the classic push-button. The code for the CommandButton class is as follows:

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

The CommandButton inherits from Border and defines four properties, with which you can specify the color of an edge and the background of the push-button: when it is in the normal state (BorderColor and BackgroundColor) or when it is pressed (PressedBorderColor and PressedBackgroundColor).  These properties are initialized with a series of default values, which are optional to set explicitly. The button also exposes the Click event, which is generated when the finger is raised from the button .

The control also contains the AddToCanvas method, that it has double purpose: it both adds the push-button to an Canvas type object and saves the specified position, in order to be able to modify them when the push-button it is pressed (events OnTouchDown and OnTouchUp), to give visual feedback of the user action. These same parameters can be set directly in the constructor of the CommandButton object.

You can use the CommandButton right away:

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

In the SetupWindow method we create a CommandButton object, and in this event set up the background color during the push-button pressed event, and we set the Click event.  In the Click event handler we increment a variable that holds a record of the number of clicks and shows the new value in a text label.

In conclusion, complete the Program.cs file 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;
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.";
        }
    }
}

The application is available for download.

CommandButtonExample.zip

Advertisements
  1. Leave a comment

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: