Loading images and assigning them to tree items.
The SRP Tree Control is most effective as a user interface when it uses item images. Item images are the icons that appear to the left of an item's text and are useful in communicating relationship or classification to a user. For instance, if an item represents an email, it might be helpful to the user to show an envelope icon.
Traditionally, establishing images for items in the control has been limited and tedious. The SRP Tree Control aims to simplify the process by providing many ways, some of them automated, to set item images.
Loading Images
Images consume memory. The more you load, the more resources your tree requires. The SRP Tree Control offers two ways to load images. First, you can have an item load an image directly using the ItemImages property. In this case, the image is loaded and used solely by that item. This is sufficient when you plan to use very few images. But if every item in your tree uses images, and if many of them use the same image, then you will be consuming far more memory than is necessary.
The second way to load images is to load them globally using the Images property. This property loads the images such that they are accessible to all items. Instead of having each item maintain its own image in memory, you instruct each item to point to one of the global images. The Images property allows you to load any number of images and to assign them unique names, or keys. Then, instead of setting an item's ItemImage property to a path and filename, you set the property to the key of a global image. This saves us a lot of memory, but it is still tedious to implement without some sort of automation.
Automating Images
The SRP Tree Control can automate which global images appear next to which item. This is done using the ImageConditions property. This property accepts a series of conditional statements associated to a single global image. When a condition evaluates to true, then that global image is used. For more information on the format and function of these conditional statements, see the how-to article on Conditions.
More often than not, images are used for classification. Therefore, the ItemClass property can be very useful in automating images. Using our previous example, imagine a tree that contains the structure of an email inbox. When you add items to a tree, you can specify the item's class. For emails, you can set the class to "Mail". In order to show email icons next to these items, you simply load the global images and set the condition like so:
// Load the global images Images = "" Images<-1> = "MailIcon" :@VM:"BMPS\SRP_TREE_MAIL_ICON.PNG" Images<-1> = "Foldercon":@VM:"BMPS\SRP_TREE_MAIL_FOLDER.PNG" Set_Property(@Window:".OLE_TREE", "OLE.Images", Images) // Set the conditions in which the icons should be used Conditions = "" Conditions<-1> = "MailIcon" :@VM:"Class EQ 'Mail'" Conditions<-1> = "Foldercon":@VM:"1" Set_Property(@Window:".OLE_TREE", "OLE.ImageConditions", Conditions)
The first section of code loads two global images, MailIcon and FolderIcon. Now, we could just as easily set each item's ItemImage property to one of these two icons, but it's a lot easier to use the ImageConditions property instead. So, we set two conditions. The first condition says that the MailIcon should be used if the item's class is equal to Mail. The second condition says to always use the FolderIcon. The list is processed sequentially, like a Case statement, such that the first true condition is the one whose image is used. Thus, we could envision the conditions used in our example to read like the following pseudo-code case statement:
Begin Case Case ItemClass EQ "Mail" ItemImage = "MailIcon" Case 1 ItemImage = "FolderIcon" End Case
Special Effects
You can enhance the look and feel of the SRP Tree Control using the ImageEffects property. Just like the ImageConditions property, the ImageEffects property is a series of Conditions. When a condition evaluates to true, then the associated special effect is applied to the item's image. Use this if you want to add hover effects or emphasize selected items.
