The following steps will show you how to get started with WebImageViewer™.
Assumptions for the following steps:
You have already created a new ASP.NET AJAX-Enabled Web Site named Getting_Started_with_the_WebImageViewer.
You have an images folder that contains several image files.
You have an ASP.NET Ajax ScriptManager instance on the WebForm.
You have enabled the Infragistics Application Styling for this application and you are using the Default Style. For information on how to do this, see Enabling Application Styling Using the web.config File.
When you finish reading, you will have a WebForm with an instance of the WebImageViewer control that which you can use to navigate and scroll through a list of your images.
In the Visual Studio Toolbox, locate the WebImageViewer and double click it. This will place an instance on the WebForm.
Click the WebImageViewer control and in the Property Window, set the Width property to 600PX and the Height property to 100PX.
In the Property Window, locate the Header property and expand it. Set the following properties:
Text — “My Pictures”
Visible — true
Double click the WebForm to add an event handler for the Page Load event.
In the Page_Load event handler, add the following code to load the WebImageViewer with your images:
In Visual Basic:
If Me.IsPostBack Then Return
' Get a list of images
Dim imgs() As String = _
System.IO.Directory.GetFiles("\images", "$$*$$.$$* $$")
' Add a new ImageItem to the WebImageViewer per image
For Each img As String In imgs
Dim theFile As String = "./images/" + System.IO.Path.GetFileName(img)
Me.WebImageViewer1.Items.Add( _
New Infragistics.Web.UI.ListControls.ImageItem(imgUrl, altText, toolTip))
Next
In C#:
if (this.IsPostBack) return;
// Get a list of images
string[] imgs =
System.IO.Directory.GetFiles(@"\images", "$$*$$.$$* $$");
// Add a new ImageItem to the WebImageViewer per image
foreach (string img in imgs)
{
string theFile = "./images/" + System.IO.Path.GetFileName(img);
this.WebImageViewer1.Items.Add(
new Infragistics.Web.UI.ListControls.ImageItem(imgUrl, altText, toolTip));
}
Save and run the application. The WebImageViewer will display a horizontal list of images that are in the images directory and should look similar to this:
You can navigate through the list of images by clicking the Next and Previous buttons located on the left and right of the control. You can also click and drag the images directly.