INFO: Display Icons in Treeview Control with ImageList Control

ID: Q165674

The information in this article applies to:

SUMMARY

To Display icons in the Treeview control using the ImageList control, you have to load the images into Image controls and associate the Image controls with the ImageList control. You need to do this because Visal Basic, Scripting Edition (VBScipt), does not support LoadPicture in version 1.x.

MORE INFORMATION

Following is a sample of how to display icons in a Treeview control using the ImageList control and Image control.

   <HTML>
   <HEAD>
   <TITLE>New Page</TITLE>
   </HEAD>
   <BODY>

   <OBJECT ID="ImageList1" WIDTH=38 HEIGHT=38
    CLASSID="CLSID:58DA8D8F-9D6A-101B-AFC0-4210102A8DA7">
       <PARAM NAME="_Version" VALUE="65536">
       <PARAM NAME="_ExtentX" VALUE="804">
       <PARAM NAME="_ExtentY" VALUE="804">
       <PARAM NAME="_StockProps" VALUE="1">
       <PARAM NAME="BackColor" VALUE="-2147483643">
       <PARAM NAME="MaskColor" VALUE="12632256">
   </OBJECT>

   <OBJECT ID="Image1" WIDTH=0 HEIGHT=0
    CLASSID="CLSID:4C599241-6926-101B-9992-00000B65C6F9"
    DATA="DATA:application/x-
   oleobject;BASE64,QZJZTCZpGxCZkgAAC2XG+QACEAAEBgAA
   //8AAIMDAACDAwAAsIFn2krCzxG1
   hACqAKcdGmx0AAA2BAAAAAABAAIAICAQAAAAAADoAgAAJgAAABAQEAAAAAAA
   KAEAAA4DAAAoAAAAIAAAAEAAAAABAAQAAAAAAIACAAAAAAAAAAAAAAAAAAAA
   AAAAAAAAAAAAgAAAgAAAAICAAIAAAACAAIAAgIAAAICAgADAwMAAAAD/AAD/ 
   AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
   AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAAAAAAAAAAAAAAAAAAAP
   C/8AAAAAAAAAAAAAAAAACw/7/wAAAAAAAAAAAAAAAA8L//uPAAAAAAAAAAAA
   AAALD/v/i/8AAAAAAAAAAAAADwv/+4/7jwAAAAAAAAAAAAsP+//7/4uPAAAA
   AAAAAAAPC//7//uPi48AAAAAAAAACw/7//v/i4+L8AAAAAAAAA8L//v/+4+L
   j/AAAAAAAAALD/v/+/+Lj4vwAAAAAAAADwv/+//7j4uP8AAAAAAAAAsP+//7
   /4uPi/AAAAAAAAAPC//7//v/i4/wAAAAAAAACw/7//v/+4+L8AAAAAAAAA8L
   //v/+/+Lj/AAAAAAAAALD/v/+//7j4vwAAAAAAAADwv/+//7/4uP8AAAAAAA
   AAsA+//7//v/i/AAAAAAAAAA+wD7APv/+4/wAAAAAAAAAAD7APsA+/+L8AAA
   AAAAAAAAAL+/vwD7j/AAAAAAAAAAAAAL+/v7D4vwAAAAAAAAAAAAD7+/vwuP
   8AAAAAAAAAAAAAD7+/vwC/AAAAAAAAAAAAAAAL8AD7AAAAAAAAAAAAAAAAAA
   AAALAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////// 
   ////P////g////wD///8AP///AA///wAD//8AAP//AAA//wAAD/8AAA//AAA
   P/wAAD/8AAA//AAAP/wAAD/8AAA//AAAP/wAAD/8AAA//AAAP/wAAD//AAA/ 
   /8AAP//wAD//8AA///AAP//8AD///zh////+f/////8oAAAAEAAAACAAAAAB
   AAQAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAgAAAAICAAIAA
   AACAAIAAgIAAAICAgADAwMAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA//// 
   AAAAAAAAAAAAAA8AAAAAAAAACwsAAAAAAAAPD4sAAAAAAAsLj4sAAAAADw/7
   j4sAAAALC/+LjwAAAA8P+4+LAAAACwv/+48AAAAPD/v/iwAAAAvwD/uPAAAA
   AL+wD4sAAAAAAPvwDwAAAAAAv7+wAAAAAAAL8AAAAAAAAAAAAAAA5/8AAMP/ 
   AADA/wAAwD8AAMAPAADABwAAwAcAAMAHAADABwAAwAcAAMAHAADABwAA8AcA
   APgHAAD4BwAA/n8AAA==
   ">
   </OBJECT>

   <OBJECT ID="Image2" WIDTH=0 HEIGHT=0
    CLASSID="CLSID:4C599241-6926-101B-9992-00000B65C6F9"
    DATA="DATA:application/x-
   oleobject;BASE64,QZJZTCZpGxCZkgAAC2XG+QACEAAEBgAA
   //8AAIMDAACDAwAAsIFn2krCzxG1
   hACqAKcdGmx0AAA2BAAAAAABAAIAICAQAAAAAADoAgAAJgAAABAQEAAAAAAA
   KAEAAA4DAAAoAAAAIAAAAEAAAAABAAQAAAAAAIACAAAAAAAAAAAAAAAAAAAA
   AAAAAAAAAAAAgAAAgAAAAICAAIAAAACAAIAAgIAAAICAgADAwMAAAAD/AAD/ 
   AAAA//8A/wAAAP8A/wD//wAA////AAAAAAAAAAAAAAAAAAAAAAAAC7sACIgA
   AAcAAMzMAAAADgu7CwiIBwAAAADMzAwAAA4LuwgIiAdwBweQzMwMwAAOC7sL
   CIgHcAAAcMzMDMwADgu7CAiIB3cHB5DMzAzMwA4LuwsIiAdwAABwzMwMzMAO
   C7sICIgHdwcHkMzMDMzADgu7CwiIB3AAAHDMzAzMwA4LuwgIiAd3BweQzMwM
   zMAOCwsLCAgHcAAAcMzMDMzADgsLCAgIB3cHB5DMzAzMwA4LuwsICAdwAABw
   zMwMzMAOCwsICIgHdwcHkMzMDMzADgsLCwiIB3AAAHDMzAzMwA4LCwgIiAd3
   BweQzMwMzMAOC7sLCIgHcAAAcMzMDMzADgsLCAiIB3cHB5DMzAzMwA4LCwsI
   iAd3AAlwzMwMzMAOCwsICIgHd3CAkMDMDMzADgsLCwAAB3d3CADADAzMwA4L
   CwiwiIB3dwCAzMwMzMAOC7sLiwiIB3cAAMzMDMzAAAu7CLiwiIB3AADMzAzM
   wAAAAAuLiwiIBwAAAAAMzMAAAIiAuLiwiIAAAAiIgMzAAAAIiAuLgAAAAAAA
   iIgMwAAAAIiAuLAAAAAAAAiIgMAAAAAIiAuAAAAAAAAAiIgAAAAAAIiAsAAA
   AAAAAAAAAAAAAAAIiAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwQcYHwAD
   CA8AAAAHAAAAAwAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
   AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABgA
   gAAYAMAAHADgAB4A8AP/APgD/4D8A//A/wP///+D//8oAAAAEAAAACAAAAAB
   AAQAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAgAAAAICAAIAA
   AACAAIAAgIAAAICAgADAwMAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA//// 
   AAAAAAAAAAAADgsIAAgMwAAOCwgHiAzAwA4LCAcIDMDADgsIB4gMwMAOCwAH
   CAzAwA4LAAeIDMDADgsIBwgMwMAOCwgHiAzAwA4LCAcIDMDADgsAB3gMwMAO
   C4CAcAzAwAAAuAgAAADAAAgLAAAAiAAAAIAAAAAIgAAAAAAAAACAAcMAAAAB
   AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgEAA
   AMBgAADh8AAA8fgAAA==
   ">
   </OBJECT>

    <OBJECT ID="Image3" WIDTH=0 HEIGHT=0
    CLASSID="CLSID:4C599241-6926-101B-9992-00000B65C6F9"
    DATA="DATA:application/x-
   oleobject;BASE64,QZJZTCZpGxCZkgAAC2XG+QACEAAEBgAA
   //8AAIMDAACDAwAAsIFn2krCzxG1
   hACqAKcdGmx0AAA2BAAAAAABAAIAICAQAAAAAADoAgAAJgAAABAQEAAAAAAA
   KAEAAA4DAAAoAAAAIAAAAEAAAAABAAQAAAAAAIACAAAAAAAAAAAAAAAAAAAA
   AAAAAAAAAAAAgAAAgAAAAICAAIAAAACAAIAAgIAAAICAgADAwMAAAAD/AAD/ 
   AAAA//8A/wAAAP8A/wD//wAA////AAd3d3AAd3cAAAAAAAAAAAAAAAB3cAAH
   dwAAAAAAAAAAD///AA//8Ad3AAAAAAAAAA////////8AB3cAAAAAAAAP//// 
   //////AHcAAAAAAAD///////////AHcAAAAAAA////////////AHAAAAAAAP
   ////////////B3AAAAAAD///93d3d3d3dwB3d3dwAA/////////////wAAAA
   dwAP////////////////8AdwD/////////////////8AcA////////////// 
   ////8HAP//////////////////B3D//////////////////wBw////d3d3d3
   d3d3d3d3dwcP//////////////////8HD///////////////////Bw////// 
   /////////////wcP//////////////////8HD///////////////////Bw// 
   /////////////////wcP///3d3d3d3d3d3d3d3cHD/////////////////// 
   Bw////n/+fmZ+f/5/5n//wcP///5//n5//n/+fn/n/8HD///+fn5+Z/5+fn5
   /5//Bw////mfmfn/+Z+Z+f+f/wcP///5//n5mfn/+f+Z//8HD/////////// 
   ////////Bw///////////////////wcAAAAAAAAAAAAAAAAAAAAAgcP//wAA
   //8AAD//AAAP/wAAB/8AAAP/AAAD/wAAAf8AAAAHAAAAAwAAAAEAAAABAAAA
   AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
   AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEoAAAAEAAAACAAAAAB
   AAQAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAgAAAAICAAIAA
   AACAAIAAgIAAAICAgADAwMAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA//// 
   AHd3d3cAAAAAAAAAAHcAAAAP////AHAAAA//////B3AAD/zMzMzAB3cP//// 
   ///wBw////////8HD/zMzMzMzAcP////////Bw////////8HD/zMzMzMzAcP
   +f+Z+fmfBw/5n5/5+fkHD/n5mfmfnwcP////////BwAAAAAAAAAHAP8AAAA/ 
   AAAAHwAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
   AAAAAAAAAAAAAAAAAA==
   ">
   </OBJECT>
   <OBJECT  ID="TreeView1"
      TYPE="application/x-oleobject"
      CLASSID="CLSID:0713E8A2-850A-101B-AFC0-4210102A8DA7"
      CODEBASE="/scripts/comctl32.ocx"
     WIDTH=100% HEIGHT=82% >
   </OBJECT>

   <FORM><INPUT NAME="Button1" TYPE="BUTTON" VALUE="Click Here"></FORM>

       <SCRIPT LANGUAGE="VBScript">
   <!--

   Sub Button1_OnClick()
       Dim nodX, imgX

      ImageList1.ImageHeight = 16
      ImageList1.ImageWidth = 16

      Set imgX = ImageList1.ListImages.Add(1,"open",Image1.picture)
      Set imgX = ImageList1.ListImages.Add(2,"closed",Image2.picture)
      Set imgX = ImageList1.ListImages.Add(3,"leaf",Image3.picture)

       TreeView1.ImageList = ImageList1    ' Initialize ImageList.

       Set nodX = TreeView1.Nodes.Add(,, "r", "Root", 1)

       Set nodX = TreeView1.Nodes.Add(,, "r1", "Root1", 2)

       Set nodX = TreeView1.Nodes.Add(,, "r2", "Root2", 3)

    end sub
   -->
       </SCRIPT>

   </BODY>
   </HTML>
Keywords          : PrgCtrlsStd 
Version           : 1.00 1.10
Platform          : WINDOWS
Issue type        : kbinfo

Last Reviewed: March 26, 1997