Question

This part of the Mono Winforms programming tutorial will be about basic controls.

Winforms controls are basic building blocks of an application. Winforms has a wide range of various controls.Buttons, check boxes, sliders, list boxes etc. Everything a programmer needs for his job. In this section of the tutorial, we will describe several useful controls.

Label Control

Label is a simple control for displaying text or images. It does not receive focus.

label.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

   string text = @"Sometimes I feel I've got to
Run away I've got to
Get away
From the pain that you drive
  into the heart of me
The love we share
Seems to go nowhere
I've lost my lights
I toss and turn I can't sleep at night

Once I ran to you (I ran)
Now I'll run from you
This tainted love you've given
I give you all a boy could give you
Take my tears and that's not nearly all
Tainted love
Tainted love";

  public MForm() {
    Text = "Tainted Love";

    Font font = new Font("Serif", 10);

    Label lyrics = new Label();
    lyrics.Parent = this;
    lyrics.Text = text;
    lyrics.Font = font;
    lyrics.Location = new Point(10, 10);
    lyrics.Size = new Size (290, 290);

    CenterToScreen();

  }
}

class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

In our example, we show lyrics of Tainted Love song.

Label lyrics = new Label();

Label control is created.

string text = @"Sometimes I feel I've got ... 

The @ character is used to denote a multiline string.

Font font = new Font("Serif", 10);
...
lyrics.Font = font;

The font of the text of the label is set to Serif, 10px.

Figure: Label

CheckBox

CheckBox is a control that has two states: on and off. It is a box with a label or an image. If the CheckBox is checked, it is represented by a tick in a box. A CheckBox can be used to show/hide splashscreen at startup, toggle visibility of a toolbar etc.

checkbox.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

  private CheckBox cb;

  public MForm() {
    Text = "CheckBox";
    Size = new Size(220, 170);

    cb = new CheckBox();
    cb.Parent = this;
    cb.Location = new Point(30, 30);
    cb.Text = "Show Title";
    cb.Checked = true;

    cb.CheckedChanged += new EventHandler(OnChanged);

    CenterToScreen();
  }

  void OnChanged(object sender, EventArgs e) {
    if (cb.Checked) {
      Text = "CheckBox";
    } else {
      Text = "";
    }
  }
}

class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

Our code example shows or hides the title of the window depending on its state.

cb = new CheckBox();

CheckBox control is created.

cb.Text = "Show Title";
cb.Checked = true;

When the application starts, we show the title. And we set the CheckBox control to checked state.

cb.CheckedChanged += new EventHandler(OnChanged);

When we click on the CheckBox control, the CheckedChanged event is triggered.

if (cb.Checked) {
  Text = "CheckBox";
} else {
  Text = "";
}

Here we toggle the title of the window.

Figure: CheckBox

TrackBar

TrackBar is a component that lets the user graphically select a value by sliding a knob within a bounded interval. Our example will show a volume control.

trackbar.cs

using System;
using System.Drawing;
using System.Windows.Forms;


class MForm : Form {
 
  PictureBox pb;
  TrackBar tb;
  Bitmap mute, min, med, max;

  public MForm() {
    Text = "TrackBar";
    Size = new Size(260, 190);

    tb = new TrackBar();
    tb.Parent = this;
    tb.Size = new Size(160, 30);
    tb.Location = new Point(20, 40);
    tb.TickStyle = TickStyle.None;

    tb.ValueChanged += new EventHandler(OnChanged);
    
    LoadImages();

    pb = new PictureBox();
    pb.Parent = this;
    pb.Location = new Point(210, 50);
    pb.Image = mute;
    
    CenterToScreen();

  }

  void LoadImages() {
    mute = new Bitmap("mute.png");
    min = new Bitmap("min.png");
    med = new Bitmap("med.png");
    max = new Bitmap("max.png");
  }


  void OnChanged(object sender, EventArgs e) {
    int val = tb.Value;

    if (val == 0) {
      pb.Image = mute;
    } else if (val > 0 && val <= 3) {
      pb.Image = min;
    } else if (val > 3 && val < 8) {
      pb.Image = med;
    } else {
      pb.Image = max;
    }
  }
}

class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

In the code example, we show a TrackBar and a PictureBox . By dragging the track bar, we change the image on the PictureBox control.

tb = new TrackBar();

TrackBar control is created.

tb.TickStyle = TickStyle.None;

We show no ticks for this TrackBar .

pb = new PictureBox();
...
pb.Image = mute;

PictureBox control is created. It is used to display an image. At the start, it shows the mute image.

void LoadImages() {
  mute = new Bitmap("mute.png");
  min = new Bitmap("min.png");
  med = new Bitmap("med.png");
  max = new Bitmap("max.png");
}

Here we load four images that we will use.

int val = tb.Value;

if (val == 0) {
  pb.Image = mute;
} else if (val > 0 && val <= 3) {
  pb.Image = min;
} else if (val > 3 && val < 8) {
  pb.Image = med;
} else {
  pb.Image = max;
}

We determine the value of the TrackBar . Depending on its value, we update the PictureBox control.

Figure: TrackBar

ComboBox

ComboBox is a control that combines a button or editable field and a drop-down list. The user can select a value from the drop-down list, which appears at the user's request. If you make the combo box editable, then the combo box includes an editable field into which the user can type a value.

combobox.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

  private ComboBox cb;
  private Label label;

  public MForm() {
    Text = "ComboBox";
    Size = new Size(240, 240);

    cb = new ComboBox();
    cb.Parent = this;
    cb.Location = new Point(50, 30);

    cb.Items.AddRange(new object[] {"Ubuntu",
      "Mandriva",
      "Red Hat",
      "Fedora",
      "Gentoo"});

    cb.SelectionChangeCommitted += new EventHandler(OnChanged);

    label = new Label();
    label.Location = new Point(50, 140);
    label.Parent = this;
    label.Text = "...";

    CenterToScreen();
  }

  void OnChanged(object sender, EventArgs e) {
     ComboBox combo = (ComboBox) sender;
     label.Text = combo.Text;
  }
}


class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

Our code programming example shows a combobox with five items. The selected item is shown in a label control.

cb = new ComboBox();

ComboBox control is created.

cb.Items.AddRange(new object[] {"Ubuntu",
  "Mandriva",
  "Red Hat",
  "Fedora",
  "Gentoo"});

The ComboBox control is filled with items.

cb.SelectionChangeCommitted += new EventHandler(OnChanged);

If we select an item from the combobox, the SelectionChangeCommitted event is triggered.

void OnChanged(object sender, EventArgs e) {
  ComboBox combo = (ComboBox) sender;
  label.Text = combo.Text;
}

Here the selected text from the combobox is copied to the label.

Figure: ComboBox

MonthCalendar

In the next example, we will show a MonthCalendar control. The MonthCalendar control allows the user to select a date using a visual display.

monthcalendar.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

   private MonthCalendar calendar;
   private Label date;

  public MForm() {
    Text = "Month Calendar";
    Size = new Size(240, 240);

    calendar = new MonthCalendar();
    calendar.Parent = this;
    calendar.Location = new Point(20, 20);
    calendar.DateSelected += new DateRangeEventHandler(OnSelected);

    date = new Label();
    date.Location = new Point(40, 170);
    date.Parent = this;
    DateTime dt = calendar.SelectionStart;
    date.Text = dt.Month + "/" + dt.Day + "/" + dt.Year;

    CenterToScreen();
  }

  void OnSelected(object sender, EventArgs e) {
    DateTime dt = calendar.SelectionStart;
    date.Text = dt.Month + "/" + dt.Day + "/" + dt.Year;
  }
}


class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

In the example, we show a MonthCalendar and a Label .

private MonthCalendar calendar;
private Label date;

We have two controls. A MonthCalendar and a Label . The latter shows the currently selected date.

void OnSelected(object sender, EventArgs e) {
  DateTime dt = calendar.SelectionStart;
  date.Text = dt.Month + "/" + dt.Day + "/" + dt.Year;
 }

When we select a date from the MonthCalendar , the OnSelected() method is called. The SelectionStart property gets the start date of the selected range of dates.

Figure: MonthCalendar

TextBox

The TextBox control is used to display or accept some text. The text can be single or multiline. This control is also capable of password masking.

textbox.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

  private Label text;

  public MForm() {
    Text = "TextBox";
    Size = new Size(250, 200);
    CenterToScreen();

    text = new Label();
    text.Parent = this;
    text.Text = "...";
    text.Location = new Point(60, 40);
    text.AutoSize = true;

    TextBox tbox = new TextBox();
    tbox.Parent = this;
    tbox.Location = new Point(60, 100);
    tbox.KeyUp += new KeyEventHandler(OnKeyUp);

  }

  void OnKeyUp(object sender, KeyEventArgs e) {
    TextBox tb = (TextBox) sender;
    this.text.Text = tb.Text;
  }
}

class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

This example shows a text box and a label. The text that we key in the text box is displayed immediately in the label control.

text = new Label();
...
text.AutoSize = true;

The Label control is created. The AutoSize property ensures that the Label grows to show the text.

TextBox tbox = new TextBox();
...
tbox.KeyUp += new KeyEventHandler(OnKeyUp);

We plug in the KeyUp event. When we release the key, OnKeyUp() method is called.

void OnKeyUp(object sender, KeyEventArgs e) {
  TextBox tb = (TextBox) sender;
  this.text.Text = tb.Text;
}

In the OnKeyUp() method we update the label control with the text from the text box control.

Figure: TextBox

We have finished chapter of the Mono Winforms tutorial, dedicated to basic controls.