Adding Images

To demonstrate how to open files with the tree view control we will create a simple web site with some images in it. We will then use the tree view control to display links to open up these images that are included with our project. For this example I will be using two temporary image files that are included with the source of the project. To begin, create a new ASP.NET Empty Web Site and:

  1. Right click the project in your solution explorer.
  2. Select new folder.
  3. Name the folder ‘Images’.
  4. Right click the Images folder.
  5. Select add existing item…
  6. Select Image Files from the filter drop down list.
  7. Select the images you wish to add to the project.
  8. Click add.

Once we have some temporary images added to the project we are ready to configure our tree view control.

Creating the Form

To begin creating our web form:

  1. Right click the project in your solution explorer.
  2. Select add new item…
  3. Select a web form.
  4. Name it ‘Default.aspx’.
  5. Click add.
  6. Open Default.aspx up to source mode.
  7. Drag and drop a treeview onto the web form.
  8. Set the AutoGeneratedataBindings property to ‘False’.
  9. Add the following Node to the tree view:

This has created a tree view with one node that we will configure to display the appropriate data. To do this, we will need to add some code to populate our tree view with the appropriate links. To begin, open Default.aspx.cs up for editing and add the following code to the Page_Load event method:

This simply sets our node to the Images folder relative to our web site. Next, we need to add the code that will set our tree nodes to link to the correct image file when they are populated. To do this, open Default.aspx up to design mode and select the treeview. In the properties window click the events icon and double click the TreeNodePopulate event. Then, add the following code to that event method:

This configures tree view to add nodes that link to our images inside of the Images folder.

To test this out load up the web site. Expand the Images folder in the tree view. Click one of the images and ensure that the image is loaded up in your browser. This demonstrates how easy it is to link the tree view control to files relative to your web site.

Download Source Files