Click here to Skip to main content
13,894,347 members
Click here to Skip to main content
Add your own
alternative version


49 bookmarked
Posted 25 Mar 2008
Licenced CPOL

CZoomCtrl: A Picture Control with Zooming and Scrolling

, 25 Mar 2008
Rate this:
Please Sign up or sign in to vote.
A scrollable child window for pictures of any size.


I'm working on a dialog to display a type of chart. If there are a lot of data points, the display will become dense, and the user will want to zoom in for a closer look. To support this, I need an owner-draw child control with a virtual space, viewport, and scrollbars -- like a CWnd equivalent of CScrollView. I figured I could easily find such a thing, or whip one up using the scroll functions of CWnd.

Days pass. I didn't find one. I now have a solution which is simple, but took some work, so I thought I'd put it out here in case it might save time for someone else.


Handling scrollbars is messy. The CWnd functions will show them, but you have to deal with all the user actions yourself (see the large blob of code in viewscrl.cpp). I tried leveraging other scrollbar handlers, like making the control a subclass of CEdit, then tried CScrollView. I downloaded a copy of ScroomDialog (by miteshpandey on CodeGuru), which is that blob of CScrollView code lifted and adapted to work on a CDialog.

None of this worked very well as the basis for a CStatic picture control. But then, I found a useful class CScrollHelper (by nschan on CodeProject) which manages scrollbars without much baggage. Thanks nschan! My slightly-modified version of your class is included here.

Using the code

CZoomCtrl is a subclass of CWnd, easily dropped into a dialog as a CStatic. It has a CScrollHelper it manages internally. Your job is to provide a draw method and a zoom factor, and the control handles the rest.

The delivery mechanism is a little dialog app (VS2003) with a zoom control, and two buttons:

  • Zoom enlarges the picture by a factor of 1.2, larger with each click. Scrollbars appear on the first click.
  • Fit goes back to the default: full drawing is scaled to fit the window.



To use the control in your own dialog:

  1. Add these four files to your project: zoomctrl.cpp/h, ScrollHelper.cpp/h.
  2. Create a subclass of CZoomCtrl and override the Draw method:
  3. class CMyZoomCtrl : public CZoomCtrl
     { ...
      virtual void Draw(CDC *pDC)
          // fill background
          CRect rClient;
          pDC->FillRect(&rClient, &CBrush(RGB(255,255,255)));
          // define virtual coords
          CRect rVirt(0, 0, 5000, 5000);
          PrepDC(pDC, rVirt, rClient);
          // do your drawing
          pDC->MoveTo(0, 0);
          pDC->LineTo(5000, 5000);

    Your Draw method has to do three things: erase the background, set up the virtual coordinate system, and draw your goods. Virtual coordinates are defined by a rectangle with origin at zero. These can be whatever you like, but if you don't want your drawing to distort, the virtual rect should be the same shape as the client. You must call PrepDC before drawing in these co-ords.

  4. Add a picture control (CStatic) to your dialog. It doesn't need special properties -- the default Frame type is OK. Add a border if you like. Give it an ID, like IDC_ZOOM_CTRL.
  5. Add a member to your dialog h and cpp files:
  6. include "zoomctrl.h"
    class CMyDialog
    {    ...
        CZoomCtrl m_zoomCtrl;
    void CMyDialog::DoDataExchange(CDataExchange* pDX)
    {    ...
        DDX_Control(pDX, IDC_ZOOM_CTRL, m_zoomCtrl);
  7. At this point, you're ready to try it out. But soon, you will want to give the user a way to zoom and unzoom. Here's how this looks for the zoom button of the demo app:
  8. void CZoomCtrlDemoDlg::OnBnClickedZoom()
      m_zoomFactor *= 1.2;

    A member of the dialog keeps track of its zoom factor. Unzoom sets it back to 1.0. Yours could be fancier.


  • Original posted - 3/25/08.


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


About the Author

Jim Dill
Software Developer CambridgeSoft
United States United States
Developer of chemical software by day, model railroad software after hours (

You may also be interested in...


Comments and Discussions

Question[Q]fatal error C1189: #error... Pin
oswo197129-May-14 16:34
memberoswo197129-May-14 16:34 
AnswerRe: [Q]fatal error C1189: #error... Pin
Member 24025714-Jan-16 4:09
memberMember 24025714-Jan-16 4:09 
Questionhow draw double buffering Pin
sunmingpark9-May-13 0:39
membersunmingpark9-May-13 0:39 
GeneralPrinting [modified] Pin
Mohsin_raza1330-Aug-09 17:40
memberMohsin_raza1330-Aug-09 17:40 
Generalprinting Pin
Mohsin_raza1323-Aug-09 17:47
memberMohsin_raza1323-Aug-09 17:47 
how can we take the print of zoom control
Generalfix for scroll bars getting overdrawn by scrolling Pin
Peter Cordes6-Apr-09 4:45
memberPeter Cordes6-Apr-09 4:45 
GeneralBUG: if drop scroll to up, the scroll bar can't redraw Pin
JiaTang8-May-08 4:06
memberJiaTang8-May-08 4:06 

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 | Cookies | Terms of Use | Mobile
Web03 | 2.8.190306.1 | Last Updated 25 Mar 2008
Article Copyright 2008 by Jim Dill
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid