Legacy Controls NOTICE

This article references our legacy Web Forms Web Viewing controls (WebImageViewer, WebAnnotationViewer, WebThumbnailViewer). It is preserved for archival purposes, but support strongly recommends using our modern HTML5 web controls: WebDocumentViewer, WebDocumentThumbnailer instead)

INFO: WebDocumentViewer Whitepaper - Getting Started With Web Viewing

Main Article Content

Adding the WebImageViewer Control to the Toolbox

To add the WebImageViewer control to the toolbox:

1. Click Tools | Customize Toolbox on the Visual Studio .NET menu.
2. Make sure the .NET Framework Components tab is selected, and find the Atalasoft.DotImage.WebControls namespace.
3. Select the checkbox that corresponds to the WebImageViewer control. If you have multiple versions of the Atalasoft.DotImage.WebControls dll, make sure you select the correct version.
4. Click OK.

WebImageViewer is now included in your toolbox and you can drag and drop the control onto your form.

File Cache

The WebImageViewer control requires a writable directory for caching the images, that is mapable from your application directory.

1. Create a directory for the image cache within your wwwroot directory ex: "/ImageCache/". If you add this folder to your project by using the solution explorer, it should already have the correct permissions. Note: When using ASP.NET 2.0, do not put the cache folder inside the application folder. ASP.NET 2.0 will recompile and end all sessions for the application every time images are deleted from the cache.
2. Make sure this directory is writable by web applications, you can do this using the IIS control panel. You may also need to grant the MACHINE_NAME\ASPNET user account modify permissions for this folder, by using Windows Explorer.
3. Modify your Web.config file by adding to the section.
4. Add these lines inside the tags:
   
   
   

These two lines control where the cache files get written, and how many minutes they stay in there. The AtalasoftWebControls_Cache key will also accept relative paths, so if you created this folder in your project, you could use "ImageCache/". The control will not work at all if it cannot write the images to this location.

Scroll Bar Images & Resources

There are several files used in the control, that are stored within the compiled WebControls dll. These files can be put in a location accessible from your web application to speed up the loading of the control. They are installed into the "Program Files\Atalasoft\DotImage 10.x\C# Source\DotImageWebFormsCS\Resources\" directory. To link to these files, use these steps:

1. Create a directory for the resources within your wwwroot directory ex: "/files/".
2. Copy all files (but not subdirectories) that are in the "Program Files (x86)\Atalasoft\DotImage x.x\bin\2.0\x86\WebResources" directory to the new one you made.
3. modify your web.config file by adding the tag AtalasoftWebControls_ResourcePath to specify this location)
   
   

You can also change the way the scroll bars look by editing the images located in that folder. Keep in mind, that if you change the size of these images to a size other than 16x16 pixels, the images will appear stretched or squeezed. Use the HorizontalButtonSize and VerticalButtonSize properties to change the size to the correct settings.

Original Article:

Q10062 - HOWTO: Set up DotImage WebForms (WebImageViewer)