Adding a Picture to a Button

The Style department is calling again—how about souping up your program's user interface by adding a few images? But all you've got in your program are buttons, you say. No problem, they say, add images to them.

You can display images in buttons, as in the ImageButtons example on the CD-ROM. You can add images to buttons at design time and at run time. At design time, you only need to set the Image property in the Properties window to an image file. At run time, you can do the same thing if you use the Image class's FromFile class method and assign the resulting Image object to the button's Image property. In the ImageButtons example, I load a new image into a button when that button is clicked, and I use the ImageAlign property to set the alignment of the image, as well as setting the button's FlatStyle property to FlatStyle.Flat to make it appear flat:

Private Sub Button1_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
    Button1.Image = _
        Image.FromFile("C:\vbnet\ch06\imagebuttons\clicked.jpg")
    Button1.ImageAlign = ContentAlignment.TopLeft
    Button1.Text = ""
    Button1.FlatStyle = FlatStyle.Flat
    TextBox1.Text = "You clicked the button"
End Sub

You can see the results in Figure 6.10. When the program starts, it displays the image I loaded into it at design time, button.jpg (which is included in the ImageButtons folder on the CD-ROM).

Figure 6.10: Using an image in a button.

When you click the button in this example, the code above executes and the new image, clicked.jpg, appears in the button, as you see in Figure 6.11.

Figure 6.11: Setting an image in a button from code.