Originally published December 2002 on DoItIn.net using VB7.0/2002. Updated for VB7.1 February 2005
Links for compiled demo versions, all required resources and source code are included at the end of this article.
Plus, get the complete eBook in Adobe Acrobat 7 format ... all here.
19) Source and result viewports
Each instance of the svImageEdit control will have its own toolbar with buttons relating to the logical features of each control and we want the svImageEditor and its toolbar to move and size as a unit. We could pop them into a usercontrol but that adds more complexity than we need. Instead, we'll just put a toolbar and an svImageEdit in a panel control, and do the same for the Result "viewport".
I've had a lot of repaint issues over the years with complex controls in groupboxes, hence the panel being advised.
Drop a panel on the form, change its name to "pnlSource" and set the Dock property to Left so it snuggles into the left edges of the form. Drag the right edge of the groupbox to just about the middle of the form.
We're going to use a splitter so that the two viewports can be resized at runtime. Personally I never used the built-in splitter control as-is because I've seen too many users have trouble with it, the default flat style doesn't make its placement or reason obvious. The built-in 3dstyle insets the splitter which, in my experience, is even worse than keeping it flat. It's up to you and your users but I'd say use the smithvoice.com popup splitter code to give a look that most internet-experienced people will understand. There's no need to compile it into a dll, just add a new usercontrol to the exe project, change the inheritance and type the border drawing code into the OnPaint or Paint event. Build the project and the control will be available from the "My User Controls" toolbox tab.
Whether you use a standard or enhanced splitter, getting it on the form correctly is just as tedious ;-). Select the pnlSource on the form then open the toolbox and double click on the splitter control. It should be added to the right side of the panel. I always have to do this a few times before it works correctly. Once it's there, make it easier to see by setting its Size width to 5 instead of the default 3.
Now add the result viewport. Click on the toolbox panel control icon and draw an instance on the open right side of the form. With the new panel selected, go to the property sheet and set the Name to "pnlResult" and the Dock to Fill. Save your project and F5 to test. If the splitter doesn't move at runtime, start over and make sure the splitter is being set to the correct place.
Next: A better toolbar control
Robert Smith
Kirkland, WA
added to smithvoice march 2005