Designing Interactive GUI Applications in GDI+

This article has been excerpted from book "Graphics Programming with GDI+".

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.

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 options 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.

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.

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.



FIGURE 15.1: An interactive GUI application

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

        private void Form1_Load(object sender, EventArgs e)
        {
            //Button 1
            btnClose.ForeColor = Color.Yellow;
            btnClose.BackColor = Color.Maroon;
            btnClose.FlatStyle = FlatStyle.Flat;
            btnClose.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("Arial", 10, FontStyle.Italic);
            btnBrowse.ForeColor = Color.White;
            btnBrowse.BackColor = Color.Black;
            btnBrowse.FlatStyle = FlatStyle.Flat;
            btnBrowse.Font = new Font("Arial", 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);
            //Panel 1
            panel1.BorderStyle = BorderStyle.FixedSingle;
            panel1.BackColor = Color.Red;

        }

Output:



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_1(object sender, 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)
                {
                    button3.BackgroundImage = Image.FromFile(fdlg.FileName);
                    textBox1.Text = fdlg.FileName;
                }
                Invalidate();
          
        }

Output :