Designing GUI Applications in GDI+ using VB.NET
In this article you will learn how to Design Interactive GUI Applications in 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 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:
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 :
