The third part of the Quick start tutorial focuses on the ImageToolTip component. We will design a default layout for the ImageToolTips on the form and again add such a ToolTip to a control on the main form of the sample program. We will also see, how layout and behavior properties can be overridden through the extended property provided to the controls on the form. This part assumes that the reader has followed Part I and Part II of the tutorial.
Step 1 - Configure the layout of the ImageToolTip component
- We could proceed as in the previous parts of this tutorial and manually configure the design we like for our ImageToolTips, but this would somehow be boring, because we know how to do this already. Instead we are going to load an already existing layout.
To do this, we have to select the ImageToolTip component in the component tray of our example program:
- Now we have the choice, whether we want to load the layout directly from the Visual Studio property grid
or from the ImageToolTip Layout-designer. The Layout-designer has the advantage that we can test the loaded layout right away. Therefore it makes sense, if we double-click the ImageToolTip component (ToolTipsFactoryImage1) to open the designer.
- In the open designer we can go straight to the "Load layout..."-link and click it. This should open the file selection dialog.
- In the file-selection window navigate to the directory where the ToolTipsFactory is installed (the default directory is "C:\Programs\Abstraction Systems\ToolTipsFactory1.0").
- In the ToolTipsFactory home directory we go to the ".\Layouts\ImageToolTips" directory and select the ImageToolTip layout file named "BlackWhiteShingle.itt".
- We open the selected file and see what we have loaded as soon as we move the mouse pointer over the test area:
As we can see, the image (provided by the designer) is now nicely framed by a black border with a white hatch-pattern. (The relevant properties here are: Border=Hatch; BorderColor=Black; BorderWidth=15; BorderHatchColor=WhiteSmoke; BorderHatchStyle=Shingle)
- We close the ImageToolTip Designer by clicking the Ok-Button, which will commit the new layout for the ImageToolTip component.
Step 2 - Assign ImageToolTip content to controls on the form
- The next step will be to make a control on our main form display an ImageToolTip. For this we proceed exactly as in the previous parts. First we add a new Button (Button3) (or any other kind of control) to the form as shown below:
- In the Visual Studio property-grid we scroll down to where the provided properties for Button3 are located and expand the "ImageToolTip on ToolTipsFactoryImage1"-property:
- Now we have to load an image into the "Image"-property. We do this by clicking into the property and click on the small button with an ellipsis that appears on the right side. This open a file-selection box, where we can browse for the image we want to assign to Button3.Again we navigate to the directory where the ToolTipsFactory is installed and from there down to ".\Images" directory.
- In this directory we select the image file named "IlluminatedWindow.jpg" and open it. The loaded image should then appear in the property-grid as a small icon, as the next image illustrates:
- If we want to see now, how the loaded image looks inside the frame we have defined for the ImageToolTip component, we open the Layout override-designer (accessed through the Override-property) and make the ToolTip appear over the test area. The result should look like this:
Step 3 - Override default layout properties
- Our next goal is to see, how we can override the default layout specified for the ImageToolTip component in Step 1. This means, we want to see how we can make the ImageToolTip look slightly different for each control on the form, even if their default layout is the layout assigned to the component ToolTipsFactoryImage1 and it is the component that paints the ToolTips.
To demonstrate this, we first add another Button (Button4) to our form:
- Also for this button (Button4), we'll load a picture for the ImageToolTip as described above under Step 2. But in this case we load the file "Clouds.jpg", which - when tested with the Layout override-designer - will give the following result:
- With the ImageToolTip Layout-override designer already open, we can proceed and define right away which layout properties should be overridden with other values.
In the following two pictures you can see the changes made in the Layout override-designer and the resulting ToolTip appearance:
Step 4 - Compile and test the program
- As a last step we can compile and run the program. If we move the mouse pointer over the buttons "ImageToolTip1" and "ImageToolTip2" we should now see the smaller ToolTip with the black/white border appearing over the button "ImageToolTip1" and the larger ToolTip with the gray/blue border on "ImageToolTip2".
Summary - Part III
In this chapter we learned how to load an existing design and how to use the ImageToolTip component. We also saw, how we can override one or more layout-properties through the property provided to controls by the ToolTip component. This feature makes it possible to provide the ToolTip on each control on the form with a distinct appearance. The steps needed to load existing designs and to override layout properties through the provided properties are common to all ToolTipsFactory components.
Please note: This chapter did not provide an in-depth discussion of all the properties exposed by the components and how they are best used. There is much more to be known, if you want to take full advantage of the possibilities inherent in this components. This more exhaustive information is provided in the reference and tutorial chapters of this document.
In Part IV we will design and use an AnimationToolTip, learn how to load existing animations and we'll also try to create our first own movie-clip with the ToolTipsFactory Animation-designer.