How to: Add and Configure an Image Control 

You can add an Image control to display an image. Setting the value of the ImageUrl property causes the server to send the specified image to all mobile devices. However, you can override properties and use device filters to select alternate images targeted to the capabilities of specific device types. The Image control's NavigateUrl property enables your application to use an image as a hyperlink.

To add an Image control to an ASP.NET mobile Web page

1. Create the image file for the Image control to display.

2. In Solution Explorer, add the image to the project. This helps ensure that the image stays with the project through deployment.

3. From the Mobile Web Forms tab of the Toolbox, drag an Image control onto a Form or Panel control on a mobile Web page. You can also drag it onto a mobile user control page.

4. Link the Image control to a .gif, .jpg, or other Web graphic file by doing the following:

   1. In the Properties window, specify the image URL for the ImageUrl property.

      - or -

   2. In the Properties window, click the ellipsis button () for the ImageUrl property and then use the Select Image dialog box to browse to the location of the image file. Alternatively, if the image was added to the project, you can select it file from the Contents box.

5. Enter text for the AlternateText property. The Image control displays this text if it cannot display the image.

6. Optionally set the Alignment and BackColor properties in the Properties window.

   For information about these and other properties, see Base Mobile Control Properties.

To display an image based on device characteristics

1. In the Properties window, in the AppliedDeviceFilters box, click the ellipsis button ().

   The Applied Device Filters dialog box is displayed.

2. Select the device filter that you want to apply. If you need to create a device filter, click the Edit button and use the Device Filter Editor dialog box.

   Note
   Before you can edit the device filters, you must add a mobile Web configuration file (a Web.config file for mobile controls) to your project, which contains a default <deviceFilters> section.

3. After you select all the device filters that your application will apply to the image, click OK.

4. In the Properties window, in the PropertyOverrides box, click the ellipsis button ().

   The Property Overrides dialog box is displayed.

5. In the Applied Device Filter list, select a device filter.

6. In the ImageUrl property, enter the URL of the image to use for the current device filter.

To make an image a link

1. Add the image to a container control or to a control template.

2. In the Properties window, enter a URL in the NavigateUrl property.

See Also

Reference

Image

Concepts

Introduction to the Image Control
Introduction to the Form Control
Overriding Properties

Other Resources

Using Device Filters