Designing GUI Applications in GDI+ using VB.NET

In this article you will learn how to Design Interactive GUI Applications in GDI+.
  • 3439

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.

Input.gif

FIGURE 15.1: An interactive GUI application

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

    Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
        '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
    End Sub

Output:


Output1.gif

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 Sub btnClose_click(ByVal sender As Object, ByVal e As System.EventArgs)
    Me.Close()
    End Sub

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 Sub btnBrowse_Click_1(ByVal sender As Object, ByVal e As EventArgs)

        Dim fdlg As 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 Then
        button3.BackgroundImage = Image.FromFile(fdlg.FileName)
        textBox1.Text = fdlg.FileName
        End If
        Invalidate()

    End Sub

Output :

Output2.gif 

Categories

More Articles

© 2013 dotNetheaven. All rights reserved.