Web Forms - Working with ASP.NET server controls

Web server image controls are the Web counterpart of Windows picture boxes. As their name indicates, you use these controls to display images in Web applications. In fact, that's really all they do—display passive images.

Not that much is going on in image controls—they're simply translated to HTML <img> elements, and they don't support events such as the Click event. (For that, see the image button control, coming up next.) You just use them to display images. Here's the inheritance hierarchy for the System.Web.UI.WebControls.Image class:

You can find the significant public properties of System.Web.UI.WebControls.Image objects in Table 14.1. (This class has no noninherited methods or events.) Note that as with other Web server controls, this table does not list the significant properties, methods, and events this class inherits from the Control and WebControl classes—you can find them in Tables 12.1 to 12.5.

Table 14.1 Significant Public Properties of Image Objects

You can see an image control at work in Figure 14.1. The Image example is in the code for this book. This example simply displays the image from the image file image.jpg, also included in the code for this book.

Figure 14.1
The Image example.

Here's the HTML used in the browser to display the image you see in Figure 14.1 (note that the full local URL for image.jpg, file:///C:\inetpub\wwwroot\Image\image.jpg, is used here, so if the URL of the image you want to display is different, you'll have to change this URL in the Image example's WebForm1.aspx file):

To connect an image to an image control, you just assign the image's URL to the image control's ImageUrl property. At design time, you can browse to the image you want to use by clicking this property in the Properties window. Of course, you can also set the ImageUrl property at runtime to the URL of an image, whether local (such as file:/// C:\inetpub\wwwroot\Image\image.jpg) or on the Web (such as http://www.starpowder.com/images/etheldreda.jpg).

You can specify the alignment of the image in relation to other elements in the page by setting the ImageAlign property, which can take these values from the ImageAlign enumeration:

• ImageAlign.AbsBottom—Aligns the lower edge of the image with the lower edge of the largest element on the same line.

• ImageAlign.AbsMiddle—Aligns the middle of the image with the middle of the largest element on the same line.

• ImageAlign.Baseline—Aligns the lower edge of the image with the lower edge of the first line of text.

• ImageAlign.Bottom—Aligns the lower edge of the image with the lower edge of the first line of text.

• ImageAlign.Left—Aligns the image on the left edge of the Web page with text wrapping on the right.

• ImageAlign.Middle—Aligns the middle of the image with the lower edge of the first line of text.

• ImageAlign.NotSet—Indicates that the alignment is not set.

• ImageAlign.Right—Aligns the image on the right edge of the Web page with text wrapping on the left.

• ImageAlign.TextTop—Aligns the upper edge of the image with the upper edge of the highest text on the same line.

• ImageAlign.Top—Aligns the upper edge of the image with the upper edge of the highest element on the same line.

You can also specify the text to display in place of image if the image is not available by setting the AlternateText property. And you can position an image with its Top and Left style properties like this:

Private Sub Page_Load(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MyBase.Load
  Image1.Style("Top") = "200px"
  Image1.Style("Left") = "200px"
End Sub

Like other Web server controls, you can set the height and width of image controls with the Height and Width properties:

Image controls such as these only display images—if you want to handle Click events, you'll need to use image button controls, coming up next, instead.