Click here to Skip to main content
Click here to Skip to main content

A PictureBox with Zoom, Grid and Rulers

, 6 Mar 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Add zoom capabilities, grid and rulers to the standard WinForms PictureBox control


I develop front ends for Industrial Machine Vision applications.

The very first thing to do, when setting up a machine vision system, is to establish a relation between positions in the real world and pixels in the pictures that come from the cameras.

Every vision library has precise calibration and gauging tools, but I often need a simple tool to analyze the pictures in the early stages of system set up.

What I need is an extension of the standard System.Windows.Forms.PictureBox, with a ruler, a grid and -quite obviously- an easy way to zoom into details of the parts I am analyzing.

This is a control which I've been using for many years (the very first one was written in VB5). Now I need to port it to WPF, so I started cleaning up the code to make the re-coding easier. It was full of reference to vision libraries, and full of strange properties and functions. This is not a good starting point for the porting process.


  • Easy zooming and panning by keyboard (+/- and arrow keys) or mouse (dragging a rectangle, using the wheel or left and right button) .
  • Gauging tool: gives you the angle and length of a line dragged on the control.

  • Measure unit: you can set the ruler to micron, mm/10, mm, inches, meters.

  • Customizable pixel size. Defining the actual size of pixels (the 'real world' DPI) is the first operation to perform, for the rulers to display actual sizes (if you temporarily want to see the cursor position expressed in pixels, just keep the CTRL key pressed).

Using the Code

There is no advanced coding here; it's just a ready to use component which I hope will be useful to someone. There is a Test Application whose code is straightforward. There is also an additional user control that performs all the customization for you, if you don't want to do it programmatically.

Consider that we are talking of a control inherited from the standard Windows.Forms.PictureBox. You have the standard properties of the base control, with some additions.

If you want to control its properties through your code, here are some examples.

  • Changing the measure unit:
    LinkedPictureBox.UnitOfMeasure = MeasureSystem.enUniMis.dmm 
  • Switching between Zoom mode and gauging mode:
    LinkedPictureBox.ClickAction = enClickAction.Zoom
  • Hiding or showing rulers, scroll bars, and grid:
    btViewRulers.Checked = LinkedPictureBox.ShowRulers
    btViewScrollBars.Checked = LinkedPictureBox.ShowScrollbars
    btViewGrid.Checked = LinkedPictureBox.ShowGrid
    tbPixelSizeMic.Text = CStr(LinkedPictureBox.BackgroundImagePixelSize_Mic)  


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Luca De Nardi
Software Developer (Senior)
Italy Italy
Machine Vision(ary), Robotics, and GUI Developer.
Follow on   LinkedIn

Comments and Discussions

QuestionNice work Pinmemberkidphysics2-Mar-15 9:58 
QuestionCan't open the full project PinmemberMember 1072861612-Jan-15 6:37 
QuestionDevelop this file PinmemberMember 1028504917-Aug-14 9:30 
QuestionZip problem ! Pinmembermarcus9222-Mar-14 4:17 
QuestionNice looking control PinmemberJWhattam6-Mar-14 11:22 
GeneralMy vote of 5 PinprotectorMarco Bertschi6-Mar-14 9:52 
Questionvery thanks PinmemberMember 414767423-Jan-14 10:29 
Generalthanks giving PinmemberMember 101499064-Nov-13 15:20 
QuestionVery Nice Pinmemberwlrice1-Nov-13 12:50 
QuestionGreat job PinmemberN. Henrik Lauridsen1-Nov-13 11:46 
GeneralVery handy! Pinmemberdbolg3331-Oct-13 7:45 
QuestionGreat job PinmentorTom Clement31-Oct-13 4:24 
AnswerRe: Great job PinmemberLucaDN31-Oct-13 13:21 
I followed your suggestions. Thank you.
QuestionImage and source code missing PinstaffSmitha Vijayan31-Oct-13 2:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150327.1 | Last Updated 6 Mar 2014
Article Copyright 2013 by Luca De Nardi
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid