Click here to Skip to main content
13,342,876 members (57,442 online)
Click here to Skip to main content
Add your own
alternative version


36 bookmarked
Posted 31 Oct 2013

A PictureBox with Zoom, Grid and Rulers

, 6 Mar 2014
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

Software Developer (Senior)
United Kingdom United Kingdom
Machine Vision, Robotics, and UI Developer.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Heriberto Lugo25-Sep-15 21:05
memberHeriberto Lugo25-Sep-15 21:05 
QuestionNice work Pin
kidphysics2-Mar-15 9:58
memberkidphysics2-Mar-15 9:58 
QuestionCan't open the full project Pin
Member 1072861612-Jan-15 6:37
memberMember 1072861612-Jan-15 6:37 
QuestionDevelop this file Pin
Member 1028504917-Aug-14 9:30
memberMember 1028504917-Aug-14 9:30 
QuestionZip problem ! Pin
marcus9222-Mar-14 4:17
membermarcus9222-Mar-14 4:17 
QuestionNice looking control Pin
JWhattam6-Mar-14 11:22
memberJWhattam6-Mar-14 11:22 
GeneralMy vote of 5 Pin
Marco Bertschi6-Mar-14 9:52
protectorMarco Bertschi6-Mar-14 9:52 
Questionvery thanks Pin
Member 414767423-Jan-14 10:29
memberMember 414767423-Jan-14 10:29 
Generalthanks giving Pin
Member 101499064-Nov-13 15:20
memberMember 101499064-Nov-13 15:20 
QuestionVery Nice Pin
wlrice1-Nov-13 12:50
memberwlrice1-Nov-13 12:50 
QuestionGreat job Pin
N. Henrik Lauridsen1-Nov-13 11:46
memberN. Henrik Lauridsen1-Nov-13 11:46 
GeneralVery handy! Pin
dbolg3331-Oct-13 7:45
memberdbolg3331-Oct-13 7:45 
QuestionGreat job Pin
Tom Clement31-Oct-13 4:24
mentorTom Clement31-Oct-13 4:24 
AnswerRe: Great job Pin
LucaDN31-Oct-13 13:21
memberLucaDN31-Oct-13 13:21 
QuestionImage and source code missing Pin
Smitha Vijayan31-Oct-13 2:47
staffSmitha Vijayan31-Oct-13 2:47 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180111.1 | Last Updated 6 Mar 2014
Article Copyright 2013 by LucaDN
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid