Designing Interactive GUI Applications

In this section we will see some of the Windows Forms control properties that are used in designing interactive Windows GUI applications. Before writing our sample application, we will discuss some common properties of the Control class.

15.1.1 Understanding the Control Class

The Control class provides the basic functionality and serves as the base class for Windows forms and controls. Although this class has many properties and methods, we will concentrate on only a few of them.

The ForeColor and BackColor properties determine the foreground and background colors of controls, respectively. Both properties are of type Color, and they implement get and set property options.

The Font property represents the font of the text displayed by a control. The DefaultBackColor, DefaultFont, and DefaultForeColor static properties of the Control class implement the get option only, and they return the default background color, font, and foreground color of a control, respectively.

The BackgroundImage property allows us to both get and set the background image of a control. This property is of type Image. Images with translucent or transparent colors are not supported by Windows Forms as background images.

15.1.2 The Application

Now let's write an application that will use all of the properties we just named.

First we create a Windows application and name it ButtonViewer. Then we add controls (for three buttons, one text box, and one panel) to the form by dragging them from the Visual Studio .NET toolbox. After adding controls to the form, we reposition and resize them, and we change their Text and Name properties. The final form looks like Figure 15.1.

Figure 15.1. An interactive GUI application

As Figure 15.1 shows, two of the buttons are named Browse and Close, respectively, and one button has no text. The Browse button allows us to browse an image file, and the Close button closes the application. The TextBox control displays the file name selected by a click of the Browse button. The third button (shown larger and without text in Figure 15.1) displays the image selected by the Browse button.

Now let's change the background color, foreground color, styles, and fonts of these controls. To do so, we add code in the form's load event handler, as shown in Listing 15.1. As the code indicates, we set the control's BackColor, ForeColor, FlatStyle, BorderStyle, and Font properties. (See Chapter 5 for details on fonts and colors.)

Listing 15.1 Setting a control's BackColor, ForeColor, and Font properties

private void Form2_Load(object sender, System.EventArgs e)
{
 // Button 1
 button1.ForeColor = Color.Yellow;
 button1.BackColor = Color.Maroon;
 button1.FlatStyle = FlatStyle.Flat;
 button1.Font = new Font ("Verdana",
 10, FontStyle.Bold);
 // Close and Browse buttons
 btnClose.ForeColor = Color.Yellow;
 btnClose.BackColor = Color.Black;
 btnClose.FlatStyle = FlatStyle.Flat;
 btnClose.Font = new Font ("Ariel",
 10, FontStyle.Italic);
 btnBrowse.ForeColor = Color.White;
 btnBrowse.BackColor = Color.Black;
 btnBrowse.FlatStyle = FlatStyle.Flat;
 btnBrowse.Font = new Font ("Ariel",
 10, FontStyle.Bold);
 // Text box 1
 textBox1.BorderStyle = BorderStyle.FixedSingle;
 textBox1.BackColor = Color.Blue;
 textBox1.ForeColor = Color.Yellow;
 textBox1.Font = new Font("Tahoma", 10,
 FontStyle.Strikeout|FontStyle.Bold|
 FontStyle.Italic);
 // Panel 1
 panel1.BorderStyle = BorderStyle.FixedSingle;
 panel1.BackColor = Color.Red;
}

The Close button click handler simply calls the Form.Close method, as shown in Listing 15.2.

Listing 15.2 The Close button click event handler

private void btnClose_Click(object sender,
System.EventArgs e)
{
 this.Close();
}

The Browse button click event handler (see Listing 15.3) uses an OpenFileDialog control to browse for an image and sets the selected image as the background image of the button. It also sets the file name as text of the text box control. Finally, it calls the Invalidate method to repaint the form.

Listing 15.3 The Browse button click event handler

private void btnBrowse_Click(object sender,
 System.EventArgs e)
{
 OpenFileDialog fdlg = new OpenFileDialog();
 fdlg.Title = "C# Corner Open File Dialog" ;
 fdlg.InitialDirectory = @"c:" ;
 fdlg.Filter = "Image Files(*.BMP;*.JPG;*.GIF)|" +
 "*.BMP;*.JPG;*.GIF|All files (*.*)|*.*";
 fdlg.FilterIndex = 2 ;
 fdlg.RestoreDirectory = true ;
 if(fdlg.ShowDialog() == DialogResult.OK)
 {
 button1.BackgroundImage =
 Image.FromFile(fdlg.FileName) ;
 textBox1.Text = fdlg.FileName;
 }
 Invalidate();
}

15.1.3 Drawing Transparent Controls

How can I draw transparent controls? This is one of the commonly asked questions on discussion forums.

Drawing transparent controls involves two steps. First we set a form's style to enable support for transparent controls. We do this by calling the SetStyle method of the form, passing ControlStyles.SupportTransparentBackColor as the first argument, and setting the second argument (which in turn sets the SupportTransparentBackColor bit) to true. Next we set the control's BackColor property to a transparent color. Either we can use Color.Transparent, or we can create a Color object using an alpha component value less than 255 to provide custom semitransparency. Listing 15.4 sets the background color of controls to transparent.

Listing 15.4 Setting the background color of controls to transparent

/* Code for transparent controls */
this.SetStyle(
ControlStyles.SupportsTransparentBackColor,
true);
button1.BackColor = Color.Transparent;
btnBrowse.BackColor = Color.Transparent;
btnClose.BackColor = Color.Transparent;
panel1.BackColor = Color.FromArgb(70, 0, 0, 255);

The output of Listing 15.4 looks like Figure 15.2.

Figure 15.2. Designing transparent controls

Note

Not all controls support transparent color. For example, if you set the BackColor property of a text box to Color.Transparent, you will get an exception.