Y'herd thisun? 

“Learning how to do in something new what you do without thinking in something old strengthens you in both.”

from this by smith

Your own image control and App part 2

TaggedCoding, VB, Imaging

Originally published December 2002 on 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.


2) Setting up the workspace

Load Visual Studio 2003 and on the Start page, click on the "New Project" button. In the top left "Project Types" tree, select "Visual Basic Projects" and in the right "Templates" pane choose the "Windows Control Library" template. Down at the bottom of the screen, name the project "svImageEdit" and press OK.

This next part may seem a little odd, just trust me. When the project is ready, right click on the Usercontrol.vb node of the Solution Explorer tree and click on "Delete" to kill the default file. Now right click on the project node and on the popup click on "Properties" and in the popup set the "Default Namespace" to "Smithvoice" (You can use the name of your company or organization, just remember to use your value where I type "Smithvoice" later in the code). Press OK to close the project properties form. Right click again on the project node and click on the popup's "Add User Control" option and use the wizard to create a new UC named "svImageEditor".

You could have renamed the UC node "svImageEditor.vb" and gone into code view and replaced the default class name to match the file name but deleting and adding new seems both safer and faster to me. Plus it makes changing the Namespace easier because you can't change that value if any Forms or UserControls are loaded into designers, so killing the default user control lets you check both the ToDo list.

If the user control's (we'll refer to it as the "UC" from here on) property sheet isn't visible press F4 to bring it up and set the AutoScroll property to True. To make things easier to see during development, change the Backcolor property to LightYellow or something similarly distinctive and not too jarring (the control's backcolor property lets the dev-user change this when they use the control in the IDE.

A UserControl project can't be started directly so we'll have to add a WinForm project to the solution. Right click on the solution node (the very top node of the Solution Explorer tree) and click on the popup's "Add >> New Project" options. In the wizard, select the "Windows Application" template and name the project "testHarness", click OK to generate the WinForm app. When the project appears in the Solution Explorer, right click on the project node and select "Set as Startup Project", this will bold the project node signifying that when you press F5 in this solution, the testHarness will be the project that runs.

One last thing, just a sanity check, a user control has to be built at least once in order for it to be available for use in its solution so go up to the Build menu and click on "Rebuild Solution" (You could technically just build the svImageEdit project or use "Build Solution" which only builds unchanged code, it's up to you, I tend to always use Rebuild in the hope of getting at every nook of a solution's code even though it can take a few seconds more. Call me paranoid.).

Now, with the testHarness default form in the designer, go to the toolbox's "My User Controls" tab and select the svImageEditor, draw an instance of the control on the form, have it take up most for the form leaving some space at the bottom for test buttons. If the toolbox icon was disabled or you got an error when you tried to add the instance to the form, make sure that you're in the testHarness project with the testHarness's Form1 in the visible designer and try the Rebuild again. All of this was to make sure that the projects are talking to each other correctly. Before we leave the form, select the svImageEditor1 instance and use its property sheet to set its Anchor property to all sides (Top, Left, Bottom, Right) so when we resize the form the control will resize with it.

Now we can start making the UC do the spec.

Double click on the svImageEditor.vb node of the svImageEdit project to load the UC into the visible designer. Find the Picturebox in the toolbox's "Windows Forms" tab and double click on it to add an instance to the UC. By default the instance should load itself snugly against the upper left corner of the user control which is where we want it, do a quick check to make sure by selecting the picturebox and pressing F4 to get to its property sheet, verify that the Location property is set to "0,0". Still in the property sheet, scroll to the "(Name)" property and change the value from "Picturebox1" to "pbDisplay" then set the picturebox's BorderStyle to FixedSingle to draw a thin line around its sides and set the SizeMode property to AutoSize which will expand the picturebox to match the actual size of the loaded images.

Now switch back to the testHarness Form1. If you've followed each step then the svImageControl instance on the form doesn't look the same as the way you set it in the UC project. This is because a compiled copy of the user control is added to the testHarness project BIN folder and that compiled version is what the harness app uses. To update the instance Rebuild the solution, this will overwrite the old file and you should see the picturebox in the UC instance.

Save the solution.

That's it for the visual part of the project, from here on we'll be doing code.

Next: Loading images

Robert Smith
Kirkland, WA

added to smithvoice march 2005

jump to:

  • 1) The spec
  • 2) Setting up the workspace
  • 3) Feature 1: Loading an image
  • 4) Custom Exceptions
  • 5) "Fax images" and Multipage TIFFs
  • 6) Custom events
  • 7) Selecting specific fax pages
  • 8) Feature 2: Rotating image displays
  • 9) The most useful tool in GDI+: DrawImage
  • 10) Feature 3: Zooming
  • 11) Handling the unhandleable exception
  • 12) Fixing the squish
  • 13) Zooming to fit the control
  • 14) You're already beating the Pros
  • 15) Feature 4: Cropping
  • 16) Bonus Feature: StickyMouse
  • 17a) Final Cleanup
  • 17b) Passing the current display image
  • 18) Making the application
  • 19) Source and result viewports
  • 20) A better toolbar
  • 21) Hooking the toolbar to the project
  • 22) Adding ImageEditors
  • 23) The toolbar ZoomCombo
  • 24) The final solution
  • 25) Saving to image files
  • 26) An integer-only textbox
  • 27) Passing save options between forms
  • 28) Dealing with that last exception
  • 29) Offer more options with menus
  • 30 The downloads and ebook

  • home     who is smith    contact smith     rss feed π
    Since 1997 a place for my stuff, and it if helps you too then all the better